<main>必须且只能作为<body>的直接子元素，否则会丧失语义身份，导致可访问性、SEO和屏幕阅读器识别失效；<article>强调独立复用，<section>强调逻辑归属；<header>/<footer>是区块级而非页面级语义；标题层级须严格对应嵌套关系。
<main></main> 必须且只能出现一次，且必须是 的直接子元素——这是语义化结构的硬性底线，绕不开，也妥协不了。
为什么 <main></main> 不能嵌套在 <div> 或 <code><section></section> 里
浏览器和辅助技术（如 NVDA、VoiceOver）靠标签名识别 landmark 区域。<main></main> 是 ARIA 定义的 main role 的原生映射，一旦被包裹在 <div class="wrapper"> 或 <code><section></section> 中，它就降级为普通内容节点，失去“页面主体”这一语义身份。
常见错误现象包括：
- Lighthouse 报告 “
Multiple main landmarks” 或 “Main landmark not found” - 屏幕阅读器跳过
<main></main>，或把它读作“section”而非“main” - SEO 工具无法准确提取核心内容区块，影响摘要生成与排名权重分配
正确写法只有一种：<header>…</header><main>…</main><footer>…</footer>。中间不能插任何非语义容器。
立即学习“前端免费学习笔记（深入）”；
<article></article> 和 <section></section> 到底怎么选
两者都用于分组内容，但语义意图完全不同：一个强调“可独立复用”，一个强调“逻辑归属”。选错会导致大纲混乱、可访问性下降。
<article></article> 适用场景：
- 博客文章、新闻条目、论坛帖子（能单独 RSS 订阅或转发）
- 卡片式内容单元（如产品卡片、用户评价），自带完整标题与元信息
- 嵌套使用合理：
<main><article><header><h2>标题</h2> <time datetime="2026-04-29">…</time></header>…</article></main>
<section></section> 适用场景：
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 同一主题下的多个子模块，如“功能介绍”“技术参数”“用户反馈”，必须配
<h2></h2>–<h6></h6> - 不能脱离上下文存在——删掉父级
<main></main>或<article></article>，它就失去意义 - 反例：
<section class="grid-cols-3"></section>—— 纯布局用途，该用<div> <h3> <code><header></header>和<footer></footer>可以多次出现，但有隐含规则它们不是“页面顶部/底部”的视觉定位标签，而是“区块头部/尾部”的语义角色。一个
<article></article>内部完全可以有自己的<header></header>（含<h2></h2>和<time></time>），一个<section></section>也能带<footer></footer>（如“本节数据来源”）。但要注意两个关键约束：
-
<header></header>不能作为<main></main>的子元素再包一层<div> —— 这会破坏 sectioning root 层级，让大纲生成器误判 <li> <code><footer></footer>出现在<article></article>末尾时，不应包含全站版权信息（那是级<footer></footer>的事） - 每个
<article></article>或<section></section>应从<h2></h2>开始（<h1></h1>理论上只属于整个页面，实际中常由 CMS 控制） - 子章节用
<h3></h3>，子子章节用<h4></h4>，禁止跳跃（如<h2></h2>后直接<h5></h5>） - 不要用
<h1></h1>做 logo 文字 —— 那是<header></header>里的<img alt="品牌名">或<span></span>的事
典型安全结构：
<article><header><h2>标题</h2></header><p>正文…</p> <footer><small>作者：张三</small></footer></article>标题层级（
<h1></h1>–<h6></h6>）不是样式开关，是结构锚点很多开发者用
<h2></h2>仅因为“看起来比<p></p>大”，这会让整个语义骨架坍塌。标题层级必须严格对应内容嵌套关系。核心原则：
工具验证建议：用浏览器扩展 “HeadingsMap” 或 Lighthouse 的 “Document structure” 审计项，一眼看出是否断裂或越级。
真正难的不是记住每个标签怎么写，而是每次敲下
<div> 前，先问一句：这个容器有没有不可替代的语义？如果没有，它就不该存在。</div> -
