<main>必须且只能出现一次，是HTML5与WCAG 2.1强制要求的唯一语义锚点，须直接位于<body>下；多个或嵌套会破坏屏幕阅读器跳转、触发Lighthouse报错，并干扰SEO。
一个 HTML 页面中，main 标签必须且只能出现一次——这不是最佳实践，而是规范强制要求，违反即导致可访问性失效、Lighthouse 报错、屏幕阅读器行为不可预测。
为什么浏览器不报错但实际已出问题
浏览器解析 main 时不会抛异常，也不会阻止渲染，所以开发者很容易忽略。但辅助技术（如 NVDA、VoiceOver）和自动化检测工具（Lighthouse、axe）会严格校验语义结构：
- 屏幕阅读器按 M 键跳转时，可能随机选一个
main、跳过全部、或反复播报“主内容开始”，用户无法稳定进入正文 -
Lighthouse审计直接标红Document has more than one main landmark -
axe工具报duplicate-main，WCAG 2.1 明确要求 “one main landmark per page”
DevTools 不警告，恰恰是最危险的——你得主动查，而不是等它提醒。
怎么快速确认页面只有一个 main
打开浏览器开发者工具（F12），在 Elements 面板按 Ctrl+F（Windows）或 Cmd+F（macOS），搜索 <main></main>：
立即学习“前端免费学习笔记（深入）”；
- 只应匹配到**一对**
<main></main>和标签 - 特别注意 SPA 场景：React/Vue 组件里各自写
<main>{children}</main>，hydration 后 DOM 中会真实存在多个实例 - 服务端模板（如 EJS、Twig）若未做路由判断，列表页和详情页共用同一套
main包裹逻辑，也容易生成嵌套或并列的多个
别信“看起来没问题”，必须搜，必须数，必须验证父级。
main 的父元素必须是 body，不能是 header 或 footer
main 不是视觉容器，而是语义锚点。HTML5 规范明令禁止它作为 header、footer、nav、article 等已有语义边界的元素的后代——因为主体内容不可能“属于”页眉或页脚。
- 错误写法：
<header><main>...</main></header>→ 读屏器大概率跳过该main - 正确结构：
<header>...</header><main>...</main><footer>...</footer> -
main内部可以包含header，但仅限本页专属标题（如文章<h1></h1>+ 发布时间），不是网站全局头部
如果发现 main 被包在 header 里，剪切整段 main，粘贴到 body 下与 header 同级位置即可。
SPA 路由中如何安全更新 main 内容
关键原则：**标签实例只存在一个，内容动态替换，而非重复创建。**
- ✅ 推荐：在根 Layout 组件中声明唯一
<main></main>，用<outlet></outlet>（React Router v6）或<router-view></router-view>（Vue Router）作为其唯一子节点 - ❌ 错误：在
ArticlePage.tsx和ProfilePage.tsx中各自写<main>{...}</main> - ⚠️ 注意：404 等异常状态页，不要用
<main>{error ? <notfound></notfound> : <page></page>}</main>，而应通过状态控制<main></main>节点本身的渲染与否 - ⚠️ 极易忽略：不要用 JS 整个替换
<main></main>元素（如el.replaceWith(newMain)），只替换其子节点；否则 SSR 与客户端 hydration 可能错位，语义丢失
最常被绕过的复杂点是：它不带默认样式，也不影响布局——加了 main 却没配 CSS，结果发现在视觉上完全没变化，误以为“没起作用”，其实语义早已生效，只是你看不见。
