为什么要用新的语义化标签

传统布局下，都是用div加类名给页面布局。div的重复使用，是页面结构单调，不易分辨，还需要反复展开查看类名。

对搜索引擎友好更容易被收录，使网页在搜索出来后的排名更靠前

盲人等残障人士上午需要屏幕阅读器的帮助，不同标签发出的声音是不同的

项目开发时，很容易为取类名而头疼，语义化标签的使用，使类名更简单

header标签

头部标签，英文意思上不难看出，代表网页头部

参考MDN的解释 ：用于展示介绍性内容，通常包含一组介绍性的或是辅助导航的实用元素。它可能包含一些标题元素，但也可能包含其他元素，比如 Logo、搜索框、作者名称，等等。header可以被流式元素（Flow content ）包裹，但不能做adderss标签、footer标签或者另一个header标签的子元素

nav标签

导航条标签，一般用作导航条

参考MDN ：表示页面的一部分，其目的是在当前文档或其他文档中提供导航链接。导航部分的常见示例是菜单，目录和索引。不是所有链接都需要使用nav标签，一般放网页常用的、热门的标签，一个网站页可以允许有多个nav元素。

main标签

主体标签，作用于网页的核心内容

参考MDN ：网页的主体部分。主体部分由与文档直接相关，或者扩展于文档的中心主题、应用的主要功能部分的内容组成。父级元素不能是header、footer、article、aside、nav。mian的内容应当是独一无二的。任何同时存在于任意一系列文档中的相同、重复内容，比如侧边栏、导航栏链接、版权信息、网站 Logo，搜索框（除非搜索框为文档的主要功能），都不应当被包含在其内。mian标签不会影响页面结构概念，它只有提供信息的作用（原文：It's strictly informative.）

aside标签

侧栏标签，在网页结果的边侧

参考MDN ：表示一个和页面主体内容较为无关的部分。被认为是独立于该内容的一部分并且可以被单独的拆分出来而不会使整体受影响。可以被任意流式元素（ Flow content ）包裹，但不能自身嵌套

article标签

单词的英文意思有文章，话题等等

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

每个，通常包括标题（<h1> - <h6>元素）作为元素的子元素。

当元素嵌套使用时，则该元素代表与外层元素有关的文章。例如，代表博客评论的元素可嵌套在代表博客文章的``元素中。

footer标签

页脚标签，网页的脚步

参考MDN：一个页脚通常包含该章节作者、版权数据或者与文档相关的链接等信息。元素内的作者信息应包含在address元素中。元素不是章节内容，因此在outline中不能包含新的章节。