nav标签仅用于站点级或应用级主要导航区块，如页眉顶部菜单、侧边栏目录、页脚核心链接、面包屑导航（需加aria-label="面包屑导航"）及响应式汉堡菜单内容；内部须用ul/li结构并配aria-label明确标识，禁用空内容、非导航元素及伪链接。
nav标签该用在哪些地方
只有当一组链接是站点级或应用级的主要导航区块时，才应该用nav。它不是所有链接容器的“语义万金油”——比如文章末尾的“相关阅读”、评论区的“回复”按钮、搜索结果页的筛选标签，都不适合套nav。
典型适用场景包括：
- 页眉顶部横向菜单（如
首页、产品、关于） - 侧边栏一级目录（如文档站左侧大纲）
- 页脚中的核心栏目链接（如
隐私政策、服务条款），前提是这些是站点级入口 - 面包屑导航（需加
aria-label="面包屑导航"） - 响应式汉堡菜单展开后的内容区域（只要仍是主导航）
nav内部结构怎么写才合规
nav本身不规定内部结构，但可访问性和键盘导航强依赖合理嵌套。直接写一堆a标签看似省事，实则丢掉语义层级、Tab顺序控制和屏幕阅读器识别能力。
必须遵守的要点：
- 推荐且最稳妥的结构是
nav→ul→li→a，ul自带隐式role="list"，读屏软件会报“列表，3项” - 多级下拉时，在对应
li内再嵌套ul，结构自然嵌套 - 禁止在
nav里直接放p、h2或大段说明文字；logo、搜索框、登录按钮不属于导航行为，应移出 - 空
nav或只含|分隔符的写法无效，nav必须包裹真实可跳转链接
aria-label为什么不能省
没有aria-label的nav，等于告诉屏幕阅读器：“这里有个导航，但我不知道它叫啥”。尤其当页面有多个nav（比如顶部+页脚），不加标识就会混淆。
正确做法：
- 用
aria-label="主导航"或aria-label="页脚导航"明确用途 - 已有可见标题（如
<h2 id="nav-title">网站导航</h2>），可用aria-labelledby="nav-title" - 禁用
title属性替代——它不被所有读屏器支持，且仅悬停触发 - 不要混用
aria-label和aria-labelledby，后者优先级更高，前者会被忽略
nav和CSS布局常见冲突点
nav默认是块级元素，行为和div一致，它的视觉位置完全由父容器和CSS决定，不是靠标签名自动定位到顶部或底部。
容易踩的坑：
- 写
<nav><ul style="display: flex">...</ul></nav>却不设flex: 1或width，导致移动端链接热区塌陷、点击不准 - 全局CSS写了
div { display: flex }，而nav不受影响，造成视觉错位 - 用
position: absolute把nav拉到顶部，却忘了给父容器设position: relative，定位错乱 - 响应式中忘记重置
ul默认的margin/padding，造成导航栏高度异常
真正关键的不是nav本身，而是它是否嵌套在header或footer这类语义上下文中，以及内部列表项是否保有可聚焦性与语义完整性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
