3.8　标记导航

3.8　标记导航

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

...
<body>
<header>
     <nav role="navigation">
        <ul>
           <li><a href="#gaudi">Barcelona's Architect</a></li>
           <li lang="es"><a href="#sagrada-familia">La Sagrada Família</a> </li>
           <li><a href="#park-guell">Park Guell</a></li>
        </ul>
     </nav>
</header>
</body>
</html>

图3.8.1　这些链接（a元素）代表一组重要的导航，因此将它们放入一个nav元素。通常用一个ul元素（无序列表）对链接列表进行标记，除非链接是面包屑链接。如果是面包屑，则使用一个ol元素（有序列表）。更多有关列表的信息参见第15章。role属性并不是必需的，不过它可以提高可访问性。更多有关向nav应用role="navigation"的信息参见本节最后一个提示

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

3.8　标记导航 - 图1

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

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

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

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

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

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

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

提示　要了解如何在nav中使用role="navigation"（参见图3.8.1），请参见3.14节。

深入了解nav

上文提到，要在页面中插入一组链接并不意味着一定要将它们包含在nav中。

下面的示例新闻页面包含四个链接列表，其中只有两个列表具有足够的重要性，可以包在nav中。（可以看到，一些代码片段被缩减了。）

...
<body>
   <header>
      <!-- 站点标识可以放在这里 -->
      <!-- 全站导航 -->
 
      <nav>
         <ul> ... </ul>
      </nav>
   </header>
 
   <div id="main">
      <h1>Arts & Entertainment</h1>
        <article>
            <h1>Gallery Opening Features the Inspired, Inspiring</h1>
            <p>... [故事内容] ... </p>
 
            <aside>
               <h1>Other Stories</h1>
 
               <!-- 不包在nav中-->
               <ul> ... [故事链接] ... </ul>
           </aside>
        </article>
    </div>
    <aside id="sidebar">
       <nav><!-- 次级导航 -->
          <ul>
             <li><a href="http://www.ituring.com.cn/arts/movies/">Movies</a></li>
             <li><a href="http://www.ituring.com.cn/arts/music/">Music</a></li>
             ...
          </ul>
       </nav>
   </aside>
 
   <footer>
      <!-- 辅助性链接并未包在nav中 -->
      <ul> ... </ul>
   </footer>
</body>
</html>

位于aside（参见3.11节）中的次级导航允许用户跳转到Arts & Entertainment目录中的其他页面，因此它构成了页面的一个主要导航区块。不过，Other Stories这个aside则不是。

那么，如何判断是否对一组链接使用nav呢？归根结底，这取决于内容的组织情况。至少，应该将网站全局导航（让用户可以跳至网站各个主要部分的导航）标记为nav。这种nav通常（但并不总是）出现在页面级的header元素里面（参见3.7节）。

3.8 标记导航

3.8 标记导航

3.8　标记导航

3.8　标记导航