main标签语义上代表页面唯一核心内容，必须全文档仅出现一次，用于提升SEO与可访问性；应包含当前URL独有内容，排除导航、页脚等通用模块。
main 标签不是“视觉居中”，而是语义上的“唯一中心”——它告诉浏览器、搜索引擎和屏幕阅读器：“这里才是本页真正想表达的内容”。用错或滥用，反而会稀释SEO权重、破坏可访问性。
必须守住的唯一性底线
一个 HTML 文档中，main 元素只能出现一次。这不是建议，是 HTML5 规范强制要求：
- 重复写多个 main（比如在首页每个栏目都套一个），Lighthouse 会直接报
duplicate-main错误，WCAG 2.1 也明令禁止； - SPA 路由切换时，切忌让每个页面组件自己渲染一个 main，否则 hydration 后 DOM 中残留多个实例；
- 服务端模板若未做路由判断，列表页和详情页共用同一套包裹逻辑，极易意外生成嵌套或并列的 main。
什么该进 main，什么必须踢出去
main 只收“这个 URL 独有、不可复用、与当前视图强相关”的内容。它不看位置，只认语义归属：
- ✅ 应包含：文章正文、商品列表、搜索结果卡片流、表单主体、404 提示文案；
- ❌ 必须排除：顶部 logo 和主导航（属于 header）、底部版权信息（属于 footer）、右侧分类标签栏或“关注我们”模块（适合 aside 或 section）；
- ⚠️ 容易误判：“热门推荐”区块是否进 main，取决于它是否随路由动态变化主题——若全站固定展示，就是通用模块，不该进。
复杂项目中的安全落地方式
在 React 或 Vue 这类框架中，关键不是“每个页面加 main”，而是“整个应用生命周期里只存在一个 main 实例”：
立即学习“前端免费学习笔记（深入）”；
- ✅ 推荐做法：在根 Layout 组件中声明唯一的 main，把 <outlet>（React Router v6）或 <router-view>（Vue Router）作为其直接子元素；
- ❌ 避免写法：ArticlePage 自己写 <main><Article /></main>，ProfilePage 再写一遍——这会导致多个 main 同时存在于 DOM；
- ⚠️ 特殊情况处理：如 404 页面，不要用 <main>{error ? <NotFound /> : <Page />}</main>，而应通过状态控制 main 节点本身的渲染与否，确保它始终只有一个实例。
SEO 和可访问性的双重增益点
正确使用 main 不仅满足规范，还能带来实际收益：
- 搜索引擎能更准确提取摘要、识别页面意图，尤其在 AMP 页面中，main 缺失或重复将直接导致校验失败；
- 屏幕阅读器用户按 M 键即可直达主内容，多个 main 会让行为不可预测，甚至跳过全部；
- 推荐为 main 添加 aria-label="主要内容" 或 aria-labelledby，虽非强制，但能显著提升辅助技术体验，Lighthouse 的 Accessibility 分数也会明显提高。
