HTML5内容分组标签与新结构

2011-3-16 - diyidu - 网页设计 - Views

HTML5主要带来两大变化：一是新增了大量功能强大的API，二是引入了新的语义标签。本文试谈下这些新的语义标签中的内容分组标签与结构标签。

内容分组标签

<figure>和<figurecaption>

figure用于组合标签。通常被用作插图、图标、照片和代码清单的组合。如果要为该组合指定标题，请使用figurecaption标签。示例：

<figure>
    <img src="/upload/001.gif" alt="001">
    <img src="/upload/002.gif" alt="002">
    <img src="/upload/003.gif" alt="003">
    <figcaption>低一度</figcaption>
</figure>

结构标签

<header>

header标签代表一组简介或者导航性的内容。其位置表现在页面（Page）或节点（Section）的头部。

通常header标签用于包含页面标题（h1-h6、hgroup），但这不是必须的，header标签也可以用于包含节点的内容列表导航（比如目录、搜索表单以及相关的Logo图标等）。

下面是一个header的例子：

<header>
    <hgroup>
        <h1><a href="http://www.diyidu.cn/" target="_blank">diyidu.cn</a></h1>
        <h2>专注网页设计、网站运营与免费资源</h2>
    </hgroup>
</header>

<hgroup>

上面的代码中有hgroup的使用，hgroup的目的是将不同层级的标题（h1-h6）封装成一组。如果要定义一个页面的大纲（outlines），使用hgroup非常合适，如定义本文的大纲层级：

<header>
    <hgroup>
        <h1>HTML5内容分组标签和新结构</h1>
        <h2>内容分组标签</h2>
        <h3>figure和figurecaption</h3>
        <h2>结构标签</h2>
        <h3>header</h3>
        <h3>hgroup</h3>
        <h3>footer</h3>
        <h3>nav</h3>
        <h3>aside</h3>
        <h3>section和article</h3>
        <h3>address</h3>
    </hgroup>
</header>

<footer>

footer标签代表了其父层节点或者根标签节点内容的底部，一个典型的footer包含节点内容的发布者、相关文档链接、版权信息和类似文档内容。内容的作者和编辑者有专门对应的标签<address>，address可以放在footer标签内部。

footer标签通常被放在一个节点的底部，但也可以被放置在另外的地方。

<nav>

nav定义了网站或者页面内部的导航链接。通常一个页面内不会有太多的nav标签，即并不是所有分组的链接都要放在nav内，仅页面内的主导航部分需要使用它。如果在文章页面，除了网站的主导航外，还可以使用nav为文章的章节做一个快捷链接导航。

<aside>

aside标签用于表现与页面主内容有关联的内容集合，这部分内容相对独立，但又与主内容有关。nav标签则可以用来定义侧边栏、广告内容、分组导航以及其他与主内容相对独立的内容。

<section>和<article>

section标签定义一个文档或应用的一节，表现为一个区域分组（可以认为是页面中的一个模块），每一个section通常都会有相应的标题。section标签可以用来表现文章的章节、不同的tab页。网站的首页应该被划分为不同的节，如介绍、新闻和联系信息等。如果需要通过script脚本进行交互，则不必使用section标签，应该用div代替。section标签使用的基本规则是，它可以明确的表达页面文档的大纲结构而不是参与页面交互功能。

article定义文档、页面、网站或应用的一个独立内容块。比如论坛帖子、杂志或新闻文章、blog日志、用户评论和交互的小工具等。article内可以放置section标签来表现该内容块的章节信息。

<address>

address标签为其所在的article或body标签提供联系信息，如果在body内，则该联系信息应用于整个文档。address标签内只能放与其所在节点内容有相关性的联系信息，而不是放什么都可以。也不能在address内放与联系信息无关的内容，如下面的使用就是错误的：