结构之美：html5新的布局标签

结构之美：主要是HTML5新增了一些新的布局元素（header、section、article、nav、aside、footer、hgroup、figure、menu），用来标识页面结构，使得html更语义化。下面我们就来看看HTML5中新增的一些关键的结构性标记。

header标签

手册释义：定义 section 或 document 的页头。
使用指引：一般用来包含页面头部，也可用于其他区域头部，比如article头部：

<header>
	<hgroup>
		<h1>瑞克互动博客</h1>
		<h1>关注前端开发,CSS hack,HTML3CSS3,网页设计,游戏等新动态</h1>
	</hgroup>
</header>

section标签

手册释义：定义文档中的节(section)。比如章节、页眉、页脚或文档中的其他部分。
使用指引：用于成节的内容，会在文档流中开始一个新的节：

<section>
	<h1>section是什么？</h1>
	<h2>一个新的章节</h2>
	<article>
		<h2>关于section</h1>
		<p>section的介绍</p>
		…
	</article>
</section>

article标签

手册释义：定义外部的内容。比如来自一个外部的新闻提供者的一篇新的文章，或者来自 blog 的文本，或者是来自论坛的文
本。亦或是来自其他外部源内容。
使用指引：顾名思义，一般用于文章区块：

<article>
	<header>
		<hgroup>
			<h1>这是一篇介绍HTML 5结构标签的文章</h1>
			<h2>HTML 5的结构之美</h2>
		</hgroup>
		<time datetime=”2011-12-30″>2011.12.30</time>
	</header>
	<p>文章内容详情</p>
</article>

nav标签

手册释义：定义导航链接的部分。
使用指引：用于定义页面的导航部分：

<nav>
	<ul>
		<li>HTML 5</li>
		<li>CSS</li>
		<li>JavaScript</li>
	</ul>
</nav>

 

aside标签

定义 article 以外的内容。aside 的内容应该与 article 的内容相关。
使用指引：用于成节的内容，会在文档流中开始一个新的节，一般用于与文章内容相关的边栏：

<aside>
	<h1>瑞克简介</h1>
	<p>瑞克互动博客,关注前端开发,CSS hack,HTML3CSS3,网页设计,游戏等新动态</p>
</aside>

footer标签

手册释义：定义 section 或 document 的页脚。典型地，它会包含创作者的姓名、文档的创作日期以及/或者联系信息。
使用指引：一般用来包裹整个页面通用底部，也可用于其他区域底部，比如article底部：

<footer>
	COPYRIGHT@reake.com
</footer>

hgroup标签

手册释义：用于对网页或区段(section)的标题进行组合。
使用指引：用于标题类的组合，比如文章的标题与副标题：

<hgroup>
	<h1>这是一篇介绍HTML 5结构标签的文章</h1>
	<h2>HTML5的结构之美</h2>
</hgroup>

figure标签

手册释义：用于对元素进行组合。
使用指引：多用于图片与图片描述组合：

<figure>
	<img src=”img.gif” alt=”figure标签”  title=”figure标签” />
	<figcaption>这儿是图片的描述信息</figcaption>
</figure>

menu标签

手册释义：定义菜单列表。当希望列出表单控件时使用该标签。
使用指引：使用于菜单类区块，用来定义菜单列表或菜单选项:

<menu>
	<li>HTML 5</li>
	<li>CSS</li>
	<li>JavaScript</li>
</menu>

HTML5的其他新标签，请参考记录HTML5新增的标签和属性这篇文章，或请自行查询HTML5手册和HTML5标签/属性/事件及兼容性图文速查表。