《HTML5开发手册》——1.5　初学者“菜谱”：使用nav元素创建导航

本节书摘来自异步社区《HTML5开发手册》一书中的第1章，第1.5节,作者：【美】Chuck Hudson , 【英】Tom Leadbetter 更多章节内容可以访问云栖社区“异步社区”公众号查看。

1.5　初学者“菜谱”：使用nav元素创建导航

顾名思义，nav元素的作用是提供导航。它用于链接到网站内的其他页面，或者是链接到一个页面的其他部分（例如目录）。

nav最常用的用途是作为网站的主导航。很多情况下，开发者都使用无序列表编写导航，如代码1.4所示。

代码1.4　传统的导航编写方式

在HTML5中创建nav元素时，该代码没有太大变化。生成图1.5所示的代码看起来如代码1.5所示。

代码1.5　HTML5中的导航编写方式

https://yqfile.alicdn.com/f5b9cc184fa792d1b01ceb42b219d4a21771b63a.png" >

也可以将nav标记嵌入到header中，如代码1.6所示，原因是header元素中允许出现介绍性内容和导航内容。当然，不是说非要将它放在header中，有时候我们需要根据样式设计而决定它的位置。我们也经常会看到在页面的页脚中放置的导航菜单，这些导航甚至有时和网站主导航一模一样。

代码1.6　位于header元素中的nav元素

没有必要将页面中的所有链接都放置到nav元素中。HTML5规范中警告：只有“主要导航”才适合放置在nav元素中。

在新闻或者博客站点上，经常可以看到带有指向文章或其他页面链接的侧边栏。代码1.7可以用来生成图1.6所示的元素。

代码1.7　在单个nav元素包含多个导航组

https://yqfile.alicdn.com/6a65fd45ff52dc9755fea6dc64c8691a7b92e308.png" >

注意：
这里使用了一个h2标记来分隔nav中的链接组。如图1.6所示，h2标记可用作一个标签（tab）标题。当用户选中一个标题时，内容将会发生切换（该效果可以通过JavaScript来实现）。标题元素虽然不是必需的，但经常会根据需要用来对导航组进行分隔，使导航组的结构看起来更加整洁。出于样式的原因，也可以将前面的示例拆分为两个nav结构。
使用nav元素能够有效地提升可访问性。屏幕阅读器之类的辅助技术能够搜索并立即使用这些导航组，而不需要等待它们全部加载完毕。通常，开发人员喜欢在HTML文档中使用“跳过”或者“跳转”这样的链接。访问页面时，只有点击这种链接才跳转到主导航或者主要内容上。现在，有了nav元素就可以完全抛弃这种方式了。遗憾的是，当今的辅助技术对HTML5元素的支持还非常有限，不过相信这方面能很快得到改善。