页面只能有一个<main>标签，因其是W3C强制定义的唯一语义锚点：屏幕阅读器依赖它实现“M键直达主内容”，搜索引擎靠它提取核心主题；重复或嵌套会导致读屏器行为不可预测、Lighthouse报duplicate-main错误、SEO摘要错乱。
为什么页面里出现两个 <main></main> 标签浏览器却不报错
因为浏览器只做语法解析，不校验语义规范；<main></main> 多个在 HTML 解析层面是合法的，但会直接破坏屏幕阅读器行为——比如 NVDA 或 VoiceOver 按 M 键时可能跳过、随机选一个、或反复播报“主内容开始”。Lighthouse 会明确报 duplicate-main，axe 工具标红，WCAG 2.1 强制要求 “one main landmark per page”，但这些都不会中断页面渲染。
常见触发场景：
- React/Vue 每个路由组件都写
<main>{children}</main>，hydration 后 DOM 留下多个实例 - 服务端模板（如 EJS/Twig）未做路由判断，列表页和详情页共用同一套
<main></main>包裹逻辑 - SPA 路由切换时旧
<main></main>未销毁，新内容又挂载进另一个<main></main>
怎么快速确认当前页面只有一个 <main></main>
不能靠肉眼扫代码，必须实操验证：
- 打开开发者工具（F12），切到 Elements 面板，按
Ctrl+F（Windows）或Cmd+F（macOS）搜索<main></main> - 检查匹配结果：只应出现一个
<main></main>开始标签和一个结束标签 - 注意 SPA 场景下动态插入的残留节点——滚动到底部再搜一次，避免漏掉异步加载后挂载的冗余
<main></main> - 若发现多个，立即删掉所有，只保留包裹当前路由视图核心内容的那个
<main></main> 为什么不能嵌套在 <header></header> 里
这不是兼容性问题，是语义冲突：<main></main> 表示“整页唯一主体”，它不可能“属于”页眉。W3C 明确禁止它是 <header></header>、<footer></footer>、<nav></nav> 的后代。
立即学习“前端免费学习笔记（深入）”；
错误写法：<header><main>...</main></header> → Lighthouse 报错 The element main must not appear as a descendant of the header element，读屏器大概率跳过该 <main></main>。
正确结构只有一种：<header></header><main></main><nav></nav><footer></footer>，所有语义区块并列于 下。
例外允许：<header></header> 作为 <main></main> 的**直接子元素**，但仅限本页专属标题（如文章 <h1></h1> + 发布时间），不是全站 Logo + 导航。
<main></main> 里该放什么、不该放什么
判断标准极简：如果这块内容复制粘贴到另一个页面还能原样用，那它就不该进 <main></main>。它不看视觉权重，只认语义归属。
- ✅ 应包含：文章正文、商品详情、搜索结果卡片流、表单主体、404 提示文案
- ❌ 必须排除：顶部 logo 和主导航（属
<header></header>）、底部版权信息（属<footer></footer>）、右侧分类标签栏（适合<aside></aside>或<section></section>） - ⚠️ 容易误判：“热门推荐”是否进
<main></main>，取决于它是否随路由动态变化主题——若全站固定展示，就是通用模块，不该进
复杂点在于 SPA 和服务端模板中，<main></main> 的存在位置和内容边界容易被“复用逻辑”模糊掉；最容易被忽略的是：它不是容器，而是锚点——你得先确定“哪块内容构成这个 URL 存在的根本理由”，再把 <main></main> 套上去，而不是反过来。
