<main>必须且只能出现一次，是HTML5与WCAG 2.1强制要求的唯一语义锚点，须直接位于<body>下；多个或嵌套会破坏屏幕阅读器跳转、触发Lighthouse报错并干扰SEO。
main 标签必须且只能出现一次
HTML 规范明确要求 <main> 元素在文档中**有且仅有一个**，它代表页面的“主要”或“唯一”内容区域。如果出现多次，不仅语义错误，还会干扰屏幕阅读器对页面结构的解析——比如读屏软件可能跳过后续的 <main>，或报出“多个主内容区”的警告。
常见错误是把每个文章卡片、每个 tab 面板都包一层 <main>，比如：
<main><h2>新闻1</h2><p>...</p></main> <main><h2>新闻2</h2><p>...</p></main>
这完全违背语义。正确做法是：整个页面真正的核心内容（如一篇完整文章、一个独立表单、一个数据仪表盘视图）才包裹进一个 <main>。
main 不能是 article、section 或 aside 的子元素
<main> 是顶层语义容器，它的直接父元素**必须是 <body>**（或 <div role="document"> 等极少数例外，但不推荐）。把它塞进 <article> 或 <section> 里，会导致语义嵌套冲突——<main> 表示“整页主内容”，而 <article> 表示“可独立分发的内容单元”，二者逻辑矛盾。
立即学习“前端免费学习笔记（深入）”；
- ✅ 正确：
<body><header>...</header><main>...</main><footer>...</footer></body> - ❌ 错误：
<article><main>...</main></article> - ❌ 错误：
<section><main>...</main></section>
main 里不要放重复导航、侧边栏或页脚内容
<main> 只应包含用户访问该页面时**真正想看的内容主体**。常见的“混入”错误包括：
- 把面包屑
<nav class="breadcrumb">放进<main>—— 面包屑属于导航，应放在<nav aria-label="Breadcrumb">中，且通常位于<main>外部 - 把右侧标签云、相关推荐列表放进
<main>—— 这些属于补充信息，更适合<aside>，且应与<main>同级 - 把页脚版权信息重复塞进
<main>底部 —— 页脚必须用<footer>，且独立于<main>
判断标准很简单：如果去掉这部分，用户是否还觉得“看完了主要内容”？如果答案是肯定的，那它就不该在 <main> 里。
配合 aria-labelledby 或 aria-label 提升可访问性
虽然 <main> 本身有隐含的 ARIA role main，但屏幕阅读器有时需要更明确的上下文。尤其当页面没有明显标题（比如纯表单页、空状态页），建议显式标注：
<main aria-labelledby="main-title"> <h1 id="main-title">修改账户信息</h1> <form>...</form> </main>
或者用 aria-label（当无合适标题元素时）：
<main aria-label="产品搜索结果"> <ul class="results">...</ul> </main>
注意：aria-label 会完全覆盖内部文本内容，所以只在内部确实没有可读标题时才用；优先选 aria-labelledby 指向一个可见标题。
别忘了检查 Chrome DevTools 的 Accessibility 面板，确认 <main> 节点下是否有“Name”属性被正确识别——这是最容易被忽略的实操验证点。
