HTML5 - 页面结构相关的新语义元素汇总

HTML5最主要的特点是添加了许多新的语义元素（虽然其本质还是div）。通过使用这些语义元素，可以为网页创建清晰，有逻辑的结构。下面对页面结构相关的元素做个总结。

1，<article>
表示一篇任何形式的文章，类似新闻报道、论坛帖子、博客文章（不包括评论或者作者简介）等能够独立的内容区块。<artile>应该包含所有相关内容、包括标题、作者署名、以及文章正文。

2，<aside>
表示独立于周围的一个完整的内容块。例如，可以用aside创建一个附注栏，其中包含与主文章相关的内容或者链接。

3，<figure>和<figcaption>
<figure>元素可以理解成是插图，但是与图片的概念还不完全一样，插图独立于文本内容，但也与文本内容相关。
<figcaption>元素可以理解成插图的说明，提个醒，<figcaption>不是只能包含文本，任何html元素都可以，比如链接、小图标。由于figcaption包含了对图片的完整说明，所以alt文本就显得多于了，这种情况下，可以把<img>元素中的alt属性删除。

4，<footer>
表示页面底部的页脚。包含小字号的版权声明，简单的链接等。

5，<header>
表示增强型的标题。可以包含HTML标题和其他内容。其他内容可以是标志、作者署名或一组指向后面内容的导航链接。

6，<nav>
表示页面中重要的一组链接。其中的链接可以指向当前页面的主题，也可以指向网站的其他页面。同时一个页面中可以包含多个<nav>

7，<section>
表示文档中的一个区块，或者表示一组文档。<section>的使用规则是：其中的内容必须开始于一个标题。同时在其他语义元素（如<article>，<aside>）不适用的情况下选用<section>

8，<main>
表示页面的主要内容。比如可以使用<main>包含<article>元素，隔离网站的页眉、页脚和侧边栏。

原文出自：www.hangge.com 转载请保留原文链接：http://www.hangge.com/blog/cache/detail_849.html