页面只能有一个main标签，因为它是语义锚点而非布局容器，用于屏幕阅读器快捷跳转和搜索引擎主题提取；重复会导致辅助技术行为不可预测，且规范禁止嵌套于header、nav、footer中。

为什么页面只能有一个 main 标签

因为 main 不是布局容器，而是语义锚点——屏幕阅读器（如 VoiceOver、NVDA）靠它实现「按 M 键直达主内容」，搜索引擎靠它提取页面核心主题。出现两个，辅助技术会随机选一个、跳过全部，或反复播报“主内容开始”，用户根本无法预测行为。Lighthouse 和 axe 工具会直接报 duplicate-main 错误，但浏览器 DevTools 不警告，极易被忽略。

常见翻车场景包括：

• Vue/React 中每个路由组件都写
  {children}
  ，实际 DOM 留下多个实例
• 服务端模板未做条件判断，列表页和详情页共用同一套 main 包裹逻辑
• SPA 路由切换后，旧 main 未销毁，新 main 又挂载，形成并存

main 不能嵌套在 header、footer、nav 里的真正原因

这不是兼容性问题，是语义冲突：主体内容不可能“属于”页眉或导航栏。main 必须与 header、nav、footer 并列，直接作为 body 的子元素存在。规范明文禁止它是这些元素的后代。

错误写法：

—— 浏览器可能不报错，但读屏器大概率跳过该 main，或将其语义降级为普通区块。

正确结构只有一种：

...

...

...

注意：header 作为 main 的子元素是允许的，但仅限“本文标题+发布时间+作者”这类当前页面独有元信息，不是网站全局头部。

哪些内容该进 main，哪些必须踢出去

判断标准极简：如果这块内容复制粘贴到另一个页面还能原样用，那它就不该进 main。

✅ 允许放入：

HTML Text Extract

从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

下载

• 博客文章正文、标题、发布时间、作者信息
• 商品列表页的
  或卡片流
• 独立搜索表单（非全站通用搜索框）
• 当前路由下的动态 Tab 内容区（如后台仪表盘中“监控数据”Tab 的图表）

❌ 必须排除：

• nav（全局主导航）、footer（版权信息）、面包屑（nav aria-label="breadcrumb"）
• 侧边推荐栏（除非它随当前 URL 主题完全重置，否则只是通用模块）
• 登录框、关注按钮、“联系我们”等跨页复用组件

⚠️ 容易误判：首页的“热门推荐”区块——若它不随路由变化而更新主题（比如始终是固定运营位），就该用 section，而非塞进 main。

SPA 和 SSR 场景下最容易被忽略的细节

动态渲染才是 main 出错的高发区，比手写 HTML 更危险。

Vue/React 中应确保：

• main 仅由最外层 Layout 或 App 组件包裹一次，子路由组件不再重复声明
• 使用 v-if / {condition &&
  }
  时，需保证每次只存在一个有效实例，避免 DOM 残留
• 服务端渲染中，main 不得包裹在
  外层，否则框架挂载后结构断裂

  更隐蔽的问题是：SSR 首屏 main 内容为空或仅含 loading 占位符，会导致首屏可访问性直接降级——读屏器跳进来，发现里面什么都没有。

  真正难的不是写对标签，而是每次路由切换或状态更新后，仍能准确判断「此刻什么是当前视图不可复用的核心」。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！