一个页面只能有一个元素，且不能嵌套在、、、内；它必须包裹本页独一无二、不可复用的核心内容，否则将损害可访问性、SEO及Lighthouse评分。

一个页面只能有一个

，多写或嵌套会直接破坏可访问性与 SEO

搜索引擎和读屏软件依赖

精准定位页面核心内容。规范强制要求：整个文档中最多出现一次，且不能是

、

、

、

的子元素。

常见错误现象：

• SPA 路由组件各自渲染一个
  → Lighthouse 报 “Multiple
  elements”；读屏器反复播报“主内容开始”，用户无法聚焦
• 服务端模板未做条件判断，首页和文章页共用同一 layout → 实际 HTML 中生成两个
• 把全局搜索框或面包屑塞进
  → 搜索引擎可能将导航信息误判为正文主体

不是“视觉上看起来像主体”的容器，而是语义上“不可复用”的内容边界

它必须包裹当前页面**独一无二、不可跨页复用**的内容。比如文章正文、商品详情、表单提交结果页 —— 这些内容不会出现在其他页面上。

以下内容不该放进

：

• 顶部导航栏（
  ）
• 页脚版权信息（
  ）
• 侧边栏推荐位（
  ）
• 网站 logo 或全局搜索（即使只在当前页显示，逻辑上仍属复用模块）

正确示例：

  <header><h1>我的博客</h1></header><nav>...</nav><main><article><h2>今天学了什么</h2>
      <p>关于 <code><main> 的真实用法...</main></code></p><div class="aritcle_card flexRow artxards">
											<div class="artcardd flexRow">
												<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill12426" title="SEO Blog Writer — E-E-A-T Content System for SaaS & Startups"><img
														src="https://img.php.cn/upload/skill/001/246/273/6adaf20cf0281539.jpg" alt="SEO Blog Writer — E-E-A-T Content System for SaaS & Startups" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
												<div class="aritcle_card_info flexColumn">
													<a rel="nofollow" href="/xiazai/skill12426" title="SEO Blog Writer — E-E-A-T Content System for SaaS & Startups" class="overflowclass">SEO Blog Writer — E-E-A-T Content System for SaaS & Startups</a>
													<p class="overflowclass">SEO博客写作——撰写在Google排名靠前并被AI搜索引用的博客。采用E‑E‑A‑T内容体系，专为SaaS和初创企业设计。使用QAE写作模式（问题...）</p>
												</div>
												<a rel="nofollow" href="/xiazai/skill12426" title="SEO Blog Writer — E-E-A-T Content System for SaaS & Startups" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
												</a>
											</div>
										</div>
    </article></main><aside>...</aside><footer>© 2026</footer>

SEO 不靠“用了

就加分”，而靠“不用就容易被误读”

Google 和 Bing 并不给

单独加权，但它影响爬虫对页面结构的解析优先级。缺失时，爬虫可能从

或第一个大段

入手，而这些位置常被 CMS 插入广告或推荐模块。

关键影响点：

• 当页面存在多个相似区块（如“相关文章”“猜你喜欢”），
  明确告诉爬虫：“只有这里面的才是本页原始意图”
• Lighthouse 的 “Accessibility” 分数直接受
  合规性影响；低分页面在部分垂直搜索场景中排序靠后
• AMP 页面强制要求
  存在且唯一，否则校验失败

兼容性不是问题，但 IE 需要 fallback 处理

所有现代浏览器（Chrome 26+、Firefox 21+、Safari 7+、Edge 12+）原生支持

。IE 完全不识别该标签，也不会报错，只是忽略其语义。

如果项目仍需支持 IE：

• 不必改用
  —— 两者语义等价，但原生

  在其他浏览器中更可靠
• 只需确保 CSS 不依赖 main 选择器做关键布局（例如不要写 main { display: flex } 而不提供 div[role="main"] 回退）
• 无障碍测试工具（如 axe）默认检查
  ，不检查 role="main"，所以优先保留原生标签

真正容易被忽略的是：构建工具（如 Webpack + HtmlWebpackPlugin）或 SSR 框架（如 Next.js 的 getStaticProps）可能在多页共用模板时，忘记动态控制

的渲染逻辑 —— 这类错误在线上环境极难被肉眼发现，必须靠自动化校验（如 Puppeteer + axe-core 扫描）捕获。