<nav>标签仅语义化标识导航区块，不自带位置属性，必须包裹真实可跳转链接并配aria-label区分用途，错误用法包括空内容、纯文本分隔符、混入非导航元素及缺失ARIA标识。
<nav> 标签本身不划分“头部”或“底部”，它只语义化地标识一个**导航区块**；是否出现在页头或页脚，完全取决于你把它放在 <header> 还是 <footer> 里——浏览器和屏幕阅读器只认嵌套关系，不认标签名自带位置。
nav 必须包裹可跳转的链接，不能空着或只放文字
很多初学者写成这样：
<nav>首页 | 关于 | 联系我们</nav>
这是无效用法。<nav> 的核心语义是“一组导航链接”，必须包含 <a>、<button> 或带 role="link" 的元素。正确写法：
<nav> <a href="/">首页</a> <a href="/about">关于</a> <a href="/contact">联系我们</a> </nav>
- 若用 JS 控制的菜单（如汉堡菜单），需确保展开后仍能键盘聚焦、有 ARIA 属性（如
aria-expanded） - 纯文本分隔符（如
|）应通过 CSS 实现，不要写在 HTML 里 - 同一页面最多 2–3 个
<nav>；过多会稀释语义，屏幕阅读器可能忽略次要导航
头部导航和底部导航要分别用独立的 nav 标签
不能共用一个 <nav>，也不能靠 class 名模拟区分。结构上必须物理分离：
立即学习“前端免费学习笔记（深入）”；
<header>
<nav aria-label="主菜单">
<a href="/">首页</a>
<a href="/products">产品</a>
</nav>
</header>
<footer>
<nav aria-label="页脚导航">
<a href="/privacy">隐私政策</a>
<a href="/terms">服务条款</a>
</nav>
</footer>
-
aria-label是必须加的——因为多个<nav>存在时，屏幕阅读器靠它区分用途 - 不要用
id="top-nav"或class="footer-nav"替代aria-label；这些对辅助技术无效 - 页脚导航通常信息密度低、链接少，避免堆砌无关外链（如全部社交媒体图标）
nav 不影响布局，CSS 才决定它在头部还是底部显示
<nav> 是流式块级元素，默认独占一行，但它的视觉位置完全由父容器和 CSS 决定。常见误区：
- 以为把
<nav>放在<body>开头就一定是“顶部导航”——其实如果父容器设了display: flex; flex-direction: column-reverse，它反而会跑到最底下 - 用
position: absolute把<nav>拉到顶部，却忘了给父容器设position: relative，导致定位错乱 - 响应式中忘记重置
nav ul的默认 margin/padding，造成移动端导航栏高度异常
最稳妥的做法：始终让 <nav> 嵌套在语义正确的上下文中（<header> 或 <footer>），再用 CSS 控制内部排列（如 display: flex），而不是靠定位强行挪动。
真正容易被忽略的是 aria-label 的必要性——没有它，两个 <nav> 在 VoiceOver 或 NVDA 下听起来一模一样，用户根本分不清哪个是顶部主导航、哪个是页脚辅助链接。
