HTML5标准规范制定并公开发布已经很多年了

在面试中要求理解HTML5语义是必不可少的。但在实际操作中，似乎并没有多少人真正使用HTML5标签来开发它(ps:我查了几家巨头公司网站的推论)。或许部分原因是一些用户仍在使用较低版本的浏览器。
不过我个人还是用div，因为有些标签很难选择。

什么是语义学？

就是用合理正确的标签显示内容，比如h1~h6定义标题。

语义优势:

便于用户阅读，并能使页面在失去风格时呈现清晰的结构。
为了支持SEO，搜索引擎根据标签来确定上下文和每个关键词的权重。
方便其他设备解析，比如盲人阅读器根据语义渲染网页。
有利于开发和维护，语义可读，代码更好维护，与CSS3的关系更和谐。
今天先介绍主要结构标签，如图:

网页结构图

HTML5语义标签参考图

1、标题

Header定义了文档或文档一部分的标题，它应该用作介绍内容或导航链接的容器。
在一个文档中，可以定义多个header元素，但是应该注意，header元素不能是address、footer或header元素的子元素。

2、导航

Nav描述了一个具有多个超链接的区域，其中包含一个链接列表，这些链接可以跳转到其他页面或页面中的其他部分。
在一个文档中，可以定义多个导航元素。

3、主要

Main定义了文档的主要内容，这些内容在文档中应该是唯一的，并且在文档中不能包含任何重复的内容，比如侧栏、导航链接、版权信息、网站logo、搜索框(除非搜索框作为文档的主要功能)。
请注意，多个主标签不能出现在一个文档中。

4、文章

文章元素表示文档、页面、应用程序或网站中的独立结构。它是一个可独立分配和重用的结构。例如，在发布中，它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件或其他独立的内容项目。
当article元素嵌套时，它表示与外部元素相关的文章。例如，表示博客评论的article元素可以嵌套在表示博客帖子的article元素中。

5、抛开

aside元素表示与页面其余部分的内容几乎没有关系的部分，被认为是内容的独立部分，可以单独分离而不影响整体。通常表示为侧边栏或嵌入内容。

6、页脚

Footer定义最后一章的内容或根节点元素的页脚。页脚通常包含章节作者、版权数据或与文档相关的链接等信息。
当使用footer插入联系信息时，应该在footer元素中使用address元素。
请注意，不能包含页脚或页眉。

7、截面

节是指文档中的一章，例如，内容中的一个主题组。
不要把section元素当做普通的容器来使用，尤其是当section只是为了美化样式或者方便使用脚本的时候，就应该使用div。在这些标签中，section和article很容易混淆，所以这里有一个特殊的解释:
我们鼓励作者使用article元素而不是section元素，因为组合元素的内容是有意义的。一般来说，文章比小节更独立、更完整。可以通过这一段的内容是否完整，是否独立于上下文来判断。

本网站注意事项:

很多网站对html5的理解是非常片面的，包括这一章的内容。这里只是为了知道html5的一些标签的意义！