<nav>标签需包含真实跳转链接且数量合理，动态渲染须确保DOM加载后存在可访问<a>节点，多导航区须用aria-label区分，否则语义失效。
直接用 <nav> 替换旧式 <div class="navbar"> 就行，但关键不在标签本身，而在是否真被浏览器和辅助技术识别为导航区域。
nav 标签不是“套个壳就语义化”
仅写 <nav></nav> 不代表语义生效。它需要满足两个隐性条件：
- 内部必须包含真正用于页面跳转的链接（
<a href>），纯按钮或 JS 触发的伪跳转不算 - 一个页面通常只应有 1–2 个
<nav>，比如主站导航 + 页脚快捷链接；面包屑、分页器、侧边工具栏不推荐硬塞进<nav> - 若导航是动态渲染（如 React/Vue 组件），需确保 DOM 加载后
<nav>内已有可访问的<a>节点，否则屏幕阅读器可能跳过
常见错误：把 nav 当 div 用
下面这些写法会削弱语义，甚至触发可访问性警告：
<nav> <button onclick="toggleMenu()">菜单</button> <div class="dropdown">...</div> </nav>
正确做法是保留原生跳转能力：
立即学习“前端免费学习笔记（深入）”；
<nav> <a href="/home">首页</a> <a href="/about">关于</a> <a href="/contact">联系</a> </nav>
下拉菜单需用 <details><summary> 或 ARIA 属性增强，不能靠纯 CSS 显示隐藏来“假装”有链接。
多导航场景怎么处理
当页面存在多个逻辑独立的导航区（如顶部主导航 + 文章内目录），应分别包裹并添加 aria-label：
<nav aria-label="主导航"> <a href="/">首页</a> <a href="/blog">博客</a> </nav> <nav aria-label="文章目录"> <a href="#section1">第一节</a> <a href="#section2">第二节</a> </nav>
没有 aria-label 或 aria-labelledby 的多个 <nav> 会让屏幕阅读器用户无法区分用途。
真正难的不是写 <nav>，而是让每个链接都指向真实 URL、保持可聚焦、不依赖 JS 激活——语义化从不是标签游戏，而是行为契约。
