浏览器不报错是因为只解析语法，而Lighthouse标红duplicate-main是因<main>为语义锚点，多实例会导致屏幕阅读器跳转失效、SEO错乱；必须手动搜索验证唯一性且禁止嵌套。
为什么浏览器不报错但 Lighthouse 直接标红 duplicate-main
因为 main 是语义锚点，不是渲染指令。浏览器只管解析和绘制，而辅助技术（如 VoiceOver、NVDA）和审计工具（Lighthouse、axe）会严格校验结构语义。出现多个 <main></main> 时，读屏器按 M 键可能跳过全部、随机选一个，或反复播报“主内容开始”——用户根本无法稳定进入正文。
常见翻车点：
- React/Vue 每个页面组件都写
<main>{children}</main>，hydration 后 DOM 真实残留多个实例 - 服务端模板（EJS/Twig）未做路由判断，列表页和详情页共用同一套
<main>包裹逻辑 - SPA 路由切换后旧
<main>没被移除，新节点只是插入，形成并存
怎么快速确认页面只有一个 <main>
不能靠“看起来只有一个”来判断，必须手动验证：
- 打开开发者工具（F12），切到 Elements 面板，按
Ctrl+F（Windows）或Cmd+F（macOS）搜索<main> - 只应匹配到一对
<main>和</main>；注意查看是否包含自闭合写法（<main/>）——这是无效 HTML，也会被计为错误实例 - 右键匹配项 → “Reveal in Elements panel”，检查其直接父元素是否为
<body>；若父级是<header>或<footer>，说明已嵌套违规
为什么 <main> 不能嵌套在 <header> 里
这不是兼容性问题，是语义冲突：<main> 表示“整页唯一主体”，它不可能“属于”页眉。W3C 明确禁止它是 <header>、<footer>、<nav> 的后代。
立即学习“前端免费学习笔记（深入）”；
错误写法：<header><main></main></header> → Lighthouse 报 The element main must not appear as a descendant of the header element
正确结构只有一种：<body><header></header><main></main><footer></footer></body>，所有语义区块并列于 <body> 下。
例外允许：<header> 可以作为 <main> 的子元素，但仅限本页专属标题（如文章 <h1> + 发布时间），不是网站全局 Logo + 导航。
<main> 里该放什么、不该放什么
判断标准极简：如果这块内容复制粘贴到另一个页面还能原样用，那它就不该进 <main>。
- ✅ 应包含：文章正文、商品详情、搜索结果列表、表单主体、404 提示文案
- ❌ 必须排除：
<nav>、<footer>、面包屑、版权信息、登录框、“关注我们”模块 - ⚠️ 容易误判：“热门推荐”是否进
<main>，取决于它是否随 URL 动态变化主题；若全站固定展示，就是通用模块，必须移出
真正容易被忽略的复杂点在于：SPA 中 <main> 实例必须全程存活，不能靠组件挂载/卸载来管理；服务端模板里，<main> 不该出现在 layout 层，而应由具体页面决定是否渲染——否则 404 页面或弹窗场景极易意外生成空 <main> 或遗漏。
