一个页面只能有一个元素，且不能嵌套在、、、内；它必须包裹本页独一无二、不可复用的核心内容，否则将损害可访问性、SEO及Lighthouse评分。
一个页面只能有一个 <main></main>，多写或嵌套会直接破坏可访问性与 SEO
搜索引擎和读屏软件依赖 <main></main> 精准定位页面核心内容。规范强制要求：整个文档中最多出现一次，且不能是 <header></header>、<footer></footer>、<nav></nav>、<aside></aside> 的子元素。
常见错误现象：
- SPA 路由组件各自渲染一个
<main></main>→ Lighthouse 报 “Multiple<main></main>elements”；读屏器反复播报“主内容开始”，用户无法聚焦 - 服务端模板未做条件判断，首页和文章页共用同一 layout → 实际 HTML 中生成两个
<main></main> - 把全局搜索框或面包屑塞进
<main></main>→ 搜索引擎可能将导航信息误判为正文主体
<main></main> 不是“视觉上看起来像主体”的容器，而是语义上“不可复用”的内容边界
它必须包裹当前页面**独一无二、不可跨页复用**的内容。比如文章正文、商品详情、表单提交结果页 —— 这些内容不会出现在其他页面上。
以下内容不该放进 <main></main>：
立即学习“前端免费学习笔记（深入）”；
- 顶部导航栏（
<nav></nav>） - 页脚版权信息（
<footer></footer>） - 侧边栏推荐位（
<aside></aside>） - 网站 logo 或全局搜索（即使只在当前页显示，逻辑上仍属复用模块）
正确示例：
<body>
<header><h1>我的博客</h1></header>
<nav>...</nav>
<main>
<article>
<h2>今天学了什么</h2>
<p>关于 <code><main></code> 的真实用法...</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill12125" title="SEO Autopilot Pro"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20dbae7c507.jpg" alt="SEO Autopilot Pro" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill12125" title="SEO Autopilot Pro">SEO Autopilot Pro</a>
<p>全自动 SEO 内容新鲜度引擎，监控关键词研究报告目录，自动生成落地页和博客文章，执行 SEO a...</p>
</div>
<a href="/xiazai/skill12125" title="SEO Autopilot Pro" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
</article>
</main>
<aside>...</aside>
<footer>© 2026</footer>
</body>
SEO 不靠“用了 <main></main> 就加分”，而靠“不用就容易被误读”
Google 和 Bing 并不给 <main></main> 单独加权，但它影响爬虫对页面结构的解析优先级。缺失时，爬虫可能从 <div id="content"> 或第一个大段 <code><p></p> 入手，而这些位置常被 CMS 插入广告或推荐模块。
关键影响点：
- 当页面存在多个相似区块（如“相关文章”“猜你喜欢”），
<main></main>明确告诉爬虫：“只有这里面的才是本页原始意图” - Lighthouse 的 “Accessibility” 分数直接受
<main></main>合规性影响；低分页面在部分垂直搜索场景中排序靠后 - AMP 页面强制要求
<main></main>存在且唯一，否则校验失败
兼容性不是问题，但 IE 需要 fallback 处理
所有现代浏览器（Chrome 26+、Firefox 21+、Safari 7+、Edge 12+）原生支持 <main></main>。IE 完全不识别该标签，也不会报错，只是忽略其语义。
如果项目仍需支持 IE：
- 不必改用
<div role="main"> —— 两者语义等价，但原生 <code><main></main>在其他浏览器中更可靠 - 只需确保 CSS 不依赖
main选择器做关键布局（例如不要写main { display: flex }而不提供div[role="main"]回退） - 无障碍测试工具（如 axe）默认检查
<main></main>，不检查role="main"，所以优先保留原生标签
真正容易被忽略的是：构建工具（如 Webpack + HtmlWebpackPlugin）或 SSR 框架（如 Next.js 的 getStaticProps）可能在多页共用模板时，忘记动态控制 <main></main> 的渲染逻辑 —— 这类错误在线上环境极难被肉眼发现，必须靠自动化校验（如 Puppeteer + axe-core 扫描）捕获。
