标签必须且只能出现一次，用于标识页面唯一、独立、与主题直接相关的主要内容区域；它具有明确的可访问性意义，不可嵌套于其他分区元素内，也不应包含全局通用内容。

标签用于明确标识文档中**唯一、独立、与当前页面主题直接相关的主要内容区域**。它不是装饰性语义标签，而是具有明确可访问性和结构意义的 html5 语义元素。

为什么必须确保页面只有一个

辅助技术（如屏幕阅读器）会将

作为跳转到核心内容的快捷入口。若出现多个，会导致逻辑混乱或被忽略；html5 规范也明确定义其为“document’s main content”，即单页有且仅有一个主体。

• 浏览器 DevTools 中可能不报错，但 Lighthouse 或 axe 等无障碍检测工具会标记 duplicate-main 问题
• SPA（如 react/vue）中容易在多个组件里各自写
  ，实际应只由最外层路由容器包裹一次
• 不能嵌套在
  

  、

  、

  、

  等其他分区元素内部

和

、

的区别在哪

是页面级结构容器，描述“这是整个页面的主干”；而

和

是内容组织单元，描述“这部分内容有自己主题或边界”。它们可以共存，但职责不同。

• 不代表“最重要的部分”，而是“除导航、侧边栏、页脚等之外剩下的那块”
• 一个
  里可以包含多个
  

  （如博客列表）、多个

  （如产品介绍+用户评价+FAQ）

• 不应包含重复出现在全站的通用内容（如面包屑导航、版权声明），即使它们视觉上在中间位置

不加

会怎样？加了又要注意什么

不加不会导致页面崩溃，但会削弱语义结构和无障碍体验——尤其对依赖键盘导航或读屏软件的用户，缺少快速定位主内容的路径。

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

• 不要为了“语义化”而强行包裹所有内容：如果页面是纯导航页（如首页只有几个大按钮），
  可以省略
• 避免用 css 隐藏
  后又通过 js 动态显示，这会让辅助技术误判内容可用性
• 服务端渲染（SSR）场景下，务必确认每个 URL 返回的 HTML 中
  内容随路由真实变化，而非静态占位

   
网站标题
      
     
       
文章标题
       
这是主要内容……
     
   
       

真正难的是判断“哪些内容属于这个页面的

”，而不是怎么写标签。很多 cms 模板把广告位、推荐栏、甚至登录框都塞进

，结果语义反而失真。结构语义不是贴标签，是做内容归因。