2.5 构建语义结构

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

2.5.1 定义页眉

如果页面中有一块包含一组介绍性或导航性内容的区域，应该用header元素对其进行标记。一个页面可以有任意数量的header元素，它们的含义根据上下文而有所不同。例如，处于页面顶端或接近这个位置的header可能代表整个页面的页眉（也称为页头）。

通常，页眉包括网站标志、主导航和其他全站链接，甚至搜索框。这是header元素最常见的使用形式，不过不是唯一的形式。

【示例1】本示例的这个header代表整个页面的页眉，它包含一组代表整个页面主导航的链接（在nav元素中）。可选的role="banner"并不适用于所有的页眉。它显式地指出该页眉为页面级的页眉，因此可以提高可访问性。

这种页面级页眉的形式在网上很常见。它包含网站名称（通常为一个标识）、指向网站主要板块的导航链接，以及一个搜索框。

【示例2】header也适合对页面一组介绍性或导航性内容进行标记。例如，一个区块的目录。

提示，header只在必要时使用。大多数情况下，如果使用h1~h6能满足需求，就没有必要用header将它包起来。header与h1~h6元素中的标题是不能互换的。它们都有各自的语义。

header不能嵌套footer元素或另一个header，也不能在footer或address元素嵌套header。当然，不一定要像示例那样包含一个nav元素，不过在大多数情况下，如果header包含导航性链接，就可以用nav。nav包住链接列表是恰当的，因为它是页面的主要导航组。

2.5.2 定义导航

HTML早期版本没有元素明确表示主导航链接的区域，HTML5新增nav元素，用来定义导航。nav中的链接可以指向页面中的内容，也可以指向其他页面或资源，或者两者兼具。无论是哪种情况，应该仅对文档中重要的链接群使用nav。例如：

这些链接（a元素）代表一组重要的导航，因此将它们放入一个nav元素。role属性并不是必需的，不过它可以提高可访问性。nav元素不会对内容添加任何默认样式，除了开启一个新行以外，该元素没有任何默认样式。

一般习惯使用ul或ol元素对链接进行结构化。在HTML5中，nav并没有取代这种最佳实践。应该继续使用这些元素，只是要在它们的外围简单地包一个nav。

nav能帮助不同设备和浏览器识别页面的主导航，并允许用户通过键盘直接跳至这些链接。这可以提高页面的可访问性，提升访问者的体验。

HTML5规范不推荐对辅助性的页脚链接使用nav，如“使用条款”“隐私政策”等。不过，有时页脚会再次显示顶级全局导航，或者包含“商店位置”“招聘信息”等重要链接。大多数情况推荐将页脚的此类链接放入nav。同时，HTML5不允许将nav嵌套在address元素中。

在页面中插入一组链接，并非意味着一定要将它们包在nav元素里。例如，一个新闻页面包含一篇文章，该页面包含4个链接列表，其中只有两个列表比较重要，可以包在nav中。而位于aside的次级导航和footer的链接可以忽略。

如何判断是否要对一组链接使用nav？

这取决于内容的组织情况。一般应该将网站全局导航标记为nav，用户可以跳至网站各个主要部分的导航。这种nav通常出现在页面级的header元素里面。

【示例】在下面的页面中，只有两组链接放在nav里。另外两组由于不是主要的导航，而没有放在nav里。

2.5.3 定义主要区域

一般网页都有一些不同的区块，如页眉、页脚、包含额外信息的附注栏以及指向其他网站的链接等。不过，一个页面只有一个部分代表其主要内容，可以将这样的内容包在main元素中，该元素在一个页面仅使用一次。

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

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

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

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

2.5.4 定义文章块

HTML5的另一个新元素便是article，使用它可以定义文章块。

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

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

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

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

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

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

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

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

2.5.5 定义区块

section元素代表文档或应用的一个一般的区块。section是具有相似主题的一组内容，通常包含一个标题。section包含章节、标签式对话框中的各种标签页和论文中带编号的区块。例如，网站的主页可以分成介绍、新闻条目、联系信息等区块。

section定义通用的区块，但不要将它与div元素混淆。从语义上讲，section标记的是页面中的特定区域，div则不传达任何语义。

【示例1】下面的代码将主体区域划分为3个独立的区块。

【示例2】几乎所有新闻网站都会对新闻进行分类，每个类别都可以标记为一个section。

与其他元素一样，section并不影响页面的显示。

如果只是出于添加样式的原因，要对内容添加一个容器，应使用div，而不是section。

可以将section嵌套在article里，从而显式地标出报告、故事和手册等文章的不同部分或不同章节。例如，可以在本例中使用section元素包裹不同的内容。

使用section时，记住“具有相似主题的一组内容”，这也是section区别于div的另一个原因。section和article的区别在于：section在本质上组织性和结构性更强，而article代表的是自包含的容器。

在考虑是否使用section的时候，开发人员一定要仔细思考，不过也不必每次都担心是否用对。有时，些许主观并不会影响页面正常工作。

2.5.6 定义附栏

页面可能会有一部分内容与主体内容无关，但可以独立存在。在HTML5中，可以使用aside元素表示重要引述、侧栏、指向相关文章的一组链接（针对新闻网站）、广告、nav元素组（如博客的友情链接）、微信或微博源和相关产品列表（通常针对电子商务网站）等。

表面上看，aside元素表示侧栏，但该元素还可以用在页面的很多地方，具体依上下文而定。如果aside嵌套在页面主要内容内（而不是作为侧栏位于主要内容之外），则其中的内容应与其所在的内容密切相关，而不是仅与页面整体内容相关。

【示例】在本示例中，aside是有关次要信息，与页面主要关注的内容相关性稍差，且可以在没有这个上下文的情况下独立存在。可以将它嵌套在article里面，或者将它放在article后面，使用CSS让它看起来像侧栏。aside里面的role="complementary"是可选的，可以提高可访问性。

HTML应该将附栏内容放在main之后。出于SEO和可访问性的目的，最好将重要的内容放在前面。CSS可以改变它们在浏览器中的显示顺序。

对于与内容有关的图像，使用figure而非aside。HTML5不允许将aside嵌套在address元素内。

2.5.7 定义页脚

页脚一般位于页面底部，通常包括版权声明，还可能包括指向隐私政策页面的链接，以及其他类似的内容。HTML5的footer元素可以用在这样的地方，但它同header一样，还可以用在其他的地方。

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"，且一个页面只能使用一次。

2.5.8 使用role

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

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

role属性主要应用于文档结构和表单中。例如，设置输入密码框对于正常人可以用placeholder提示输入密码，但是对于残障人士是无效的，这个时候就需要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属性会让使用屏幕阅读器的用户感到累赘，降低role的作用，影响整体体验。