main标签只能出现一次且必须是body的直接子元素，否则屏幕阅读器跳转行为不可预测，lighthouse和axe会报错，wcag 2.1强制要求每页仅一个main地标，验证需在开发者工具中搜索确认。
main标签只能出现一次，且必须是body的直接子元素
浏览器不会报错，但屏幕阅读器（如 NVDA、VoiceOver）按 M 键跳转时可能跳过、随机选一个，或反复播报“主内容开始”——行为完全不可预测。Lighthouse 会明确报 duplicate-main，axe 工具标红，WCAG 2.1 强制要求 “one main landmark per page”。
验证方法不是看代码结构，而是实操：打开开发者工具（F12），在 Elements 面板中按 Ctrl+F（Windows）或 Cmd+F（macOS），搜索 <main>。只应匹配到一个 <code><main></main> 开始标签和一个 结束标签。
- SPA 场景下要滚动到底部再搜一次，避免漏掉异步加载后动态插入的冗余
<main></main> - React/Vue 中常见错误是每个路由组件都写
<main>{children}</main>，实际应由具体页面组件（如Home.tsx）自己包裹，Layout 层不放<main></main> - 服务端模板（EJS/Twig）若未做路由判断，列表页和详情页共用同一套
<main></main>包裹逻辑，也会导致重复
main不能嵌套在header、footer、nav、aside或article内部
这不是兼容性问题，是语义冲突：<main></main> 表示“整页唯一主体”，它不可能“属于”页眉、导航或侧栏。HTML5 规范明文禁止它是这些元素的后代。
错误写法如 <header><main>...</main></header>，会导致 Lighthouse 报错 The element main must not appear as a descendant of the header element，读屏器大概率跳过该 <main></main>。
- 正确结构只有一种：
<header></header><main></main><nav></nav><footer></footer>，所有语义区块平级并列 -
<header></header>可以作为<main></main>的**直接子元素**，但仅限本页专属标题（如文章<h1></h1>+ 发布时间），不能是网站 Logo + 全局导航 - 若某弹窗或卡片需语义化主内容，用
<section role="region" aria-labelledby="..."></section>替代，不要硬塞<main></main>
main里只能放当前URL独有的、不可复用的内容
判断标准极简：如果这块内容复制粘贴到另一个页面还能原样用，那它就不该进 <main></main>。它不看视觉权重，只认语义归属。
例如，商品列表页的 <ol></ol>、博客正文的 <article></article>、独立表单的 <form></form> 都可以；但全局导航 <nav></nav>、版权信息 <footer></footer>、侧边推荐 <aside></aside>、面包屑 <nav aria-label="breadcrumb"></nav> 必须移出。
-
<main></main>内部允许出现<section></section>，但每个<section></section>应服务于当前页面主题（如“用户评价”“规格参数”） - 页眉中的
<h1></h1>若为本页标题（非网站名），可保留在<main></main>内；但若含 logo 或主导航，则必须拆出 - 广告位、相关文章、猜你喜欢等相似区块，即使视觉上在主体区域附近，也不属于
<main></main>范畴
必须加可访问性标识，不能依赖隐式语义
<main></main> 没有默认样式，也不自带可读文本；不加 aria-labelledby 或 aria-label，屏幕阅读器可能只报“主内容区域”，无法说明“这是哪篇文章”或“这是哪个产品页”。
推荐优先使用 aria-labelledby，指向页面内已有描述性文本的元素（如 <h1 id="page-title">堆友AI网页版</h1>），比纯 aria-label 更利于维护和翻译。
- 避免写
<main aria-label="主内容"></main>—— 这类泛化描述对用户无实质帮助 - 若页面没有显式标题（如某些后台表单页），再考虑
aria-label，值需具体，如aria-label="订单提交表单" - 不要用
aria-hidden="true"来“隐藏”多余的<main></main>—— 规范不承认这种绕过方式，无效
最容易被忽略的是 SPA 动态挂载后的残留节点，以及把 <main></main> 当成视觉容器来用。它本质是机器可读的语义锚点，不是 div 的高级替代品。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
