29. 导航标签 nav

<nav> 是 HTML5 引入的语义标签，用来标记页面中的”主要导航区域”。它不改变外观，但告诉浏览器和搜索引擎：“这里是导航”。

基本用法

把导航链接包在 <nav> 里：

<nav>
  <ul>
    <li><a href="index.html">首页</a></li>
    <li><a href="products.html">产品</a></li>
    <li><a href="about.html">关于</a></li>
    <li><a href="contact.html">联系</a></li>
  </ul>
</nav>

视觉效果跟用 <div> 包着一模一样。区别在语义层面——屏幕阅读器遇到 <nav> 会说”这里是导航区域”，用户可以一键跳过去或跳过。

什么时候该用 nav

<nav> 不是给所有链接用的。只用于主要的导航区块：

• 顶部主导航菜单
• 侧边栏导航
• 面包屑导航
• 分页导航（上一页/下一页）

这些是用户在不同页面间跳转的核心通道。

什么时候不该用 nav

页面底部的友情链接、文章里的内嵌链接、社交图标列表——这些不是”主要导航”，不需要包 <nav>。

<!-- 不需要 nav：页脚链接 -->
<footer>
  <a href="privacy.html">隐私政策</a>
  <a href="terms.html">使用条款</a>
</footer>

一个页面可以有多个 nav

大型页面可能有多处导航。比如一个文档站：

<!-- 主导航 -->
<nav aria-label="主导航">
  <ul>
    <li><a href="intro.html">入门指南</a></li>
    <li><a href="advanced.html">高级教程</a></li>
  </ul>
</nav>

<!-- 文章内的章节导航 -->
<nav aria-label="本章目录">
  <ol>
    <li><a href="#section1">安装</a></li>
    <li><a href="#section2">配置</a></li>
    <li><a href="#section3">运行</a></li>
  </ol>
</nav>

每个 <nav> 用 aria-label 区分它们的角色，避免屏幕阅读器混淆。

面包屑导航

面包屑是显示用户当前位置的层级路径，很适合用 <nav>。

<nav aria-label="面包屑">
  <ol>
    <li><a href="index.html">首页</a></li>
    <li><a href="products.html">产品</a></li>
    <li>笔记本电脑</li>
  </ol>
</nav>

当前页不包 <a> 标签——因为它就是你现在的位置，不需要再点。

nav 与屏幕阅读器

屏幕阅读器（如 NVDA、VoiceOver）会把 <nav> 识别为 landmark（地标）。用户可以通过快捷键在页面中快速跳转到下一个或上一个 landmark。

想象一下，你的页面有多个 <nav>，屏幕阅读器用户听到：

他们可以选择跳过，直接进入主内容区。这对只用键盘操作的用户来说，节省了大量 Tab 键次数。

完整示例

一个典型页面的导航结构：

<header>
  <nav aria-label="主导航">
    <ul>
      <li><a href="index.html">首页</a></li>
      <li><a href="products.html">产品</a></li>
      <li><a href="blog.html">博客</a></li>
      <li><a href="about.html">关于</a></li>
    </ul>
  </nav>
</header>

<main>
  <article>
    <nav aria-label="文档目录">
      <h2>目录</h2>
      <ol>
        <li><a href="#intro">简介</a></li>
        <li><a href="#install">安装</a></li>
        <li><a href="#usage">使用</a></li>
      </ol>
    </nav>

    <h2 id="intro">简介</h2>
    <p>内容...</p>
  </article>
</main>

小结

场景	用 nav？
顶部主菜单	是
侧边栏导航	是
面包屑	是
分页链接	是
页脚链接	否
文章内链接	否
社交图标列表	否

<nav> 是一个”看不见的帮手”——对普通用户没视觉影响，但对辅助技术和搜索引擎意义重大。养成用它的习惯，是走向语义化 HTML 的重要一步。

模块三到此结束。下节做个回顾测验，巩固链接与导航的知识点。