2.3　语义化结构

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

2.3.1　定义页眉

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

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

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

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

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

2.3.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.3.3　定义主要区域

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

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

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

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

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

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

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

2.3.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的时候，一定要仔细思考，不过也不必每次都对是否用对感到担心。有时，section并不会影响页面正常工作。

2.3.6　定义附栏

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

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

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

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

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

2.3.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】在本示例中，第1个footer包含在article内，因此是属于该article的页脚。第2个footer是页面级的。只能对页面级的footer使用role="contentinfo"，且一个页面只能使用一次。

2.3.8　使用role

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

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

role属性主要应用于文档结构和表单中。例如，设置输入密码框，对于正常人可以用placaholder提示输入密码，但是对于残障人士是无效的，这时就需要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元素来说，建议也应该设置role="main"属性，其他结构元素更应该设置role="main"属性，以便让浏览器能够识别它是网页主体内容。在每个页面仅使用一次。

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

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

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

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

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

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

【示例】在文档结构中应用role。