标签用于标识页面中全局性、重复性、主导航用途的链接集合，如顶部菜单、侧边主菜单、页脚跳转栏；不应用于“上一篇/下一篇”或“热门标签”等非导航内容，且需配合语义化内部结构与ARIA属性提升可访问性。

HTML 的

标签不是“必须加”的装饰，而是给浏览器、屏幕阅读器和搜索引擎明确传递“这是主要导航区块”的语义信号。用错或滥用反而会干扰辅助技术。

什么时候该用

？

它只适用于页面中全局性、重复性、主导航用途的链接集合，比如顶部菜单、侧边主菜单、页脚快速跳转栏。

• ✅ 正确：网站 logo 旁的「首页｜产品｜文档｜博客｜联系我们」
• ❌ 错误：文章内「上一篇｜下一篇」（应使用
  或普通
  ）
• ❌ 错误：搜索框旁的「热门标签」列表（属于内容补充，非导航）
• ⚠️ 注意：一个页面可以有多个
  ，但每个都得是独立的导航目的（如顶部主菜单 + 页脚分类导航）

里该放什么元素？

它本身不规定内部结构，但语义上应以链接为核心；常见组合是

+
• +@#@#@#@#@#@#@#@#@#@0

• ✅ 合理：
  @#@#@#@#@#@#@#@#@#@1 @#@#@#@#@#@#@#@#@#@2
  （简单导航可省略列表）
• ❌ 避免：
  展开菜单
  （按钮不是导航目标，应放在外层容器）
• ⚠️ 注意：
  不自动提供键盘焦点管理或 ARIA 属性，需要手动加 role="navigation"（仅旧 IE/部分读屏需）或 aria-label（如 aria-label="主菜单"）来增强可访问性

不用

会怎样？

页面照样显示，但会丢失一层关键语义——对依赖辅助技术的用户来说，可能无法快速定位导航区域；对 SEO 而言，虽无直接惩罚，但结构化数据识别率下降，影响富摘要生成。


财经HTML高端海报生成
复杂得财经如何变成清晰，适合手机看的海报？如何加上你的IP
下载
• ? 浏览器开发者工具中，
  会被归类为「Landmark」，方便快捷键跳转（如 NVDA+Insert+N）
• ⚡ 某些 SSR 框架（如 Next.js）在生成静态 HTML 时，若漏掉
  ，会导致无障碍审计工具（如 axe）报 landmark-no-duplicate-main 类似警告
• ? 不要为了“语义正确”而嵌套过度：比如
  …
  是典型冗余，一个主导航一层
  就够

真正难的不是加不加

，而是判断哪些链接集合构成了用户认知中的「导航」——这得看真实交互路径，而不是看代码是否整齐。