因为HTML解析器只校验语法合法性，多个main标签语法合法故不报错；但NVDA/VoiceOver跳转失效、Lighthouse标红duplicate-main、搜索引擎误提页脚内容，均属语义失效。
为什么浏览器不报错但必须只用一个 <main></main>
因为 HTML 解析器只检查语法合法性，<main></main> 多个在语法上完全合法——它不会中断渲染，也不会在控制台报错。真正出问题的是辅助技术与自动化工具：NVDA/VoiceOver 按 M 键时可能跳过全部、随机选一个，或反复播报“主内容开始”；Lighthouse 直接标红 Document has more than one <main> element；搜索引擎可能把页脚版权当成正文提取。这些都不是“功能错误”，而是语义失效。
怎么快速确认当前页面只有一个 <main></main>
不能靠肉眼扫源码，尤其 SPA 场景下 DOM 是动态生成的：
- 打开开发者工具（F12），切到 Elements 面板，按
Ctrl+F（Windows）或Cmd+F（macOS），输入<main> 搜索</main> - 检查匹配结果：只应出现一个
<main></main>开始标签和一个结束标签 - 滚动到底部再搜一次——SPA 异步加载后可能挂载了残留的
<main></main>，容易漏掉 - 右键点击匹配到的
<main></main>→ “Reveal in Elements panel”，确认其父节点是，不是<header></header>或<nav></nav>
React/Vue 项目里 <main></main> 多余的常见来源
不是手误写错，而是框架模式导致的结构性冗余：
- 每个路由组件（如
Home.vue、About.tsx）都包裹<main>{children}</main>—— hydration 后多个实例并存 - 全局 Layout 组件里写了
<main></main>，子页面又套一层，形成嵌套+并列双重违规 - 服务端模板（EJS/Twig）用同一段
<main></main>包裹逻辑处理列表页和详情页，未加if判断 - 解决方案：只在最顶层路由出口组件（如 Next.js 的
app/page.tsx，或 Vue Router 的router-view直接子组件）中用一次<main></main>；其余组件统一用<section></section>或普通<div> <h3> <code><main></main>里能放什么、不能放什么判断标准极简：复制粘贴到另一个页面还能原样用？能 → 就不该进
<main></main>。立即学习“前端免费学习笔记（深入）”；
- ✅ 允许：
<h1></h1>（本页专属标题）、商品列表<ol></ol>、独立表单<form></form>、文章正文<article></article>、本页评论区（若非全局复用） - ❌ 禁止：
<nav></nav>（全局导航）、<footer></footer>（版权信息）、<aside></aside>（侧边推荐）、含role="navigation"的容器 - ⚠️ 特殊允许：
<header></header>可以作为<main></main>的**直接子元素**，但仅限本页独有元信息（如<h1>堆友AI</h1> <time>2026-07-23</time>），不是网站 Logo + 主导航
<main></main>没销毁，新内容又挂载进另一个<main></main>—— 这种 DOM 残留必须靠 Elements 面板手动搜索确认，光看 React 组件结构会误判。 - ✅ 允许：
