HTML如何区分内容主次？main标签使用教程

HTML中的`

`标签是专为标识页面唯一、独立且与主题直接相关的核心内容而设计的语义化利器，它不可重复、不可嵌套于其他分区元素（如`

`、`

一个页面只能有一个

为什么多个

会出问题

屏幕阅读器（如 NVDA、VoiceOver）把

• SPA（React/Vue）项目里，常见错误是每个路由组件都写一个
  ，实际应只由最外层 Layout 或 App 组件包裹一次
• 服务端渲染（SSR）时若模板拼接出多个
  ，SEO 会降权——搜索引擎认为语义混乱，降低主内容可信度
• 即使加了 aria-hidden="true" 也无效，规范不承认这种“隐藏绕过”

能不能嵌套在

或 里

不能。HTML5 规范明确定义：

• 错误写法：
  ...
  —— 屏幕阅读器可能完全跳过该
• 正确顺序：必须是
  ...
  ...
• 如果某区块（比如弹窗、卡片）需要语义化主内容，用
  + role="region" + aria-labelledby 替代，而不是硬塞

和

有什么实质区别

区别不在样式或布局，而在机器可读的语义权重。浏览器和辅助技术不解析 class 或 id 名称，