标签必须且只能出现一次，用于标识页面唯一、独立、与主题直接相关的主要内容区域；它具有明确的可访问性意义，不可嵌套于其他分区元素内，也不应包含全局通用内容。
标签用于明确标识文档中**唯一、独立、与当前页面主题直接相关的主要内容区域**。它不是装饰性语义标签，而是具有明确可访问性和结构意义的 HTML5 语义元素。
为什么必须确保页面只有一个
辅助技术（如屏幕阅读器）会将 作为跳转到核心内容的快捷入口。若出现多个，会导致逻辑混乱或被忽略；HTML5 规范也明确定义其为“document’s main content”，即单页有且仅有一个主体。
-
浏览器 DevTools 中可能不报错，但 Lighthouse 或 axe 等无障碍检测工具会标记
duplicate-main问题 - SPA（如 React/Vue）中容易在多个组件里各自写
，实际应只由最外层路由容器包裹一次 - 不能嵌套在
、、、等其他分区元素内部
是页面级结构容器，描述“这是整个页面的主干”；而 和 是内容组织单元，描述“这部分内容有自己主题或边界”。它们可以共存，但职责不同。
-
不代表“最重要的部分”，而是“除导航、侧边栏、页脚等之外剩下的那块” - 一个
里可以包含多个（如博客列表）、多个（如产品介绍+用户评价+FAQ） -
不应包含重复出现在全站的通用内容（如面包屑导航、版权声明），即使它们视觉上在中间位置
不加
不加不会导致页面崩溃，但会削弱语义结构和无障碍体验——尤其对依赖键盘导航或读屏软件的用户，缺少快速定位主内容的路径。
立即学习“前端免费学习笔记（深入）”；
- 不要为了“语义化”而强行包裹所有内容：如果页面是纯导航页（如首页只有几个大按钮），
可以省略 - 避免用 CSS 隐藏
后又通过 JS 动态显示，这会让辅助技术误判内容可用性 - 服务端渲染（SSR）场景下，务必确认每个 URL 返回的 HTML 中
内容随路由真实变化，而非静态占位
网站标题
文章标题
这是主要内容……
真正难的是判断“哪些内容属于这个页面的 ”，而不是怎么写标签。很多 CMS 模板把广告位、推荐栏、甚至登录框都塞进 ，结果语义反而失真。结构语义不是贴标签，是做内容归因。
