从检测工具的角度看，Lighthouse 会直接报 duplicate-main 错误，axe 工具也会标红警告。WCAG 2.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标签里该放什么、不该放什么

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

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