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