HTML入门：07HTML5语义化布局

HTML 入门：07HTML5 语义化布局

• 1 header 标签
• 2 nav 标签
• 3 section 标签
• 4 article 标签
• 5 aside 标签
• 6 footer 标签

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="#">HTMLa>|
    a href="#">CSSa>|
    a href="#">JavaScripta>|
    a href="#">JQuerya>
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 标签只能放在页面的底部，之所以做了这样的规范，只是为了让标签的定义与使用在网页结构上更加语义化，使得搜索引擎及开发人员能更加迅速的理解当前网页的整个结构，也使得网络爬虫之类的程序能快速定位到相应的位置。