html5结构标签
在本节中，我们将探讨三部分内容，分别是HTML5时代的到来背景、HTML4与HTML5的区别，以及HTML5中新增的结构标签。
HTML5时代的召唤
上一代HTML标准，如HTML 4.01和XHTML 1.0，发布至今已有10多年。在此期间，Web端应用发生了翻天覆地的变化。然而，Web前端缺乏统一通用的互联网标准，各浏览器之间存在大量不兼容问题，开发人员在维护浏览器兼容性方面浪费了大量时间。此外，之前的多媒体操作、动画等都依赖第三方插件，这又引发了多平台兼容性问题。
而HTML5将这些问题的解决方案纳入标准，从根本上解决了浏览器差异和第三方插件的问题，使Web应用更加标准、通用，并且独立于设备。需要注意的是，HTML5并非革命性的改变，而是发展性的，它兼容HTML4的许多标准，基于最新HTML5标准制作的Web应用也能在老版本浏览器上正常运行。
HTML5标准集成了许多实用功能，如音视频、本地存储、Socket通信、动画等。这些功能在之前的Web应用开发中，因被视为Web端的短板而得到重视和升级。
HTML5的目标是通过新标签和新功能，为开发更简洁、独立、标准的通用Web应用提供标准。新的标准解决了三大问题：浏览器兼容问题、文档结构不明确问题以及Web应用程序功能受限问题。
HTML4与HTML5的区别
1. 取消过时的HTML4标签
取消了一些纯粹用于显示效果的标记，如<font>和<center>，它们已完全被CSS取代。其他取消的属性包括：acronym、applet、basefont、big、center、dir、font、frame、frameset、isindex、noframes、strike、tt。
2. 添加新元素
增加了更智能的表单标签，如date、email、url等；以及更合理的标签，如section、video、progress、nav、meter、time、aside、canvas等。
3. 新的全局属性
新增了id、tabindex、repeat等全局属性。
4. 文件类型声明
文件类型声明（<!DOCTYPE>）仅有一型：<!DOCTYPE HTML>。
5. 新的JS API
除了上述变化，还有很多其他改变，后续系列博文中将逐一介绍。
HTML5的新结构标签
在之前的HTML页面中，大多采用Div+CSS的布局方式。搜索引擎抓取页面内容时，只能猜测某个Div内的内容是文章容器、导航模块还是作者介绍等，即整个HTML文档结构定义不清晰。为解决这一问题，HTML5专门添加了与结构相关的元素标签，如页眉、页脚、导航、文章内容等。
在介绍这些新标签之前，先看一个普通页面的布局。通常一个普通页面包含头部、导航、文章内容、右侧边栏和底部等模块，我们通过class进行区分，并使用不同的CSS样式处理。但class并非通用标准规范，搜索引擎只能猜测各部分功能，对于视力障碍人士来说，文档结构和内容也不够清晰。而HTML5新标签带来了新的布局方式，相关HTML代码如下：
<body>
<header>...</header>
<nav>...</nav>
<article>
<section>...</section>
</article>
<aside>...</aside>
<footer>...</footer>
</body>
有了直观认识后，下面逐一介绍HTML5中的相关结构标签。
section标签
<section>标签用于定义文档中的节，如章节、页眉、页脚或文档的其他部分。它一般用于成节的内容，会在文档流中开启一个新的节，用来呈现普通文档内容或应用区块，通常由内容及其标题组成。但<section>并非普通的容器元素，它表示一段专题性内容，一般带有标题。
当描述具体事物时，建议使用<article>代替<section>；使用<section>时，可使用<h1>作为标题，无需考虑其位置及其他地方是否使用；当需要直接为容器定义样式或通过脚本定义行为时，推荐使用<div>而非<section>。示例代码如下：
<section>
<h1>section是什么？</h1>
<h2>一个新的章节</h2>
<article>
<h2>关于section</h2>
<p>section的介绍</p>
...
</article>
</section>
article标签
<article>是特殊的<section>标签，语义更明确，代表一个独立、完整的相关内容块，可独立于页面其他内容使用。例如一篇完整的论坛帖子、博客文章、用户评论等。一般来说，<article>会有标题部分（通常包含在<header>内），有时也会包含<footer>。<article>可以嵌套，内层的<article>与外层的<article>有隶属关系。例如，一篇博客文章可用<article>显示，评论则可以<article>的形式嵌入其中。示例代码如下：
<article>
<header>
<hgroup>
<h1>这是一篇介绍HTML 5结构标签的文章</h1>
<h2>HTML 5的革新</h2>
</hgroup>
<time datetime="2011-03-20">2011.03.20</time>
</header>
<p>文章内容详情</p>
</article>
nav标签
<nav>标签代表页面中可作为导航的部分，是一个链接组，其中的导航元素可链接到其他页面或当前页面的其他部分。这使HTML代码在语义化方面更加精确，同时也更好地支持屏幕阅读器等设备。示例代码如下：
<nav>
<ul>
<li>厚德IT</li>
<li>FlyDragon</li>
<li>J飞龙天惊</li>
</ul>
</nav>
aside标签
<aside>标签用于装载非正文内容，被视为页面中的一个独立部分。其包含的内容与页面主要内容分开，删除后不会影响网页内容、章节或页面传达的信息。例如广告、成组的链接、侧边栏等。示例代码如下：
<aside>
<h1>作者简介</h1>
<p>厚德IT</p>
</aside>
header标签
<header>标签定义文档的页眉，通常包含引导和导航信息。它不局限于网页头部，也可出现在网页内容中。通常，<header>标签至少包含一个标题标记（<h1> - <h6>），还可包括<hgroup>标签、表格内容、标识、搜索表单、<nav>导航等。示例代码如下：
<header>
<hgroup>
<h1>网站标题</h1>
<h1>网站副标题</h1>
</hgroup>
</header>
footer标签
<footer>标签定义<section>或文档的页脚，包含与页面、文章或部分内容相关的信息，如文章作者或日期。作为页面页脚时，一般包含版权、相关文件和链接。它的使用方式与<header>类似，可在一个页面中多次使用。若在一个区段后面添加<footer>，则其相当于该区段的页脚。示例代码如下：
<footer>COPYRIGHT@厚德IT</footer>
hgroup标签
<hgroup>标签用于组合网页或区段<section>的标题元素（<h1> - <h6>）。例如，在一个区段中有连续的<h>系列标签元素，可用<hgroup>将它们括起来。示例代码如下：
<hgroup>
<h1>这是一篇介绍HTML 5结构标签的文章</h1>
<h2>HTML 5的革新</h2>
</hgroup>
figure标签
<figure>标签用于对元素进行组合，多用于图片与图片描述的组合。示例代码如下：
<figure>
<img src="img.gif" alt="figure标签" title="figure标签" />
<figcaption>这儿是图片的描述信息</figcaption>
</figure>