必须唯一且不得嵌套，因其是w3c规范强制定义的语义锚点：屏幕阅读器依赖它实现“m键直达主内容”，搜索引擎靠它提取核心主题；若重复或嵌套（如在内），将导致读屏器行为不可预测、lighthouse报错、seo摘要错乱。
一个页面只能有一个 <main></main>，且必须直接作为 的子元素存在——这不是建议，是 W3C 规范强制要求，违反会导致读屏器跳转失效、Lighthouse 报 duplicate-main 错误，SEO 摘要错乱。
为什么 <main></main> 必须唯一且不能嵌套
它不是视觉容器，而是语义锚点：屏幕阅读器（如 NVDA、VoiceOver）靠 <main></main> 实现「按 M 键直达主内容」，搜索引擎靠它提取页面核心主题。出现两个，辅助技术会随机选一个、跳过全部，或反复播报“主内容开始”，用户无法预测行为。规范明文禁止它是 <header></header>、<footer></footer>、<nav></nav>、<article></article> 或 <aside></aside> 的后代——因为主体内容不可能“属于”页眉或导航栏。
常见错误写法：<header><main></main></header>。浏览器可能不报错，但读屏器大概率跳过该 <main></main>，或将其语义降级为普通区块。
- 正确结构只有一种：
<header></header><main></main><footer></footer> -
<header></header>作为<main></main>的子元素是允许的，但仅限“本文标题+发布时间+作者”这类当前页面独有元信息，不是网站全局头部 - SPA（React/Vue）中每个路由组件都写
<main>{children}</main>是最常见翻车点，实际 DOM 会留下多个实例
如何快速验证当前页面是否合规
不用等上线后被 Lighthouse 报错，开发阶段就能确认：
- 打开浏览器开发者工具（F12），在 Elements 面板按
Ctrl+F（Windows）或Cmd+F（macOS），搜索<main></main>，确保只匹配到一对起始与结束标签 - 检查匹配到的
<main></main>标签的直接父元素是否为；若父元素是<header></header>、<footer></footer>等，立即剪切并移至下同级位置 - 用 Lighthouse 运行无障碍审计，看是否出现
Document has more than one <main> element</main>或<main> is not a top-level element</main>报错
<main></main> 里能放什么、不能放什么
<main></main> 应严格限定为与当前 URL 主题强相关、不可跨页复用的核心内容。它不是“看起来像主体”的区域，而是“语义上不可复用”的边界。
- ✅ 允许：文章正文、产品详情列表、表单主体区域、本页专属评论区
- ❌ 禁止：全局导航菜单、版权信息、面包屑、侧边栏分类标签、广告位、“关注我们”模块（这些在多页一致，更适合
<nav></nav>、<aside></aside>或<section></section>） - ⚠️ 注意：如果首页有“推荐文章”“热榜”“最新动态”多个区块，应统一包裹在一个
<main></main>内，而不是为每个区块单独加<main></main>
动态渲染场景下容易被忽略的坑
服务端模板未做条件判断、SPA 路由切换后旧 <main></main> 未销毁，是真实项目中最隐蔽的问题源。
- SSR 模板中，列表页和详情页共用同一套
<main></main>包裹逻辑 → 实际 HTML 中生成两个<main></main> - React/Vue 中，
<main></main>被包裹在某个高阶组件或 Layout 内，而该组件又被多个路由复用 → 渲染时产生嵌套或重复 - 用
document.createElement('main')动态插入内容时，IE 不识别语义，需手动补role="main"；但更关键的是，现代框架 hydration 后若没清理旧节点，会残留多个<main></main>
真正难的不是写对第一个 <main></main>，而是在页面生命周期变化（路由跳转、组件卸载、AJAX 更新）后，始终确保 DOM 中只有一个、且位置正确。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
