导航标签 - <nav>

什么是 <nav> 标签？

<nav> 是HTML5引入的语义化标签，用于定义页面中主要的导航链接区域。它旨在包含网站或页面的主导航菜单，帮助用户在网站各部分之间跳转。

基本语法

html 
<nav>
  <!-- 导航链接 -->
</nav>

典型用法

主导航菜单

html 
<nav>
  <ul>
    <li><a href="/">首页</a></li>
    <li><a href="/about">关于我们</a></li>
    <li><a href="/services">服务</a></li>
    <li><a href="/contact">联系方式</a></li>
  </ul>
</nav>

分页导航

html 
<nav>
  <a href="#prev">上一页</a>
  <a href="#1">1</a>
  <a href="#2">2</a>
  <a href="#3">3</a>
  <a href="#next">下一页</a>
</nav>

侧边栏导航

html 
<aside>
  <nav>
    <h3>相关文章</h3>
    <ul>
      <li><a href="#">文章1</a></li>
      <li><a href="#">文章2</a></li>
      <li><a href="#">文章3</a></li>
    </ul>
  </nav>
</aside>

全局属性

<nav> 标签支持所有HTML全局属性：

属性 描述
class 为元素指定一个或多个类名
id 为元素指定唯一ID
style 为元素指定内联样式
title 提供有关元素的额外信息

最佳实践

  1. 只用于主要导航：不要将所有链接都放在 <nav> 中，只包含主导航结构

  2. 可嵌套使用：可以在页面中使用多个 <nav> 元素，如主导航和页脚导航

  3. 结合语义标签：通常与 <ul>、<ol> 和 <a> 标签配合使用，创建结构化导航

  4. 保持简洁：导航菜单应保持简洁明了，避免过多层级

浏览器兼容性

  • Chrome 5+
  • Firefox 4+
  • Safari 5+
  • Opera 11.1+
  • IE 9+

总结

<nav> 标签提供了明确的语义信息，表明其内容是导航链接集合。使用 <nav> 标签可以：

  • 提高页面的可访问性，帮助屏幕阅读器用户识别导航区域
  • 改善搜索引擎优化，让搜索引擎更好地理解页面结构
  • 使代码更具可读性和可维护性
  • 支持未来的浏览器功能和标准
最后更新：2026-02-07