<nav>标签专指页面中承担主要跳转路径功能的链接集合，语义本质是声明“站点内移动的核心路径”，而非实现导航功能；它向辅助技术与搜索引擎传递明确意图，错误使用会损害可访问性与SEO。
nav 标签不是“所有导航相关元素的容器”，而是专指页面中承担主要跳转路径功能的链接集合；用错地方反而会让屏幕阅读器跳过真正重要的导航，或让搜索引擎误判结构。
nav 的语义本质是「导航意图声明」，不是「导航功能实现」
它不控制跳转、不触发路由、不自动高亮当前页，只向浏览器、爬虫和辅助技术传递一个明确信号：“这一块是用户在站点内移动的核心路径”。
常见误解包括：
- 把
<button onclick="goTo('about')">塞进<nav>—— 屏幕阅读器无法识别为可跳转目标，语义失效 - 用
<nav><a href="#">产品</a></nav>（空 href）—— 辅助技术直接忽略该区域 - SPA 中初始渲染时
<nav>内为空，等异步数据回来才填充 —— DOM 就绪时无有效链接，被跳过
哪些场景必须用 nav，哪些绝对不能用
必须用 <nav> 的典型场景：
立即学习“前端免费学习笔记（深入）”；
- 页眉中的顶部主导航（如
<a href="/">首页</a><a href="/products">产品</a>） - 文档类页面的侧边锚点目录（含
href="#installation"等真实跳转） - 页脚的全局快捷入口（如
<a href="/privacy">隐私政策</a>） - 多语言切换链接（
href="en/"、href="zh/"），前提是真实跳转而非 JS 切换
绝对不该用 <nav> 的情况：
- 文章末尾的「上一篇/下一篇」——属于内容流操作，非站点级导航
- 搜索框、登录按钮、主题切换开关——它们是交互控件，不是跳转路径
- 面包屑（
<ol class="breadcrumb">更合适；若硬要用<nav>，必须加aria-label="当前位置"） - 单个链接（如
<nav><a href="/">首页</a></nav>）—— 不构成“集合”，会被辅助技术忽略
多个 nav 共存时，不加 aria-label 就等于没区分
一个页面可以有多个 <nav>，但若都裸写，屏幕阅读器只会重复读出“导航”，用户完全分不清哪个是主菜单、哪个是页脚链接。
正确做法是明确标注用途：
- 主导航：
<nav aria-label="主导航"> - 页脚导航：
<nav aria-label="页脚导航"> - 文档内章节跳转：
<nav aria-label="本文目录">
注意：<nav> 禁止嵌套，也禁止包裹 <p>、<h2> 或 logo 图片——这些应留在 <header> 或独立区域。
内部结构细节决定可访问性是否真正生效
即使用了 <nav>，如果内部结构松散，键盘导航和读屏体验仍会打折扣。
推荐结构组合：
- 用
<ul>包裹导航项，比平铺<a>更利于 Tab 键顺序遍历 - 每个
<li>加role="listitem"（尤其当 CSS 清除了默认列表样式） - 当前页面对应的导航项加
aria-current="page"，例如：<a href="/products" aria-current="page">产品</a> - 避免在
<nav>里放display: none的链接——隐藏内容仍可能被解析，造成逻辑混乱
最常被忽略的一点：语义标签的价值不在“写了就完事”，而在“写得精准”。一个没加 aria-label 的 <nav>，对真实用户来说，可能比不用还糟。
