标签：
html5语义化标签之结构标签
html5里面新增加了一些标签，这些标签使得html更语义化，本文主要提到的标签有：section、article、header、nav、footer、hgroup、aside。
section标签
<section>标签，定义文档中的节。比如章节、页眉、页脚或文档中的其它部分。它用来表现普通的文档内容或应用区块，通常由内容及其标题组成。但section元素标签并非一个普通的容器元素，它表示一段专题性的内容，一般会带有标题。
当我们描述一件具体的事物的时候，通常鼓励使用article来代替section；当我们使用section时，仍然可以使用h1来作为标题，而不用担心它所处的位置，以及其它地方是否用到；当一个容器需要被直接定义样式或通过脚本定义行为时，推荐使用div元素而非section。
article标签
<article>是一个特殊的section标签，它比section具有更明确的语义，它代表一个独立的、完整的相关内容块，可独立于页面其它内容使用。例如一篇完整的论坛帖子，一篇博客文章，一个用户评论等等。一般来说，article会有标题部分（通常包含在header内），有时也会包含footer。article可以嵌套，内层的article对外层的article标签有隶属关系。例如，一篇博客的文章，可以用article显示，然后一些评论可以以article的形式嵌入其中。
nav标签
nav标签代表页面的一个部分，是一个可以作为页面导航的链接组，其中的导航元素链接到其它页面或者当前页面的其它部分，使html代码在语义化方面更加精确，同时对于屏幕阅读器等设备的支持也更好。
<nav>
<ul>
<li><a href="http://www.rainleaves.com">首页</a></li>
<li><a href="#">html+css</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">seo优化</a></li>
<li><a href="#">wordpress教程</a></li>
</ul>
</nav>
但并不是页面上的所有链接团体都需要放在nav标签内，它主要是由页面的主要导航块组成。例如，我们通常在网站的页脚里放一组链接，包括服务条款、网站介绍、版权声明等，这时，我们通常使用footer，而不是nav。
一个页面可可以包含多个nav标签，作为页面整体或者不同部分的导航。在下面的例子中，有两个nav标签，一个是网站的主体导航，另外一个是当前页面本身的辅助链接导航。
<h1>雨打浮萍</h1>
<nav>
<ul>
<li><a href="/">首页</a></li>
<li><a href="#">html+css</a></li>
...more...
</ul>
</nav>
<article>
<header>
<h1>html5语义化标签之结构标签</h1>
<p><span>发表于</span>2011-12-22</p>
</header>
<nav>
<ul>
<li><a href="#">子导航</a></li>
<li><a href="#">子导航</a></li>
...more...
</ul>
</nav>
<div>
<section id="public">
<h1>section里面仍然可以再用h1标签</h1>
<p>...more...</p>
</section>
<section id="destroy">
<h1>section里面仍然可以再用h1标签</h1>
<p>...more...</p>
</section>
...more... </div>
<footer>
<p><a href="#">关于我们</a> |
<a href="#">友情链接</a> |
<a href="#">杂七杂八</a></p>
</footer>
</article>
<footer>
<p><small>© copyright 2011 </small></p>
</footer>
nav标签本身并不要求包含一个列表，它还可以包含其它内容形式。
<nav>
<h1>Navigation</h1>
<p>You are on my home page. To the north lies <a href="/blog">my
blog</a>, from whence the sounds of battle can be heard. To the east
you can see a large mountain, upon which many <a
href="/school">school papers</a> are littered. Far up thus mountain
you can spy a little figure who appears to be me, desperately
scribbling a <a href="/school/thesis">thesis</a>.</p>
<p>To the west are several exits. One fun-looking exit is labeled <a
href="http://games.example.com/">"games"</a>. Another more
boring-looking exit is labeled <a
href="http://isp.example.net/">ISP™</a>.</p>
<p>To the south lies a dark and dank <a href="/about">contacts
page</a>. Cobwebs cover its disused entrance, and at one point you
see a rat run quickly out of the page.</p>
</nav>
aside标签
aside标签用来装载非正文的内容，被视为页面里面一个单独的部分。它包含的内容与页面的主要内容是分开的，可以被删除，而不会影响到网页的内容、章节或是页面所要传达的信息。例如广告，成组的链接，侧边栏等等。
header标签
<header>标签定义文档的页眉，通常是一些引导和导航信息。它不局限于写在网页头部，也可以写在网页内容里面。
通常<header>标签至少包含（但不局限于）一个标题标记（<h1>-<h6>），还可以包括<hgroup>标签，还可以包括表格内容、标识、搜索表单、<nav>导航等。
<header>
<h1>雨打浮萍</h1>
<p>专注于web前端开发</p>
</header>
<article>
<header>
<h1>html5语义化标签之结构标签</h1>
<p>article、section、hgroup、aside、nav...</p>
</header>
<p>...这里面包含很多东西...</p>
</article>
footer标签
footer标签定义section或document的页脚，包含了与页面、文章或是部分内容有关的信息，比如说文章的作者或者日期。作为页面的页脚时，一般包含了版权、相关文件和链接。它和<header>标签使用基本一样，可以在一个页面中多次使用，如果在一个区段的后面加入footer，那么它就相当于该区段的页脚了。
hgroup标签
hgroup标签是对网页或区段section的标题元素（h1-h6）进行组合。例如，在一区段中你有连续的h系列的标签元素，则可以用hgroup将他们括起来。
<hgroup>
<h1>雨打浮萍</h1>
<h2>专注于web前端开发</h2>
</hgroup>
HTML5语义化标签
标签：
原文地址：http://www.cnblogs.com/muyan927/p/5677663.html
