nav标签是声明关键导航区域的语义信标，须专用于核心链接组并配aria-label或aria-labelledby，内部推荐ul+li结构，支持多实例但需各司其职。
nav 标签不是“套个壳就完事”的装饰性容器，而是向浏览器、屏幕阅读器和搜索引擎明确声明“此处为关键导航区域”的语义信标。用对了，能直接提升可访问性与结构可信度；用错了，反而稀释语义、干扰辅助技术。
只包裹真正主导航，不塞杂项
nav 应专用于逻辑清晰、服务于全站浏览路径的核心链接组，例如首页、产品、关于我们、联系等。它不是收纳筐：
- 搜索框、登录按钮、语言切换器、广告位——这些属于交互操作或辅助功能，应放在 header 内独立区域，或用
role="search"等更精准的语义标记 - 页脚的友情链接、社交媒体图标、版权信息——若非构成站点级快速入口（如“隐私政策”“服务条款”），通常不归入 nav
- 文章内的“上一篇/下一篇”或评论区跳转链接——它们服务单篇内容，更适合用
section或普通链接，而非主导航语义
必须配 aria-label 或 aria-labelledby
没有名称的 nav 对屏幕阅读器用户等于“一个叫‘导航’的黑盒子”，无法判断用途。这是硬性可访问性要求：
- 首选
aria-label="主导航"：简洁直接，适用于无可见标题的菜单（如纯图标汉堡菜单） - 已有可见标题时，用
aria-labelledby="id"关联更优：例如<h2 id="main-nav-title">网站导航</h2> <nav aria-labelledby="main-nav-title"></nav> - 避免
aria-label=""或仅靠 CSS 隐藏文本作标识——部分读屏器会跳过整个区域 - title 属性不能替代 ARIA 命名，它不被键盘或语音用户可靠识别
内部结构推荐 ul + li，别用 div 堆砌
nav 本身不限制内部写法，但语义与无障碍体验高度依赖结构表达：
- 用
<ul> <li><a>首页</a></li> <li><a>产品</a></li> </ul>是最佳实践：屏幕阅读器自动播报“列表，共2项”，用户可快速感知数量与范围 - 避免
<nav><div class="item">首页</div> <div class="item">产品</div></nav>：无结构提示，读屏器仅逐字朗读，失去导航集合感 - 多级下拉菜单可在父
li内嵌套子ul，语义依然成立，但需配合aria-haspopup和焦点管理 - 单个链接（如孤立的“返回顶部”）不构成导航集合，不应单独套 nav
一个页面可以有多个 nav，但要各司其职
nav 支持多实例，关键在于每个都具备明确、独立的导航目的：
-
<nav aria-label="主导航">…</nav>：位于 header，服务全站跳转 -
<nav aria-label="文章目录">…</nav>：放在 article 内部，提供当前长文的章节锚点 -
<nav aria-label="页脚快捷入口">…</nav>：在 footer 中，区别于版权信息等非导航内容 - 避免堆砌空 nav 或重复导航（如同一组链接在 header 和 footer 各套一次），会降低语义权重
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
