前言

在HTML5之前，都是使用表格、div元素来进行布局，为了使文档结构更加清晰明确，HTML5增加了文档结构关联的结构元素，可以直接定义元素容器的内容，页面结构可以调整的非常清晰，这不仅利于开发者后期维护扩展，更利于搜索引擎的收录。
注意：当一个容器需要定义大量样式或脚本时，请不要使用语义化元素(此时div更加合适)

<article>

article元素代表文档、页面或应用程序中独立的、完整的、可以独自被外部引用的内容。它可以是一篇博客或报刊中的文章、一篇论坛帖子、一段用户评论或独立的插件，或其他任何独立的内容。一个article元素通常有它自己的标题(一般放置在header里)，有时候还有自己的脚注。

article元素是可以嵌套使用的，内层的内容在原则上需要与外层的内容相关联。例如，一篇文章中，针对该文章的评论就可以使用嵌套article元素方式，用来呈现评论的article元素被包含在表示整体内容的article元素里面。另外，article元素也可以用来表示插件，它的作用是使插件看起来好像是 内嵌在页面中一样。

使用场景：article比section更强调独立性，当一块内容独立且完整应该使用article元素。

<section>

section元素用于对网站或应用程序中页面上的内容进行分块，一个section元素通常由内容及其标题组成，但section元素并非一个普通的容器元素。

section在没有标题的情况下建议不要使用，也就是说建议在使用section时应该包含标题内容，如h1，section元素的作用就是对页上的内容进行分块，或者说是对文章进行分段。

section禁忌：

  1. 不要为没有标题的内容区块使用section
  2. 不要将section元素用作设置样式的页面容器，那是div的工作
  3. 如果article元素也符合使用条件，不要使用section

使用场景：当一块内容需要分成几段时，应该使用section元素。

<nav>

nav元素是一个可以用作页面导航的链接组，其中导航元素链接到其他页面或当前页面的其他部分。并不是所有链接组都要放进nav元素，只需要将主要的、基本的链接组放进即可。例如，在页脚中通常会有一些链接，包括服务条款、首页、版权声明等，这时使用footer元素最合适。

一个页面可以拥有多个nav元素，作为页面整体或不同部分的导航，但是不要使用menu元素代替nav元素，menu元素是用在一系列发出命令的菜单上 的，是一种交互性的元素，或者更确切地说是应用在web应用程序中的，这样更利于交互。

使用场景：传统导航栏、侧边导航栏、页内导航、翻页操作。

<aside>

aside元素用来表示当前页面或文章的附属信息部分，它可以包含与当前页面或主要内容相关的引用。

aside使用方法：

  1. 被包含在article元素中作为主要内容的附属信息部分，其中的内容可以是当前文章有关的参考资料、名词解释等。
  2. 在article元素之外使用，作为页面或站点全局的附属信息部分，最典型的形式是侧边栏，其中可以是友情链接、博客中的其他文章列表、广告单元等。

使用场景：侧边栏、广告、导航条，以及其他类似的区别于主要内容的部分。

<time>

time元素代表24小时中某个时刻或某个日期，它允许时间带时差。

time元素是一个微格式，微格式是利用HTML的class属性来对网页添加附加信息的方法。微格式一直存在，只不过在使用上出现了一些问题，因此HTML5增加了time元素来表明对时间进行机器编码，进而增加了信息的可读性。

编码时机器读到的部分在datetime属性里，而元素的开始标记与结束标记中间部分是显示在客户端上的，datetime属性中的日期与时间之间要用T分隔，时间上加上Z文字表示给机器编码时使用UTC标准时间，如果加上了时差，表示向机器编码另一地区时间：如果是编码本地时间，则不需要添加时差。

使用场景：一篇博客的发表时间、文章发布时间等

<header>

header元素是一种具有引导和导航作用的结构元素，通常用来放置整个页面或页面内的一个内容区块的标题，但也可以包含其他内容，如数据表格、搜索表单或相关logo图片。

一个网页内并未限制header元素的个数，可以拥有多个，也可以为每个内容区块加一个header元素。

使用场景：整个文档的头部、一段内容区域的头部等

<footer>

footer元素可以作为父级内容区块或是一个根区块的脚注，footer元素通常包括其相关区块的脚注。

它与header元素类似，一个页面也未限制footer元素个数。可以同时未article或section添加footer元素。

使用场景：整个文档的底部、一段内容区域的脚注、版权区块等。

<hgroup>

hgroup元素是将标题及子标题进行分组的元素，hgroup元素通常会将h1~h6元素进行分组，比如将一个内容区块的标题及子标题算一组。

通常，如果文章中只有一个主标题，是不需要使用hgroup元素的，但是文章有主标题，主标题下面又有子标题，这时使用hgroup元素非常合适。

使用场景：存在主标题与副标题、更多h1~h6标题等

<address>

address元素用来在文档中呈现联系信息，包括文档作者或者文档维护者的名字、网站链接、电子邮箱、地址、电话号码等。

address不只是用来呈现电子邮箱或地址，还可以用来展示与文档有关的联系信息。

使用场景：网站作者信息、文章作者、详细联系信息等。