本篇文章的内容是HTML语义化的案例分析，分析一些实际网站的HTML结构，对比非语义化标签的差异。

什么是HTML语义化

对网页的内容结构化，选择符合语义的标签将其展示。例如标题应该用h标签展示，而不是用p标签（不符合语义化的要求）展示，然后用CSS属性放大加粗

语义化标签（元素）举例

header 元素用于展示介绍性内容，通常包含一组介绍性的或是辅助导航的实用元素。它可能包含一些标题元素，但也可能包含其他元素，比如 Logo、搜索框、作者名称，等等。

nav元素表示页面的一部分，其目的是在当前文档或其他文档中提供导航链接。导航部分的常见示例是菜单，目录和索引。

footer 元素表示最近一个章节内容或者根节点（sectioning root）元素的页脚。一个页脚通常包含该章节作者、版权数据或者与文档相关的链接等信息。

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

main 元素呈现了文档的 body 或应用的主体部分。主体部分由与文档直接相关，或者扩展于文档的中心主题、应用的主要功能部分的内容组成。

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

某乎首页

语义化标签header表示网页头部，展示logo、搜索栏、登录等元素

语义化标签main表示网页的主要内容

语义化标签nav表示网页的导航栏

掘金文章

语义化标签aside表示侧边栏

article标签表示文章内容

对比非语义化标签的差异：以上的header等语义化标签可以用div等非语义化标签代替，实现相同的页面效果。但失去了语义，无法体现该部分的内容是网页的头部内容，不便于开发者阅读、开发、维护。

此处的文章内容使用了非语义化标签div展示，也可以用语义化标签article展示，赋予其更明显的语义

语义化的优势：语义化的标签和内容相对应，便于开发者阅读、开发、维护；便于浏览器爬虫、解析；无障碍网页（HTML accessibility）；提高SEO排名