HTML5 结构之美(2) - 新增的非主体结构标签

浏览数：34 / 时间：2015年06月09日

接上文《HTML5 结构之美(1) - 新增的主体结构标签》，HTML5 还新增了一些表示逻辑结构或附加信息的非主体结构标签。

header标签

header 标签是一种具有引导和导航作用的结构标签，通常用来放置整个页面或页面内的一个内容区块的标题，但也可以包含其他内容，例如数据表格、搜索表单或相关的 logo 图片。

很明显，整个页面的标题应该放在页面的开头，我们可以用如下所示的形式书写页面的标题：

需要强调的一点是：一个网页内并未限制 header 标签的个数，可以拥有多个，可以为每个内容区块加一个 header 标签，如下所示：

<header>
    <h1>网页标题</h1>
</header>
<article>
    <header>
        <h1>文章标题</h1>
    </header>
    <p>文章正文</p>
</article>

在 HTML5 中，一个 header 标签通常包括至少一个 heading 标签(h1-h6)，也可以包含我们后面将要讨论的 hgroup 标签，还可以包含其他标签（比如table或form），根据最新的 HTML5 标准，还可以包括 nav 标签。最后，让我们看一下博客网页中 header 标签的一个应用示例。

<header>
    <hgroup>
        <h1>Jason‘s Blog</h1>
        <a href="http://www.cnblogs.com/jasonsoop/">http://www.cnblogs.com/jasonsoop/</a>
        <a href="#">[订阅]</a>
        <a href="#">[手机订阅]</a>
    </hgroup>
    <nav>
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">博问</a></li>
            <li><a href="#">闪存</a></li>
            <li><a href="#">联系</a></li>
            <li><a href="#">订阅</a></li>
        </ul>
    </nav>
</header>

hgroup标签

hgroup 标签是将标题及其子标题进行分组的标签。hgroup 标签通常会将 h1~h6 标签进行分组，比如一个内容区块的标题及其子标题算一组。

通常，如果文章只有一个主标题，是不需要 hgroup 标签的，如下所示：

<article>
    <header>
        <h1>文章标题</h1>
        <p><time datetime="2014-11-01">2014年11月1日</time></p>
    </header>
    <p>文章正文</p>
</article>

但是，如果文章有主标题，主标题下有子标题，就需要使用 hgroup 标签了，如下所示：

<article>
    <header>
        <hgroup>
            <h1>文章主标题</h1>
            <h2>文章子标题</h2>
        </hgroup>
        <p><time datetime="2014-03-20">2014年3月20日</time></p>
    </header>
    <p>文章正文</p>
</article>

footer标签

footer 标签可以作为其上层父级内容区块或是一个根区块的脚注。footer 通常包含与其相关区块的脚注信息，如作者、相关阅读链接及版权信息等。

在 HTML5 出现之前，我们使用下面的方式编写页脚：

<div id="footer">
    <ul>
        <li>版权信息</li>
        <li>站点地图</li>
        <li>联系方式</li>
    </ul>
</div>

但是到了 HTML5 之后，这种方式将不再使用，而是使用更加语义化的 footer 标签来替代，如下代码所示：

<footer>
    <ul>
        <li>版权信息</li>
        <li>站点地图</li>
        <li>联系方式</li>
    </ul>
</footer>

与 header 标签一样，一个页面也未限制 footer 标签的个数。同时，可以为 article 标签或 section 标签添加 footer 标签。

以下的代码为一个在 article 标签中添加 footer 标签的示例：

<article>
    文章内容
    <footer>
        文章的脚注
    </footer>
</article>

以下的代码为一个在 section 标签中添加 footer 标签的示例：

<section>
    分段内容
    <footer>
        分段内容的脚注
    </footer>
</section>

address标签

address 标签用来在文档中呈现联系信息，包括名字、网站链接、电子邮箱、真实地址、电话号码等等。比如，如下代码展示了一些博客中某篇文章评论者的名字及其在博客中的网址链接。

<address>
    <a href="http://www.cnblogs.com/jasonsoop/">Jason</a>
    <a href="http://www.cnblogs.com/lucky/">Lucky</a>
    <a href="http://www.cnblogs.com/popeye/">Popeye</a>
</address>

下面我们通过代码示例来看如何把 footer 标签、time 标签与 address 标签结合起来使用。

<footer>
    <div>
        <address>
            <a title="文章作者：Jason" href="http://www.cnblogs.com/jasonsoop/">Jason</a>
        </address>
        发表于<time datetime="2014-11-01">2014年11月1日</time>
    </div>
</footer>