先做个快速测试：打开你最近写的一个页面，然后按 Ctrl+F 搜索

。如果找到2个以上的结果，这篇文章值得你认真读完。

本期讨论的话题，是HTML标签中一个看着简单、实则极易踩坑的硬核知识点：main标签的唯一性。很多人知道它的存在，但真到实际项目里，尤其是用上了React、Vue这些框架之后，一不留神就翻车。

为什么main标签在页面中必须且只能出现一次

一个核心的认知需要先建立起来：

从来就不是一个布局容器。它的身份是语义锚点。

什么意思呢？

屏幕阅读器（比如NVDA、VoiceOver）的用户，会通过按"M"键快速跳转到页面的主要区域，这是他们浏览网页最核心的快捷键之一。搜索引擎爬虫在提取页面主题时，也会优先把这个标签里的内容作为核心分析对象。如果页面上出现了两个

，那么辅助技术的行为就变得完全不可预测了——可能跳过所有，可能随机选中一个，更糟的是反复向用户播报“主内容开始”。

从检测工具的角度来看，Lighthouse 会直接报 duplicate-main 错误，axe 工具会标红提示。WCAG 2.1 说得更直接，明确写入了规范：每页必须且只能有1个main地标（landmark）。浏览器DevTools虽然不一定给出明确的警告，但这并不代表错误没有发生。

强调一点：这不仅仅是“最佳实践”，而是规范级别的硬性要求。

哪些写法会导致main重复或嵌套错误

掌握了规则，再看看实际开发中容易在哪几个地方“翻车”。主要集中在SPA应用和服务端模板场景中：

• React / Vue 的路由组件里各自加了一个：每个路由组件都写上
  {children}
  ，到页面水合（hydration）后，DOM里留下了多个实例。这是目前最常见的问题。
• 布局文件与页面文件双层包裹：以 Next.js 为例，在 app/layout.tsx 里提前塞了一个
  ，等到了具体页面的 app/page.tsx，又包了一层。双倍地雷。
• 模板引擎不做路由判断：使用 EJS 或 Twig 这类模板时，列表页和详情页共用同一套包裹逻辑，导致出现嵌套或并列的情况。
• SPA 路由切换未卸载旧节点：旧页面的
  没有销毁，新内容又在另一个挂载点生成，残留节点被忽略了。
• 嵌套在错误的父级下：错误写法例如
  或 。规范已经明确禁止
  作为
  、、 的后代。

这些都是非常具体且高频的场景，希望各位开发者没有全中。

如何验证页面是否只有一个main标签

最简单的办法，不是去看浏览器报不报错。它很大概率不报错，直到你上线后被无障碍审计工具抓个正着。

最保险的做法就是手动逐一验证：

• 打开开发者工具（F12），进入 Elements 面板。
• 按 Ctrl+F（Windows）或 Cmd+F（macOS）搜索
  。
• 查看匹配结果。正常情况下应该仅且只有1对
  标签。注意检查闭合标签是否成对，以及是否被注释包裹导致页面不渲染。
• 对于SPA场景，建议特别留意：切换路由后，刷新 Elements 面板，确认旧节点是否真的被销毁。
• 如果一直在用 Lighthouse 做性能审计，可以关注一下它报告里的“Document has more than one main landmark”这一条。出现这条提示，就说明问题已经比较明显了。

main标签里该放什么、不该放什么

判断标准其实非常实在。这里给出一个直观的判断方法：

如果这一段内容，你复制粘贴到另一个页面还能原样使用，那它就不该出现在

里。

对这个逻辑做个展开：

• 应该放进去的：当前 URL 对应的唯一核心内容。比如文章正文、商品详情页的主体区块、用户填写表单的核心区域。
• 绝对不要放的：全站复用的模块。Logo加导航、面包屑导航、页脚的版权信息、右侧推荐栏、登录框。这些东西每个页面都可能出现，但它们不属于当前 URL 的专属内容。
• 一个需要特别注意的例外：
  其实可以作为
  的直接子元素，但仅限于当前页面独有的标题。例如，文章页里的
  标题加发布时间。这个
  不能是网站全局的头部。
• 多区块页面的处理方式：首页可能会包含推荐区、热榜区、最新动态等多个板块。正确的做法是，用一个
  包裹所有这些内容，内部再用
  等元素划分。不要给每个区块单独加一个
  。

总结一下：真正有挑战的，从来不是把标签写对。而是在每一次新增一个模块的时候，下意识地问自己一句：“这个东西，换到另一个页面还能直接粘贴过去用吗？”

如果答案是“能”，那就把它从

里移走。别犹豫。