页面只能有一个main标签，这是HTML5规范强制要求；它必须作为body的直接子元素，仅包裹当前URL独有、不可复用的核心内容，重复或嵌套会导致屏幕阅读器跳转失效、Lighthouse报错及SEO错乱。

页面里能有几个

标签

只能有一个。不是“建议”，是 HTML5 规范强制要求：

必须是文档中唯一的主内容地标（landmark）。浏览器不报错，但 Lighthouse 会明确提示 “Document has more than one main landmark”，NVDA、VoiceOver 等读屏软件在跳转时可能忽略全部或随机选一个——用户根本进不到正文。

常见误用场景：

• React/Vue 的每个路由组件（如 Home.tsx、About.tsx）都写了
  —— 应只由最外层页面组件（如 app/page.tsx）包裹一次
• 服务端模板循环渲染卡片时，误把每张卡片都包上
  —— 这会让语义彻底失效
• Next.js 的 app/layout.tsx 里提前塞了
  —— 这是全局壳层，不是页面主体

能不能嵌套在

或

里面

不能。W3C 规范白纸黑字禁止：

不得作为

、

、

、

的后代元素。

错误写法：

...

—— 屏幕阅读器大概率直接跳过该

，因为它被判定为“导航上下文中的内容”，而非独立主区域。

正确结构必须是平级并列：

<header></header><main><h1>文章标题</h1>
<p>正文...</p></main><footer></footer>

哪怕视觉上你想让

“看起来在页眉下面”，DOM 层级也必须和

同级，且都是 的直接子元素（或至少是语义中立容器如

的直接子元素）。

里该放什么、不该放什么

判断标准只有一条：这块内容是否「随 URL 变化、不可跨页复用」。复制粘贴到另一个页面还能原样用？那它就不属于

。

✅ 允许放入：

• ～
  （注意：若
  已有站点级
  ，
  内建议从
  起始）

• 、
  、
  、
  （独立提交用途）、
• 商品列表、博客正文、仪表盘核心数据面板等真正构成当前页面主题的内容

❌ 必须移出：

• （包括面包屑、顶部导航、侧边栏导航）
• （版权信息、备案号）
• （推荐位、广告、相关文章）
• 网站 Logo、全局搜索框（即使只在当前页显示，逻辑上仍是复用模块）

SPA 和无障碍兼容要注意什么

单页应用里，

的位置不能变，但内容要随路由动态更新。不要用 JS 整体替换

标签，而应只更新其子节点。

可访问性方面，

自带隐式 role="main"，无需额外添加。但为提升兼容性（尤其旧版读屏器），建议：

• 给
  加 id，并用 aria-labelledby 关联一个可见标题（如

  最新动态

  ）
• 避免用 display: none 隐藏
  —— 这会让读屏器彻底忽略它；如需视觉隐藏，用 visibility: hidden + position: absolute 并严格测试
• IE 不支持
  ，若仍需兼容，可用
  回退，但必须配 aria-labelledby，否则语义不完整

  最容易被忽略的点：开发者工具里 Ctrl+F 搜

  ，确认全页只有一对；SPA 切换路由后，再搜一次——很多项目上线后才发现多个路由组件各自渲染了

  ，问题藏得很深。