2.5 HTML5新增的文档结构元素

HTML5引入了多个新的元素用来更加细致地描述页面及文档结构，包括header、nav、section、article、aside和footer等，这些元素可以让文档页面更有意义、更加易读，也可以让搜索引擎更好地理解页面的内容和各个部分之间的关系。

图2-2所示非常清晰地表述了各个元素对应的文档内容关系。

需要注意的是，这些元素的布局和呈现方式并不是由其自身定义的，而是由CSS来呈现，就像呈现<div>元素一样，但<div>元素没有语义，而这几个元素有语义。

2.5.1 文章语义（article、header、footer）元素

根据WHATWG（The Web Hypertext Application Technology Working Group）给出的定义，article元素表示在文档、页面、应用程序或网站中自我包含的部分，也就是指在页面中用来表示一套结构完整且独立的内容部分，原则上讲是独立分布和重复使用的。比如论坛的一个帖子、杂志或报纸中的一篇文章、一篇博客、用户提交的一篇评论内容，以及页面上可用于互动的一个widget（微件）模块等。

article元素可以被嵌套使用，内层的内容在原则上要与外层内容相关联。例如，一篇博客文章与针对该文章的评论。但与article元素相关联的作者信息却只能使用address元素来表示。

WHATWG规范将header元素简单地描述为“一组前言或导航助手”，曾经习惯使用的<div id="header">就可以用它来代替，但这个元素没有每页只用一次的限制，可以在每一个章节中再次使用header元素。header元素可用于页面内任何特定独立部分的具有引导和导航作用的辅助元素。通常，header元素可以包含一个区块的标题（如h1～h6，或者hgroup元素），也可以包含其他内容，如该区块内容的索引表、搜索表单或相关的Logo图片。甚至nav元素也可以在header中使用。虽然header元素经常会被放在页面或一节内容的顶部，但是它的定义与其位置无关。

与header元素一样，也可以在一个单独页面中使用多个 footer元素，它也可以代替原来的<div id="footer">。根据规范，footer元素表示最近部分内容的页脚，“部分”内容可以是section、article或aside元素，也就是说footer元素可以作为其直接父级内容区块或是一个根区块的尾部内容，通常包括其相关区块的附加信息，如文档的作者、创作日期、相关阅读链接及版权信息等。

以“博客”网站为例，包括博客的文章列表（列表中仅包含文章的简单介绍）、文章的部分正文内容和“阅读全文”，并允许用户评论。

先来看一篇文章列表的代码。

CSS样式为：

在网页中的显示效果如图2-3所示。

文章详细内容的代码为：

在网页中的显示效果如图2-4所示。

2.5.2 内容区块语义（section）元素

WHATWG规范将section元素定义为表示文档或应用程序的通用部分，即一个文档内容区块或应用区块，一个区块通常由内容及其标题组成。下面即为一个简单的例子。

section元素是通用的，所以如果有一个更具体的语义元素更恰当（如article、aside或nav），那么就使用这些元素替代section；section元素有语义，意味着它所包含的内容具有相关性，所以如果无法简洁地用几个词描述放在section元素中的内容，那么极有可能需要一个更加中立的容器替代它，比如更低级的div元素。

所以，当一个容器需要被直接定义样式或通过脚本定义行为时，推荐使用div，那些没有标题的内容也不推荐使用section。

一般情况下，文章和论文中的章节、对话框中的选项卡等都可以是一个section元素。

section元素和article元素可以根据需要相互嵌套。

2.5.3 侧栏（aside）与导航（nav）元素

aside元素用来显示当前页面或文章的附属信息部分。它可以包含与当前页面或主要内容无关的引用、侧边栏、广告、导航元素组，以及其他类似的有别于主要内容的部分。

导航一般使用nav元素来实现，因此，一般使用以下代码来实现左侧导航栏。

使用CSS样式可以定义aside元素的布局，一般是使用浮动功能将aside元素浮动到侧边，样式代码如下。

nav元素导航链接部分一般位于网页的顶部或者正文的左右两侧，一个页面中可以拥有多个nav元素，作为页面整体或不同部分的导航。

2.5.4 hgroup元素为标题分组

<hgroup>标签定义为对网页或区段的标题元素进行组合，通常使用多级别的<h1>～<h6>标签结点进行分组，如果一个文章只有一个主标题，则不需要使用<hgroup>标签。示例如下。

代码中，在header元素内使用hgroup元素表示一组信息。hgroup内共有h1、h2和h3共3部分元素内容，它们都分别表示为主标题和副标题等。

对于hgroup元素的用法，虽然没有严格的要求，但适当地使用hgroup元素对于搜索引擎优化（Search Engine Optimization，SEO）有一定的好处，因此hgroup元素内还是建议使用<h1>～<h6>标签。