标签用于标识页面中全局性、重复性、主导航用途的链接集合，如顶部菜单、侧边主菜单、页脚跳转栏；不应用于“上一篇/下一篇”或“热门标签”等非导航内容，且需配合语义化内部结构与aria属性提升可访问性。
HTML 的 <nav></nav> 标签不是“必须加”的装饰，而是给浏览器、屏幕阅读器和搜索引擎明确传递“这是主要导航区块”的语义信号。用错或滥用反而会干扰辅助技术。
什么时候该用 <nav></nav>？
它只适用于页面中全局性、重复性、主导航用途的链接集合，比如顶部菜单、侧边主菜单、页脚快速跳转栏。
- ✅ 正确：网站 logo 旁的「首页｜产品｜文档｜博客｜联系我们」
- ❌ 错误：文章内「上一篇｜下一篇」（应使用
<section></section>或普通<div>） <li>❌ 错误：搜索框旁的「热门标签」列表（属于内容补充，非导航）</li> <li>⚠️ 注意：一个页面可以有多个 <code><nav></nav>，但每个都得是独立的导航目的（如顶部主菜单 + 页脚分类导航） - ✅ 合理：
<nav><ul><li><a href="/">首页</a></li></ul></nav>（简单导航可省略列表） - ❌ 避免：
<nav><a href="/">首页</a> <a href="/about">关于</a></nav>（按钮不是导航目标，应放在外层容器） - ⚠️ 注意：
<nav><button>展开菜单</button></nav>不自动提供键盘焦点管理或 ARIA 属性，需要手动加<nav></nav>（仅旧 IE/部分读屏需）或role="navigation"（如aria-label）来增强可访问性 - ? 浏览器开发者工具中，
<nav></nav>会被归类为「Landmark」，方便快捷键跳转（如 NVDA+Insert+N） - ⚡ 某些 SSR 框架（如 Next.js）在生成静态 HTML 时，若漏掉
<nav></nav>，会导致无障碍审计工具（如 axe）报<nav></nav>类似警告 - ? 不要为了“语义正确”而嵌套过度：比如
landmark-no-duplicate-main是典型冗余，一个主导航一层<header><nav><nav>…</nav></nav></header>就够
<nav></nav> 里该放什么元素？
它本身不规定内部结构，但语义上应以链接为核心；常见组合是 <ul></ul>+<li>+<a></a>
不用 aria-label="主菜单" 会怎样？
页面照样显示，但会丢失一层关键语义——对依赖辅助技术的用户来说，可能无法快速定位导航区域；对 SEO 而言，虽无直接惩罚，但结构化数据识别率下降，影响富摘要生成。
真正难的不是加不加 <nav></nav>，而是判断哪些链接集合构成了用户认知中的「导航」——这得看真实交互路径，而不是看代码是否整齐。
立即学习“前端免费学习笔记（深入）”；
