HTML5与CSS3基础教程:标记导航 通过nav指向任意页面内容

摘要:HTML早期版本没有元素明确表示主导航链接的区域,而HTML5则有这样一个元素,即nav。nav中的链接可以指向页面中的内容,也可以指向其他页面或资源,或者两者兼而有之。

作者:图灵教育

来源:《HTML5与CSS3基础教程》(第八版)

第三章全部章节:
第一节:“基本HTML结构 开始编写网页”
第二节:创建页面标题
第三节:创建分级标题
第四、五节:普通页面构成和创建页眉

3.6 标记导航

HTML的早期版本没有元素明确表示主导航链接的区域,而HTML5则有这样一个元素,即nav。nav中的链接可以指向页面中的内容,如图3.6.1所示,也可以指向其他页面或资源,或者两者兼而有之。无论是哪种情况,应该仅对文档中重要的链接群使用nav。

1.jpg

图3.6.1

图3.6.1 这些链接(a元素)代表一组重要的导航,因此将它们放入一个nav元素。role属性并不是必需的,不过它可以提高可访问性。更多有关向nav应用role="navigation"的信息参见本节最后一个提示。

如果你仔细看过上一节的代码,就已经见识过nav元素了。下面将那一段代码搬过来,并对nav进行了突出显示。nav元素不会对其内容添加任何默认样式,如图3.6.2所示。

2.jpg

图3.6.2 在默认情况下,我们的导航看起来相当普通。那些圆点并不是由nav元素产生的。除了开启一个新行以外,该元素没有任何默认样式。显示这些圆点是因为每个链接都包在一个li元素(列表项)里面。使用CSS可以隐藏这些圆点或显示其他的东西,还可以将这些链接水平显示,改变它们的颜色,让它们看起来像按钮,等等。本书将从第7章开始讲解CSS

将一组链接指定为重要导航

(1) 输入<nav>。

(2) 输入一组链接并将其标记为ul(无序列表)结构,除非链接的顺序比较重要(例如面包屑导航)。如果链接顺序重要,就将其标记为ol(有序列表)结构。(要了解链接和列表,分别参见第6章和第15章。)

(3) 输入</nav>。

有编写HTML或XHTML经历的开发人员或许已经习惯了使用ul或ol元素对链接进行结构化。在HTML5中,nav并没有取代这种最佳实践。应该继续使用这些元素,只是在它们的外围简单地包上一个nav(参见图3.6.1)。

尽管屏幕阅读器整体上还在追赶HTML5新出现的语义功能,但nav能帮助它们识别页面的主导航,并允许用户通过键盘直接跳至这些链接。这可以提高页面的可访问性,提升访问者的体验。

HTML5规范不推荐对辅助性的页脚链接(如“使用条款”、“隐私政策”等)使用nav,这不难理解。不过,有时页脚会再次显示顶级全局导航,或者包含“商店位置”、“招聘信息”等重要链接。在大多数情况下,我们推荐将页脚中的此类链接放入nav中。

HTML5不允许将nav嵌套在address元素中。

要了解如何在nav中使用role

"navigation"(参见图3.6.1),请参见3.13节。

4.jpg

3.jpg

图3.6.3 在这个页面中,只有两组链接放在nav里,另外两组则由于不是主要的导航而没有放在nav里