我从几年之前就接触了HTML，但最开始没有系统地学过，都是看网上的代码，教程等的，当时网上的代码基本都是无脑
div，真正了解HTML语义化还是我回看MDN的HTML教程时。作为HTML的很权威的教程网站，MDN的HTML编写是十分标准美观的，所以今天我们拿MDN的一篇文章来做例子（因为文章页包含的语义化标签比较多），分析一下MDN的HTML语义化实现的如何。
常见的语义化标签
既然要分析，首先得先知道最常见的语义化标签是干什么的
header
header 元素用于展示介绍性内容，通常包含一组介绍性的或是辅助导航的实用元素。它可能包含一些标题元素，但也可能包含其他元素，比如 Logo、搜索框、作者名称，等等。
nav
nav 元素表示页面的一部分，其目的是在当前文档或其他文档中提供导航链接。导航部分的常见示例是菜单，目录和索引。
main
main 元素呈现了文档的body或应用的主体部分。主体部分由与文档直接相关，或者扩展于文档的中心主题、应用的主要功能部分的内容组成。
footer
footer 元素表示其最近的祖先分段内容的页脚或分段根元素。footer 通常包含有关该部分作者、版权数据或相关文档链接的信息。
article
article 元素表示文档、页面、应用或网站中的独立结构，其意在成为可独立分配的或可复用的结构，如在发布中，它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件，或者其他独立的内容项目。
aside
aside 表示一个和其余页面内容几乎无关的部分，被认为是独立于该内容的一部分并且可以被单独的拆分出来而不会使整体受影响。其通常表现为侧边栏或者标注框。
具体网页分析
接下来打开开发者工具，具体看"元素"页下的HTML结构，先定位到包含页面内容的根元素
#root，然后开始分析
先是并列的一层
ul#nav-access .page-wrapper 和见到的第一个语义化标签 footer.nav-footer
这个footer就是整个页面底部的部分，这个标签可以告诉浏览器这是页面的底部
头部
来看header部分
最上方的方框是页面顶部的广告部分，但是也用了
section标签，来告知这是一个区域，下边的header标签标明是页面头部的部分，里面带有导航性质的都用了nav标签包裹起来，包括菜单链接，和面包屑部分
主区域
主要部分更是大部分外部结构的标签都是语义化标签，文章左边的大目录是
aside包裹，右侧的文章目录也是一个aside，目录下方的广告是一个section区域，主要的文章部分用一个main标签包裹，里面用了article标签，文章内部用section header等标签，这样搜索引擎在爬取页面时就能快速知道文章主要内容只在article标签内部，并且每部分都分了section区域。
语义化能带来什么
- 首先不必多说肯定是SEO的优化，由于对搜索引擎友好，所以更容易获得高排名
- 其次，是让视障人士更加方便使用，屏幕阅读器等辅助技术可以根据语义化标签提供更准确、详细的信息，帮助视力障碍者等更好地理解网页内容
- 用语义化标签能让开发者和其他阅读代码的人更容易理解代码的结构和意图，当需要修改或维护代码时，能够快速定位和理解相关部分
所以作为个人来讲，我是十分愿意拥抱HTML语义化的
