HTML入门：07HTML5语义化布局

HTML5提供了新的语义元素来明确一个web页面的不同部分，根据W3C HTML5文档规范，一般认为HTML5中的布局标签有八个：header、nav、section、article、aside、footer、figure、figcaption，其中最后两个figure、figcaption在HTML入门：06HTML5语义化标签 中已经讲过了，其余六个标签一般在页面中的布局位置如图所示。

下面来学习这六个布局标签的使用。

1 header标签

header标签定义文档或者文档的一部分区域的页眉。首先header标签描述了文档的头部区域，主要用于内容的介绍展示。在页面中，我们也可以同时使用多个header标签，例子如下。

示例：先输入一对head标签，在标签的中间和后面都插入内容，效果如下。

<header>
    <h1>页面的头部</h1>
</header>
<p>页面的内容</p>

2 nav标签

nav用于定义页面的导航链接部分区域，但并不是所有的链接都必须包含在nav标签中。

示例：先输入nav标签并在中间位置建立几个菜单链接，效果如下。

<nav>
    <a href="#">HTML</a>|
    <a href="#">CSS</a>|
    <a href="#">JavaScript</a>|
    <a href="#">JQuery</a>
</nav>

3 section标签

section标签定义文档的节（片段、区段），比如章节、页眉、页脚或文档中的其他分节部分。 根据W3C HTML5文档，section包含了一组内容及其标题。

示例：输入section标签，并通过h1和p标签插入内容，然后再加入一组类似的代码，效果如下。

<section>
    <h1>章节一标题</h1>
    <p>章节一内容</p>
</section>
<section>
    <h1>章节二标题</h1>
    <p>章节二内容</p>
</section>

4 article标签

article标签一般用来定义语义上相对独立的内容。通常用在页面中的这几个部分：论坛帖子，报纸文章，博客条目，用户评论等等。

示例：输入article标签并插入内容，同样，再加入一组类似的代码，效果如下。

<article>
    <h1>文章标题一</h1>
    <p>文章内容</p>
</article>
<article>
    <h1>文章标题二</h1>
    <p>文章内容</p>
</article>

5 aside标签

aside标签定义页面主区域内容（即article）之外的内容，比如侧边栏。一般来说，aside标签的内容应与主区域的内容相关。

举例：输入aside标签，插入相应内容，效果如下。

<aside>
    <h4>侧边栏标题</h4>
    <p>侧边栏内容</p>
</aside>

6 footer标签

footer标签定义文档或者文档的一部分区域的页脚，描述了文档的底部区域。一个页脚通常包含文档的作者、著作权信息、链接的使用条款、联系信息等。

示例：输入footer标签，加入部分页面信息，效果如下。

<footer>
    <p>文档的作者信息</p>
    <p>文档的版权信息</p>
</footer>

通过以上几个标签的演示，大家会发现本文所介绍的标签很难从页面的呈现效果来彼此区分，这是因为这些标签只是从语义上做了区分，并不是header标签就只能放在页面的顶部，而footer标签只能放在页面的底部，之所以做了这样的规范，只是为了让标签的定义与使用在网页结构上更加语义化，使得搜索引擎及开发人员能更加迅速的理解当前网页的整个结构，也使得网络爬虫之类的程序能快速定位到相应的位置。