main标签是页面唯一核心内容容器，必须为body直接子元素且仅一个，用于向搜索引擎和辅助技术明确主干内容，混入复用模块或嵌套将导致SEO降权与无障碍失效。

main标签是搜索引擎判断“这页到底在讲什么”的第一锚点，不是装饰，而是内容可信度的信号源。

它告诉爬虫：这里才是用户该看的核心

搜索引擎不渲染页面，也不读CSS类名。它靠标签语义快速定位主干——

就是那个明确声明“本页独一无二、不可复用”的区域。比如商品详情页，

里只放标题、参数、描述、购买按钮；导航栏、侧边推荐、页脚版权这些复用模块，一律排除在外。

• 放进
  的内容，会被优先提取用于搜索摘要、知识图谱和移动快照
• 若
  里混入面包屑或全局搜索框，爬虫可能把导航逻辑误判为正文主题
• Google 的移动优先索引会降低
  外内容的权重，但不会忽略——只是延迟解析

唯一性不是建议，是硬性解析规则

HTML5规范强制要求每页只能有一个

，且必须是的直接子元素。重复或嵌套会导致实际后果：

Doc To HTML

使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

下载

• 多个
  ：Lighthouse直接报错，部分读屏工具只识别第一个，后续全部跳过
• 嵌套在
  或

  内：语义失效，搜索引擎降权该页面的主体索引优先级
• SPA路由切换未清理旧
  ：新旧两个并存，DOM结构违规，辅助技术行为不可预测

它和article、section的分工很清晰

管的是“页面层级”的主干，

管的是“内容单元”的独立性。博客列表页典型结构是：

包住整个列表容器，每个条目再各自用

包裹——前者告诉爬虫“这是本页核心”，后者告诉RSS和Google“这条可单独分发、被引用、被订阅”。

立即学习“前端免费学习笔记（深入）”；

• 内部可以合法包含

  、

  、

  （文章标题）、

  （文末版权）
• 但不能出现
  、

  、另一个

  ，也不能被它们包裹
• 把侧边推荐和正文一起塞进同一个
  ，等于稀释主内容信号，SEO效果打折扣

兼容与落地的关键细节

IE8及更早版本不识别

语义，但能渲染。真正要防的是样式丢失和语义断层：

• CSS必须加重置：main { display: block; }，否则IE8会忽略该规则
• 动态插入（如 innerHTML 或 React createElement）需手动补 role="main"，否则读屏器感知不到
• 服务端模板若未做路由条件判断，首页和详情页共用同一 layout，极易生成两个