必须为直接子元素，否则失去语义身份：浏览器和辅助技术依赖原生标签名识别 landmark，包裹在 或 中会导致 lighthouse 报错、屏幕阅读器误读、seo 权重失效；正确结构唯一，中间不可插入非语义容器。
<main></main>必须且只能作为的直接子元素，否则它就不是“主内容”，而是普通节点——所有可访问性、SEO 和大纲解析都会失效。
为什么<main></main>不能套在<div>或<code><section></section>里
浏览器和辅助技术（如 NVDA、VoiceOver）靠标签名识别 landmark 区域。<main></main>是 ARIA role="main" 的原生映射，一旦被包裹在<div class="container"></div>或<section></section>中，它就失去语义身份。
- Lighthouse 报告 “Main landmark not found” 或 “Multiple main landmarks”
- 屏幕阅读器跳过
<main></main>，或把它读作 “section” 而非 “main” - Google 无法准确提取核心内容区块，影响摘要生成与排名权重分配
正确结构只有一种：<header>...</header><main>...</main><footer>...</footer>。中间不能插任何非语义容器。
<article></article>和<section></section>别凭样式选，看能不能独立分发
区分依据不是“看起来像不像卡片”，而是内容能否脱离当前页面被单独引用、RSS 抓取或聚合展示。
-
<article></article>：博客正文、新闻稿、用户评论（含作者、时间、正文），能单独出现在聚合页；一个页面可有多个，但内部不能再嵌套<main></main> -
<section></section>：FAQ 列表、参数说明、客户评价模块——必须带<h2></h2>–<h6></h6>标题，否则语义等价于<div> <li>反例：<code><section class="carousel"></section>——轮播图是展示方式，不是主题分组，该用<div> <h3> <code><header></header>和<footer></footer>可以多次出现，但得有上下文它们不是“页面顶部/底部”的视觉定位标签，而是“区块头部/尾部”的语义角色。
- 一个
<article></article>内可以有自己的<header></header>（含<h2></h2>和<time datetime="2026-05-26"></time>） - 一个
<section></section>也能配<footer></footer>（如“本节数据来源”） - 错误写法：
<div class="header"><header>...</header></div>——<div>完全稀释了<code><header></header>的语义，爬虫和读屏器只认原生标签名<nav></nav>不是所有链接列表都配得上<nav></nav>隐含role="navigation"，意味着这是用户完成站点级任务的核心路径。滥用会导致屏幕阅读器播报冗余信息。- 适用：主导航栏、侧边栏主菜单、面包屑导航
- 不适用：文章末尾的“相关阅读”、社交图标链接、广告位中的跳转链接
- 检查方法：用 Chrome DevTools → Elements → Accessibility 面板，确认 computed role 是
navigation，且 name 可读（比如“主导航”）
最容易被忽略的是标题层级断裂和
<main></main>嵌套——这两处一错，整个语义结构就塌了半边。验证时别只看渲染效果，打开浏览器的“大纲视图”（Elements → Accessibility → Outline），一眼就能看出是否跳级、重复或缺失<h1></h1>。
- 一个
