仅用于站点级主导航，如顶部菜单、侧边全局栏、页脚快速入口；禁用在文章锚点、单个链接、分页按钮等非主要导航场景，且须配aria-label区分多导航区，内部推荐嵌套提升可访问性。
直接用 <nav></nav> 包裹链接即可，但必须确保它只用于站点级主导航，不是所有链接集合都适合放进去。
哪些链接该放进 <nav></nav>？
语义上，<nav></nav> 专指网站主要导航区域，比如顶部菜单、侧边全局导航栏、页脚的快速跳转链接组。它不适用于文章内锚点、分页按钮、面包屑（<nav></nav> 可以包含面包屑，但需谨慎）、或单个操作链接。
- ✅ 适合：
<nav><a href="/home">首页</a><a href="/about">关于</a></nav> - ❌ 不适合：
<nav><a href="#section2">跳到第二节</a></nav>（这是页面内跳转，用普通<p></p>或<div> 更合适） <li>⚠️ 边界情况：分页控件（如“上一页/下一页”）通常不用 <code><nav></nav>，除非是整站内容流的核心导航（如博客归档页的年份/分类切换）
<nav></nav> 和 <ul></ul> 搭配的常见写法
虽然 <nav></nav> 本身不要求必须嵌套列表，但用 <ul></ul> + <li> 是最清晰、可访问性最好的实践——屏幕阅读器能正确识别为导航项集合。
<nav><ul>
<li><a href="/products">产品</a></li>
<li><a href="/pricing">定价</a></li>
<li><a href="/contact">联系</a></li>
</ul></nav>
- 避免写成：
<nav><a>…</a><a>…</a></nav>（缺乏结构，辅助技术难以解析层级） - 如果导航是纯图标无文字，务必加
aria-label或<span class="visually-hidden">…</span> - 多个导航区？可以加
aria-label区分，例如<nav aria-label="主导航"></nav>和<nav aria-label="页脚导航"></nav>
不加 <nav></nav> 会怎样？加了又没用好呢？
不加 <nav></nav> 不影响功能，但会丢失语义信息：搜索引擎和读屏软件无法区分这是关键导航还是普通链接堆砌。而滥用 <nav></nav>（比如每个卡片底部都套一个）反而稀释语义，让真正重要的导航被忽略。
- 性能无影响，纯语义标签
- 兼容性极好，IE9+ 全支持
- 最大风险是“过度使用”——看到导航就套
<nav></nav>，结果页面里出现 5 个<nav></nav>，其中 4 个只是次要操作区 - 检查方法：用浏览器开发者工具的“无障碍树”面板，看
<nav></nav>是否被正确识别为 navigation role
真正难的是判断“这算不算主要导航”——得站在用户第一次打开网站时的认知路径上想：他靠哪几条路能最快到达核心内容？那些就是 <nav></nav> 的边界。
