标签具有明确语义,用于标识全局性、重复性、主要跳转路径的导航区域;正确使用可提升可访问性与SEO,错误使用(如包裹上下篇链接)会破坏语义;推荐嵌套实现多级菜单,多个需用aria-label区分。

nav 标签不是“可有可无”的装饰
它明确告诉浏览器、屏幕阅读器和搜索引擎:这一块是页面的**主导航区域**。不加 ,HTML 仍能渲染,但语义丢失——辅助技术可能跳过它,SEO 工具难以识别导航意图,团队协作时也难快速定位导航逻辑。
哪些地方该用 nav,哪些不该用
关键看是否承载「全局性、重复性、主要跳转路径」的链接。常见正确场景:
- 顶部主菜单(含首页、产品、关于、联系等)
- 侧边栏站点目录(如文档站的左侧大纲)
- 页脚的一级导航区块(非版权信息或社交图标组)
以下情况不应包裹 :
- 文章内部的「上一篇 / 下一篇」链接(应使用
或) - 搜索框旁的「热门标签」列表(属于内容补充,非导航主干)
- 登录/注册按钮组(功能操作,非页面间跳转)
一个 nav 里能嵌多个 ul 吗?怎么写才规范
可以,而且推荐。语义上,导航项天然构成列表, 立即学习“前端免费学习笔记(深入)”; 现代浏览器对 容易忽略的一点:如果导航区域只有一处且无其他 比
应只表达一类导航意图(比如不要把主导航 + Breadcrumb 混在一个 里),而非额外 (避免语义嵌套过深)aria-label 和 role="navigation" 还需要加吗
的原生语义支持已很完善,role="navigation" 是冗余的,**不要加**;而 aria-label 属于增强项——当页面存在多个 (如顶部+侧边+页脚),必须用 aria-label 区分它们,否则屏幕阅读器无法判断「哪个是主导航」。,aria-label 可省略;但一旦加了,就必须确保值有意义(比如 aria-label="主导航" 比 aria-label="菜单" 更明确)。











