HTML语义化的案例分析

**前言：**分析一些实际网站的HTML结构，对比非语义化标签的差异

1 语义化是什么?

目的： 使页面具有良好的结构与含义，从而让人和机器都能快速理解网页内容。

现在让我们借助MDN的网站进行案例分析学习。选取原因（页面简洁、布局合理）

1. 首先可以看到页面有三个分区，左右两侧的侧边栏和中间的主体内容，主体包括顶部标题、文本内容、图片和引用等。

2. 借助网页工具，查看html代码,学习他们的编写思路和实际应用。（按键盘的F12）

3. 逐个分析。

首先,可以看到这是main,页面仅有一个主标签，是为页面最主要内容。便于程序员找到内容主体进行后续改进。

其次，侧边栏使用了aside,将大纲部分一整个框住。如下图

接下来我们先学习article和section两个元素，再找一下这个网页代码中涉及到这两个元素的应用，对其两者的应用场景进行区分，借此初步了解语义化的含义。

section元素：表示 HTML 文档中一个通用独立章节，它没有更具体的语义元素来表示。一般来说会包含一个标题。下面是MDN上的一个解释。

article元素：表示文档、页面、应用或网站中的独立结构，其意在成为可独立分配的或可复用的结构，如在发布中，它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件，或者其他独立的内容项目。下面是MDN上的一个解释。

找了半天，终于找到了（哭哭）。在main中我们看到一个section。这里之所以选择section而不是article，证明了section可以单独拿出来放在其他地方仍然有效，具有意义。

今天学习了，html的语义化的相关知识，在深入了解了大量标签后，通过我们学习平台MDN的一个网页进行实操演练，从海量代码块中寻找相近含义的元素进行语义化区分，从而解释何者能让程序员更加快速了解页面，不仅如此，还学习到了很多，如一些框架性的结构，具体位置的摆放等。

星辰大海，你我同行。