<main>必须是<body>的直接子元素，因其是ARIA main role的唯一原生映射；一旦被<div>、<section>等包裹，即退化为普通节点，导致屏幕阅读器跳过、Lighthouse报错、SEO失效。
为什么必须是的直接子元素
因为浏览器和辅助技术（如 NVDA、VoiceOver）依赖原生标签名识别 landmark 区域。<main></main> 是 ARIA main role 的唯一原生映射，一旦被包裹在 <div>、<code><section></section> 或任何其他容器里，它就退化为普通内容节点，失去“页面主体”语义。
常见错误现象包括：
- Lighthouse 报告 “Main landmark not found” 或 “Multiple main landmarks”
- 屏幕阅读器跳过
<main></main>，或读作 “section” 而非 “main” - SEO 工具无法提取核心内容，影响摘要生成与排名权重分配
正确写法只有一种：<header></header>…<main></main>…<footer></footer>… —— 中间不能插任何非语义容器。
<main></main> 和 <section></section> 到底怎么选
两者都分组内容，但语义意图完全不同：<main></main> 强调“可独立复用”，<section></section> 强调“逻辑归属”。选错会导致大纲混乱、可访问性下降。
立即学习“前端免费学习笔记（深入）”；
适用场景：
-
<main></main>：博客文章、新闻条目、论坛帖子（能单独 RSS 订阅或转发）；卡片式内容单元（如产品卡片、用户评价），自带完整标题与元信息 -
<section></section>：同一主题下的多个子模块，如“功能介绍”“技术参数”“用户反馈”，且必须配<h2></h2>–<h6></h6>
反例：<section class="grid-cols-3"></section> —— 纯布局用途，该用 <div>。
<h3>
<code><header></header> 和 <footer></footer> 可以多次出现吗
可以，但它们不是“页面顶部/底部”的视觉定位标签，而是“区块头部/尾部”的语义角色。一个 <article></article> 里可以有自己的 <header></header>（含标题+时间戳），一个 <section></section> 也能配自己的 <footer></footer>（含作者+来源）。
但要注意：
- 页面级
<header></header>和<footer></footer>应作为直接子元素，与<main></main>并列 - 区块级
<header></header>/<footer></footer>必须嵌套在语义容器内（如<article></article>、<section></section>），不可悬浮在<main></main>外层 - 滥用会导致大纲层级断裂，Lighthouse 提示 “Heading levels should only increase by one”
标题层级与语义容器的绑定关系
HTML 大纲算法（outline algorithm）靠标题标签 <h1></h1>–<h6></h6> 自动构建结构，但前提是标题必须出现在正确的语义容器中。否则，<h2></h2> 在 <div> 里不会被识别为 <code><section></section> 的标题。
关键规则：
-
<main></main>内的第一个标题应为<h1></h1>或<h2></h2>（取决于页面是否已有全局<h1></h1>） -
<section></section>和<article></article>必须有显式标题（<h2></h2>–<h6></h6>），否则会被视为无意义分组 -
<nav></nav>、<aside></aside>、<footer></footer>不强制要求标题，但若包含，需符合嵌套层级
忽略这点，会导致屏幕阅读器无法按标题跳转，也会影响 SEO 内容权重分配。
