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