3.2 新增的非主体结构元素
除了以上几个主要的结构元素之外，HTML 5内还增加了一些表示逻辑结构或附加信息的非主体结构元素。下面分别来介绍。
3.2.1 header元素
header元素是一种具有引导和导航作用的结构元素，通常用来放置整个页面或页面内的一个内容区块的标题，但也可以包含其他内容，例如数据表格、搜索表单或相关的logo图片。
很明显，整个页面的标题应该放在页面的开头，我们可以用如下所示的形式书写页面的标题：
<header><h1>页面标题</h1></header>
需要强调的一点是：一个网页内并未限制header元素的个数，可以拥有多个，可以为每个内容区块加一个header元素，如代码清单3-12所示。
代码清单3-12 多个header元素示例
<header>
<h1>网页标题</h1>
</header>
<article>
<header>
<h1>文章标题</h1>
</header>
<p>文章正文</p>
</article>
在HTML 5中，一个header元素通常包括至少一个heading元素（h1-h6），也可以包括我们后面将要讨论的hgroup元素，还可以包括其他元素（譬如table或form），根据最新的W3C HTML 5标准，还可以包括nav元素。最后，让我们看一下博客网页中header元素的一个应用示例。示例中header元素处于页面顶部。详见代码清单3-13。
代码清单3-13 博客网页中header元素的示例
<header> <hgroup> <h1>IT新技术</h1> <a href="http://blog.sina.com.cn/itnewtech"> http://blog.sina.com.cn/itnewtech </a> <a href="#">[订阅]</a> <a href="#">[手机订阅]</a> </hgroup> <nav> <ul> <li>首页</li> <li><a href="http://blog.sina.com.cn/articlelist1.html">博文目录</a></li> <li><a href="http://photo.blog.sina.com.cn/itnewtechl">图片</a></li> <li><a href="http://photo.blog.sina.com.cn/itnewtech">关于我</a></li> </nav> </header>
如果对这段代码使用CSS样式，显示界面如图3-3所示。
图3-3 博客网页中header元素示例
3.2.2 hgroup元素
hgroup元素是将标题及其子标题进行分组的元素。hgroup元素通常会将h1～h6元素进行分组，譬如一个内容区块的标题及其子标题算一组。
通常，如果文章只有一个主标题，是不需要hgroup元素的，如代码清单3-14所示。
代码清单3-14 只有header元素的示例
<article>
<header>
<h1>文章标题</h1>
<p><time datetime="2010-03-20">2010年10月29日</time></p>
</header>
<p>文章正文</p>
</article>
但是，如果文章有主标题，主标题下有子标题，就需要使用hgroup元素了，如代码清单3-15所示。
代码清单3-15 hgroup元素示例
<article>
<header>
<hgroup>
<h1>文章主标题</h1>
<h2>文章子标题</h2>
</hgroup>
<p><time datetime="2010-03-20">2010年10月29日</time></p>
</header>
<p>文章正文</p>
</article>
3.2.3 footer元素
footer元素可以作为其上层父级内容区块或是一个根区块的脚注。footer通常包括其相关区块的脚注信息，如作者、相关阅读链接及版权信息等。
在HTML 5出现之前，我们使用下面的方式编写页脚，如代码清单3-16所示。
代码清单3-16 HTML 5之前的页脚示例
<div id="footer">
<ul>
<li>版权信息</li>
<li>站点地图</li>
<li>联系方式</li>
</ul>
<div>
但是到了HTML 5之后，这种方式将不再使用，而是使用更加语义化的footer元素来替代，如代码清单3-17所示。
代码清单3-17 footer元素示例
<footer>
<ul>
<li>版权信息</li>
<li>站点地图</li>
<li>联系方式</li>
</ul>
</footer>
与header元素一样，一个页面中也未限制footer元素的个数。同时，可以为article元素或section元素添加footer元素，请看下面两个示例。
代码清单3-18为一个在article元素中添加footer元素的示例。
代码清单3-18 在article元素中添加footer元素
<article>
文章内容
<footer>
文章的脚注
</footer>
</article>
代码清单3-19为一个在section元素中添加footer元素的示例。
代码清单3-19 在section元素中添加footer元素
<section>
分段内容
<footer>
分段内容的脚注
</footer>
</section>
3.2.4 address元素
address元素用来在文档中呈现联系信息，包括文档作者或文档维护者的名字、他们的网站链接、电子邮箱、真实地址、电话号码等。address应该不只是用来呈现电子邮箱或真实地址，还应用来展示跟文档相关的联系人的所有联系信息。譬如，在代码清单3-20中，展示了一些博客中某篇文章评论者的名字及其在博客中的网址链接。
代码清单3-20 address元素示例
<address>
<a href=http://blog.sina.com.cn/itnewtech>陆凌牛</a>
<a href=http://blog.sina.com.cn/zhangyu>张玉</a>
<a href=http://blog.sina.com.cn/baiquanli>白权立</a>
</address>
下面我们通过代码清单3-21来看如何把footer元素、time元素与address元素结合起来使用。
代码清单3-21 footer、time与address结合使用的例子
<footer>
<div>
<address>
<a title="文章作者：陆凌牛" href="http://blog.sina.com.cn/itnewtech">陆凌牛</a>
</address>
发表于<time datetime="2010-10-04">2010年10月4日</time>
</div>
</footer>
在这个示例中，把博客文章的作者、博客的主页链接作为作者信息放在了address元素中，把文章发表日期放在了time元素中，把这个address元素与time元素中的总体内容作为脚注信息放在了footer元素中。