3.3　构建语义结构

HTML5新增多个结构化元素，以方便用户创建更友好的页面主体框架，下面来详细学习。

3.3.1　定义页眉

header表示页眉，用来标识页面标题栏。header元素是一种具有引导和导航作用的结构元素，通常用来放置整个页面，或者一个内容块的标题。

header也可以包含其他内容，如数据表格、表单或相关的LOGO信息，一般整个页面的标题应该放在页面的前面。

【示例1】在一个网页内可以多次使用header元素，下面的示例显示为每个内容区块添加一个header。

在HTML5中，header内部可以包含h1 ~ h6元素，也可以包含hgroup、table、form、nav等元素，只要应该显示在头部区域的元素，都可以包含在header元素中。

【示例2】下面的示例是个人博客首页的头部区域，整个头部内容都放在header元素中。

3.3.2　定义导航

nav表示导航条，用来标识页面导航的链接组。一个页面中可以拥有多个nav元素，作为页面整体或不同部分的导航。具体应用场景如下：

• 　主菜单导航。一般网站都设置有不同层级的导航条，其作用是在站内快速切换，如主菜单、置顶导航条、主导航图标等。
• 　侧边栏导航。现在主流博客网站及商品网站上都有侧边栏导航，其作用是将页面从当前文章或当前商品跳转到相关文章或商品页面上去。
• 　页内导航。就是页内锚点链接，其作用是在本页面几个主要的组成部分之间进行跳转。
• 　翻页操作。翻页操作是指在多个页面的前后页或博客网站的前后篇文章滚动。

并不是所有的链接组都要被放进nav元素中，只需要将主要的、基本的链接组放进nav即可。例如，在页脚中通常会有一组链接，包括服务条款、首页、版权声明等，这时使用footer元素是最恰当的。

【示例1】在HTML5中，只要是导航性质的链接，我们就可以很方便地将其放入nav元素中。该元素可以在一个文档中多次出现，作为页面或部分区域的导航。

上述代码创建了一个可以拖动的导航区域，nav元素中包含了3个用于导航的超级链接，即“首页”“图书”和“论坛”。该导航可用于全局导航，也可放在某个段落，作为区域导航。

【示例2】下面的示例页面由多部分组成，每部分都带有链接，但只将最主要的链接放入了nav元素中。

在这个例子中，第一个nav元素用于页面导航，将页面跳转到其他页面上去，如跳转到网站主页或博客页面；第二个nav元素放置在article元素中，表示在文章中内进行导航。除此之外，nav元素也可以用于其他所有你觉得是重要的、基本的导航链接组中。

注意，不要用menu元素代替nav元素。menu主要用在一系列交互命令的菜单上，如快捷菜单。

3.3.3　定义主要区域

main表示主要，用来标识网页中的主要内容。main元素内容对于文档来说应当是唯一的，它不应包含在网页中重复出现的内容，如侧栏、导航栏、版权信息、站点标志或搜索表单等。

注意，由于main元素不对页面内容进行分区或分块，所以不会对网页大纲产生影响。

【示例】下面的页面是一个完整的主体结构。main元素包围着代表页面主题的内容。

main元素在一个页面里仅使用一次。在main开始标签中加上role="main"，这样可以帮助屏幕阅读器定位页面的主要区域。

与p、header、footer等元素一样，main元素的内容显示在新的一行，除此之外不会影响页面的任何样式。如果创建的是Web应用，应该使用main包围其主要的功能。

注意，不能将main放置在article、aside、footer、header或nav元素中。

3.3.4　定义文章块

article表示文章，用来标识页面中一块完整的、独立的、可以被转发的内容。

【示例1】下面的示例演示了article元素的应用。

为了精简，本示例对文章内容进行了缩写，并略去了与上一节相同的nav元素代码。尽管在这个例子里只有段落和图像，但article元素可以包含各种类型的内容。

现在，页面有了header、nav、main和article元素，以及它们各自的内容。在不同的浏览器中，article元素中标题的字号可能不同。可以应用CSS使它们在不同的浏览器中显示相同的大小。

在HTML5中，article元素表示文档、页面、应用或网站中一个独立的容器，原则上是可独立分配或可再用的。它可以是一篇论坛帖子、一篇杂志或报纸文章、一篇博客条目、一则用户提交的评论、一个交互式的小部件或小工具，或者任何其他独立的内容项。其他article元素的例子包括电影或音乐评论、案例研究、产品描述等。这些确定是独立的、可再分配的内容项。

可以将article元素嵌套在另一个article元素中，只要里面的article元素与外面的article元素是部分与整体的关系。一个页面可以有多个article元素。例如，博客的主页通常包括几篇最新的文章，其中每一篇都是其自身的article元素。一个article元素可以包含一个或多个section元素。在article元素里包含独立的h1 ~ h6元素。

【示例2】上面的示例只是使用article元素的一种方式，下面看看其他的用法。下面的示例展示了对基本的新闻报道或报告进行标记的方法。注意footer和address元素的使用。这里，address元素只应用于其父元素article（即这里显示的article），而非整个页面或任何嵌套在那个article元素里面的article元素。

【示例3】下面的示例展示了嵌套在父元素article里面的article元素。本例中嵌套的article元素是用户提交的评论，就像在博客或新闻网站上见到的评论部分。本例还显示了section元素和time元素的用法。这些只是使用article及有关元素的几个常见方式。

每条读者评论都包含在一个article元素里，这些article元素则嵌套在主article元素里。

3.3.5　定义区块

section表示区块，用于标识文档中的节，在页面上多对内容进行分区，例如，章节、页眉、页脚或文档中的其他部分。

【辨析】

div元素也可以用来对页面进行分区，但section元素并非一个普通的容器。当一个容器需要被直接定义样式或通过脚本定义行为时，推荐使用div，而非section元素。

div元素关注结构的独立性，而section元素关注内容的独立性，section元素包含的内容可以单独存储到数据库中，或输出到Word文档中。

【示例1】一个section区块通常由标题和内容组成。下面的示例使用section元素包围排行版的内容，作为一个独立的内容块进行定义。

section元素包含cite属性，用来定义section的URL。如果section摘自Web的话，可以设置该属性。

【辨析】

article和section都是HTML5新增的元素，它们都是用来区分不同内容，用法也相似，从语义角度分析两者区分很大。

• 　article代表文档、页面或者应用程序中独立、完整的可以被外部引用的内容。因为article是一段独立的内容，所以article通常包含header和footer结构。
• 　section用于对网站或者应用程序中页面上的内容进行分块。一个section通常由内容和标题组成。因此，需要包含一个标题，一般不用包含header或者footer结构。

通常使用section元素为那些有标题的内容进行分段，类似文章分段操作。相邻的section内容，应当是相关的，而不像article之间各自独立。

【示例2】下面的示例混用article和section元素，从语义上比较两者不同。article内容强调独立性、完整性，section内容强调相关性。

【追问】

既然article、section是用来划分区域的，又是HTML5的新元素，那么是否可以用article、section取代div来布局网页呢？

答案是否定的，div的用处就是用来布局网页，划分大的区域，所以我们习惯性地把div当成了一个容器。而HTML5改变了这种用法，它让div的工作更纯正。div就是用来布局的，在不同的内容块中，我们按照需求添加article、section等内容块，并且显示其中的内容，这样才是合理的使用这些元素。

因此，在使用section元素时应该注意几个问题：

• 　不要将section元素当作设置样式的结构容器，对于此类操作应该使用div元素实现。
• 　如果article、aside或nav元素更符合语义使用条件，不要首选使用section元素。
• 　不要为没有标题的内容区块使用section元素。

【补充】

使用HTML5大纲工具（http://gsnedders.html5.org/outliner/）来检查页面中是否有没标题的section，如果使用该工具进行检查后，发现某个section的说明中有“untitiled section”（没有标题的section），这个section就有可能使用不当，但是nav元素和aside元素没有标题是合理的。

【示例3】下面的示例进一步演示了article和section混用的情景。

在上面的示例中，首先可以看到整个版块是一段独立的、完整的内容，因此使用article元素标识。该内容是一篇关于W3C的简介，该文章分为3段，每一段都有一个独立的标题，因此使用了两个section元素区分。

【追问】

为什么没有对第一段使用section元素呢？

其实是可以使用的，但是由于其结构比较清晰，浏览器能够识别第一段内容在一个section内，所以也可以将第一个section元素省略，但是如果第一个section元素里还要包含子section元素或子article元素，那么就必须标识section元素。

【示例4】下面是一个包含article元素的section元素示例。

这个示例比第一个示例复杂了一些。首先，它是一篇文章中的一段，因此没有使用article元素。但是，在这一段中有几块独立的内容，所以嵌入了几个独立的article元素。

在HTML5中，article可以是一种特殊功能的section元素，它比section元素更强调独立性。即section元素强调分段或分块，而article强调独立性。具体来说，如果一块内容相对来说比较独立、完整的时候，应该使用article元素，但是如果想将一块内容分成几段的时候，应该使用section元素。

在HTML5中，div变成了一种容器，当应用CSS样式的时候，可以对这个容器进行一个总体的CSS样式的套用。因此，可以将页面的所有从属部分，如导航条、菜单、版权说明等，包含在一个统一的页面结构中，以便统一使用CSS样式来进行装饰。

3.3.6　定义附栏

aside表示侧边，用来标识所处内容之外的内容。aside内容应该与所处的附近内容相关。例如，当前页面或文章的附属信息部分，它可以包含与当前页面或主要内容相关的引用、侧边广告、导航条，以及其他类似的有别于主要内容的部分。

aside元素主要有以下两种用法。

• 　作为主体内容的附属信息部分，包含在article中，aside内容可以是与当前内容有关的参考资料、名词解释等。

【示例1】下面的示例设计了一篇文章，文章标题放在header中，在header后面将所有关于文章的部分放在了一个article中，将文章正文放在一个p元素中。该文章包含一个名词注释的附属部分，因此在正文下面放置了一个aside元素，用来存放名词解释的内容。

aside被放置在一个article内部，因此引擎将这个aside内容理解为与article内容相关联的。

• 　作为页面或站点辅助功能部分，在article之外使用。最典型的形式是侧边栏，其中的内容可以是友情链接、最新文章列表、最新评论列表、历史存档、日历等。

【示例2】下面的示例使用aside元素为个人博客添加一个友情链接辅助版块。

友情链接在博客网站中比较常见，一般放在左右两侧的边栏中，因此可以使用aside来实现，但是这个版块又具有导航作用，因此嵌套了一个nav元素，该侧边栏的标题是“友情链接”，放在了h2元素中，在标题之后使用了一个ul列表，用来存放具体的导航链接列表。

3.3.7　定义页脚

footer表示脚注，用来标识文档或节的页脚。footer元素表示嵌套它的最近的article、aside、blockquote、body、details、fieldset、figure、nav、section或td元素的页脚。只有当它最近的祖先是body元素时，它才是整个页面的页脚。

如果一个footer元素包着它所在区块（如一个article元素）的所有内容，它代表的是像附录、索引、版权页、许可协议这样的内容。

页脚通常包含关于它所在区块的信息，如指向相关文档的链接、版权信息、作者及其他类似条目。页脚并不一定要位于所在元素的末尾，不过通常是这样的。

【示例1】下面的示例中的footer元素代表页面的页脚，因为它最近的祖先是body元素。

页面有了header、nav、main、article、aside和footer元素，当然并非每个页面都需要以上所有元素，但它们代表了HTML中的主要页面构成要素。

footer元素本身不会为文本添加任何默认样式。这里，版权信息的字号比普通文本的小，这是因为它嵌套在small元素里。像其他内容一样，可以通过CSS修改footer元素所含内容的字号。

【示例2】在下面的示例中，第一个footer元素包含在article元素内，因此是属于该article元素的页脚。第二个footer元素是页面级的。只能对页面级的footer元素使用role="contentinfo”，且一个页面只能使用一次。

3.3.8　使用role

role是HTML5新增属性，其作用是告诉Accessibility类应用（如屏幕阅读器等）当前元素所扮演的角色，主要是供残疾人使用。使用role可以增强文本的可读性和语义化。

在HTML5元素内，标签本身就是有语义的，因此role作为可选属性使用，但是在很多流行的框架（如Bootstrap）中都很重视类似的属性和声明，目的是为了兼容老版本的浏览器（用户代理）。

role属性主要应用于文档结构和表单中。例如，设置输入密码框，对于正常人可以用placaeolder提示输入密码，但是对于残障人士是无效的，这个时候就需要role了。另外，在老版本的浏览器中，由于不支持HTML5元素，所以有必要使用role属性。

例如，下面的代码告诉屏幕阅读器，此处有一个复选框，且已经被选中。

    <div role="checkbox" aria-checked="checked"> <input type="checkbox" checked></div>

下面是常用的role角色值。

• 　role="banner"（横幅）

面向全站的内容，通常包含网站标志、网站赞助者标志、全站搜索工具等。横幅通常显示在页面的顶端，而且通常横跨整个页面的宽度。

使用方法：将其添加到页面级的header元素，每个页面只用一次。

• 　role="navigation"（导航）

文档内不同部分或相关文档的导航性元素（通常为链接）的集合。

使用方法：与nav元素是对应关系。应将其添加到每个nav元素，或其他包含导航性链接的容器。这个角色可在每个页面上使用多次，但是同nav元素一样，不要过度使用该属性。

• 　role="main"（主体）

文档的主要内容。

使用方法：与main元素是对应关系。最好将其添加到main元素，也可以添加到其他表示主体内容的元素（可能是div）。在每个页面仅使用一次。

• 　role="complementary"（补充性内容）

文档中作为主体内容补充的支撑部分。它对区分主体内容是有意义的。

使用方法：与aside元素是对应关系。应将其添加到aside或div元素（前提是该div仅包含补充性内容）。可以在一个页面里包含多个complementary角色，但不要过度使用。

• 　role="contentinfo"（内容信息）

包含关于文档的信息的大块、可感知区域。这类信息的例子包括版权声明和指向隐私权声明的链接等。

使用方法：将其添加至整个页面的页脚（通常为footer元素）。每个页面仅使用一次。

【示例】下面的代码演示了文档结构中如何应用role。

注意，即便不使用role，页面看起来也没有任何差别，但是使用它们可以提升使用辅助设备的用户的体验。出于这个理由，推荐使用它们。

对表单元素来说，form是多余的；search用于标记搜索表单；application则属于高级用法。当然，不要在页面上过多地使用地标角色。过多的role角色会让屏幕阅读器用户感到累赘，从而降低role的作用，影响整体体验。