HTML 的 <nav> 元素

1. 什么是 <nav> 元素

<nav> 是 HTML5 新增的语义化标签，用于定义页面中的导航链接区域。它告诉浏览器和开发者："这里的内容是页面或应用的主要导航入口"。

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

使用 <nav> 的核心价值在于语义化：它不只是普通的 <div> 容器，而是明确标识了导航区块，让搜索引擎、屏幕阅读器等辅助技术能够准确识别页面结构。

2. 为什么使用 <nav>

2.1 提升可访问性

屏幕阅读器用户可以通过快捷键直接跳转到导航区域，无需逐行浏览整个页面。这对键盘导航和辅助技术用户至关重要。

2.2 改善 SEO

搜索引擎能更准确地理解页面结构，识别哪些链接是站内导航、哪些是正文内容，有助于提升关键词相关性和抓取效率。

2.3 代码可读性

开发者看到 <nav> 就能立刻明白该区块的用途，相比满屏的 <div> 更易于维护。

3. 何时使用 <nav>

适合使用 `<nav>` 的场景

网站主导航菜单
面包屑导航
文章目录（页内锚点导航）
分页导航
侧边栏导航

不适合使用 `<nav>` 的场景

普通链接列表（如页脚版权区的友情链接）
文章正文中的超链接
社交分享按钮组

注意：<nav> 并非"所有链接的容器"。只有主要导航区块才适合使用，页脚中的次要链接通常不需要包裹 <nav>。

4. <nav> 与 <div> 的区别

特性	`<nav>`	`<div>`
语义含义	明确表示导航区域	无任何语义
可访问性	辅助技术可识别并快捷跳转	无特殊处理
SEO 价值	帮助搜索引擎理解结构	无贡献
默认样式	无（与 div 相同）	无

<!-- 不推荐：用 div 包裹导航 -->
<div class="nav">
  <a href="/">首页</a>
</div>

<!-- 推荐：使用语义化 nav -->
<nav class="nav">
  <a href="/">首页</a>
</nav>

两者在视觉上没有任何区别，但 <nav> 在语义和可访问性上具有明显优势。

5. 实际应用示例

5.1 网站主导航

<nav aria-label="主导航">
  <ul>
    <li><a href="/">首页</a></li>
    <li><a href="/products">产品</a></li>
    <li><a href="/pricing">定价</a></li>
    <li><a href="/blog">博客</a></li>
  </ul>
</nav>

5.2 面包屑导航

<nav aria-label="面包屑">
  <ol>
    <li><a href="/">首页</a></li>
    <li><a href="/docs">文档</a></li>
    <li>当前页面</li>
  </ol>
</nav>

5.3 文章目录

<nav aria-label="文章目录">
  <ul>
    <li><a href="#section-1">第一节</a></li>
    <li><a href="#section-2">第二节</a></li>
    <li><a href="#section-3">第三节</a></li>
  </ul>
</nav>

6. 最佳实践与注意事项

6.1 使用 aria-label 区分多个导航

当页面存在多个 <nav> 时，使用 aria-label 加以区分：

<nav aria-label="主导航">...</nav>
<nav aria-label="页脚导航">...</nav>

6.2 使用列表结构

导航链接建议使用 <ul> 或 <ol> 包裹，保持结构清晰：

<nav>
  <ul>
    <li><a href="/">首页</a></li>
  </ul>
</nav>

6.3 避免过度使用

不要为每个链接组都套上 <nav>。只有主要导航区块才需要，否则会稀释语义价值。

6.4 配合 CSS 实现响应式导航

nav ul {
  display: flex;
  list-style: none;
  gap: 20px;
}

@media (max-width: 768px) {
  nav ul {
    flex-direction: column;
  }
}

7. 浏览器兼容性

<nav> 元素自 HTML5 起被所有现代浏览器支持，包括：

Chrome、Firefox、Safari、Edge
IE 9+（部分支持）
移动端所有主流浏览器

无需任何 polyfill 即可放心使用。

8. 总结

<nav> 是 HTML5 语义化体系中的重要成员，它让导航区域在结构、可访问性和 SEO 三个维度上都得到提升。核心要点：

用于主要导航区块，不要滥用
配合 aria-label 区分多个导航
使用列表结构组织链接
与 <div> 视觉无差异，但语义价值显著

掌握 <nav> 的正确用法，是写出高质量、可维护、无障碍友好的 HTML 的重要一步。