HTML导航栏正确使用nav标签详解

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

这不仅是技术规范，更是对用户体验和网站可访问性的一种尊重。

nav 标签与无序列表 ul 的组合使用是最佳实践吗？

我个人觉得，这几乎是约定俗成的最佳实践了。为什么这么说呢？ nav 标签本身只提供了一个语义上的“导航区域”的定义，它并不关心内部的结构。而 ul（无序列表）天生就是用来表示一组相关联的项目的，这和导航链接的本质——一组相关联的页面入口——简直是天作之合。

当你在 nav 里面放一个 ul，再用 li 包裹每个 a 标签时，你实际上是在创建一个非常清晰、有层次感的结构。屏幕阅读器在遇到 ul 时，会告知用户“这是一个列表”，然后用户可以方便地通过快捷键在列表项之间跳转，这对于视障用户来说体验非常好。搜索引擎爬虫也能更好地理解这些链接之间的关系，从而优化网站的索引。

从CSS样式设计的角度看，这种结构也极其友好。你可以轻松地对 nav ul、nav ul li、nav ul li a 应用样式，无论是水平排列、垂直排列，还是添加下拉菜单，都变得非常直观和可控。可以说，nav + ul/li/a 的组合，不仅仅是符合标准，更是兼顾了可访问性、SEO和开发效率的多赢选择。

<nav aria-label="主导航">
  <ul>
    <li><a href="/">首页</a></li>
    <li><a href="/services">服务</a></li>
    <li><a href="/blog">博客</a></li>
  </ul>
</nav>

这里我还加了一个 aria-label，这在有多个 nav 标签时尤其有用，可以为辅助技术提供更具体的上下文信息。

一个页面中可以使用多个 nav 标签吗？

当然可以，而且在很多复杂的网站设计中，这是非常常见的。我见过不少网站，主导航在顶部，页脚有辅助导航（比如版权信息、隐私政策链接），侧边栏可能还有文章分类或者相关推荐的导航，这些都可以合理地使用 nav 标签。

关键在于，每个 nav 标签都应该代表一个“独立的、重要的导航区块”。比如说，顶部的 nav 是网站的核心入口，底部的 nav 可能是辅助性、全局性的信息链接，而侧边栏的 nav 则可能专注于当前内容的相关导航。它们各自承担着不同的导航职责，所以用 nav 来标记它们是完全符合语义的。

如果页面上有多个 nav 标签，为了提高可访问性，特别是对屏幕阅读器用户，强烈建议为每个 nav 添加一个 aria-label 属性。这个属性可以提供一个简短的描述，告诉用户当前这个 nav 是做什么用的，比如 aria-label="主导航"、aria-label="页脚导航"、aria-label="文章分类"。这样，用户就能更清楚地知道他们正在操作哪个导航区域。

<header>
  <nav aria-label="主要网站导航">
    <ul>
      <li><a href="/">主页</a></li>
      <li><a href="/products">产品</a></li>
    </ul>
  </nav>
</header>

<main>
  <!-- 页面主要内容 -->
</main>

<footer>
  <nav aria-label="辅助链接">
    <ul>
      <li><a href="/privacy">隐私政策</a></li>
      <li><a href="/terms">服务条款</a></li>
    </ul>
  </nav>
</footer>

这种做法，既保持了语义的准确性，又兼顾了用户体验，尤其是在大型或内容丰富的网站中，它的价值非常明显。

什么时候不应该使用 nav 标签？

这是一个很重要的反向思考。不是所有的链接集合都应该被 nav 包裹起来。如果过度使用 nav，反而会稀释它的语义价值，让辅助技术和搜索引擎难以区分哪些是真正的“主要导航”。

我的经验是，当链接集合不是网站的“主要导航块”时，就不要用 nav。举几个例子：

• 文章内的相关链接或分页链接： 比如文章末尾的“上一篇/下一篇”或者“相关阅读”，这些链接虽然引导用户，但它们是内容的一部分，而不是网站整体的导航系统。用普通的 div 或 ul 就足够了。
• 登录/注册链接： 很多网站的头部会有“登录”、“注册”或者“购物车”图标，这些通常是零散的功能性链接，而不是一个完整的导航区块。它们更适合放在一个普通的 div 或者 ul 中，甚至直接放在 header 标签内。
• 社交媒体图标链接： 页面底部或侧边栏的Facebook、Twitter图标链接，它们是外部链接，也不是网站内部导航的一部分，用 ul 包装即可。
• 面包屑导航： 面包屑导航虽然是导航的一种形式，但它通常被认为是内容流的一部分，表示当前页面在网站层级结构中的位置，而不是一个独立的导航区块。通常用 ol 和 li 来表示。

说白了，nav 标签是为那些“宏观”的、对用户浏览整个网站至关重要的导航结构而设计的。如果你的链接集合只是局部性的、功能性的，或者只是内容流的一部分，那么使用 div、ul 或其他更合适的语义标签会是更好的选择。过度语义化，有时反而会造成语义的混乱。这就像你不会给家里的每一个开关都贴上“重要控制中心”的标签一样，只有主电闸才配得上。

到这里，我们也就讲完了《HTML导航栏正确使用nav标签详解》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！