<main>必须是<body>的直接子元素，否则电子政务系统依据国标GB/T 39576—2020判定为结构失效；因其依赖原生landmark解析，一旦被任何容器包裹，读屏软件跳过、检测工具报错“main landmark not found”，PDF导出丢失主内容标识。
main 必须是 body 的直接子元素，否则政务系统直接判为结构失效
电子政务场景下，<main></main>被任何容器标签（如 <div class="wrapper">、<code><section></section>、甚至 SSR 框架的 layout 组件）包裹，都会导致国标 GB/T 39576—2020 合规检测失败。这不是警告，而是硬性否决项。
原因很实在：读屏软件（NVDA、Windows Narrator）、信创终端浏览器插件、Lighthouse 和中国信通院无障碍检测工具，全部依赖原生 landmark 解析。一旦 <main></main> 不在 下一级，它们就“看不见”主内容区。
- 典型错误：Flex 居中时加了
<div class="container"> 包住 <code><header></header>+<main></main>+<footer></footer> - SSR 框架（如 Nuxt、Umi）默认 layout 组件会套一层
<div>，必须手动剥离或用 <code>client-only绕过 - CMS 模板里写成
<section><main>...</main></section>—— 即使视觉正常，也 100% 失效 - 用 Chrome DevTools 的「Accessibility」面板 → 「Landmarks」视图，确认
<main></main>、<nav></nav>、<aside></aside>是否被识别为对应 role - 运行
axe.run()或 Lighthouse 的 Accessibility 报告，重点看 “Heading levels should only increase by one” 和 “mainlandmark is not unique” 类错误 - 对动态渲染内容（React/Vue 组件），必须用 Puppeteer 预渲染后检查 DOM，否则静态解析器看不到 JS 注入的语义结构
-
<section></section>必须自带明确主题，且应有<h2>–<h6>标题；没有标题的，优先用<div> <li> <code><article></article>代表可独立分发、复用的内容单元（如一篇博客、一条新闻、一个用户评论），不是“看起来像卡片”就该用 -
<aside></aside>只用于与主内容强关联的辅助信息（如“相关文章”、“作者简介”），广告位、无关推荐请用<div role="complementary"> 显式声明 <h3>自动化检查必须覆盖动态渲染与第三方组件干扰</h3> <p>纯静态 HTML 分析容易漏掉三类高频问题：JS 动态插入的标题跳级、第三方 UI 库（如 Ant Design、Element Plus）生成的非标准标签、CMS 插件注入的无语义 <code><div> 堆砌。 <p>解决方案：</p> <ul> <li>爬取阶段用 Puppeteer 启动无头 Chromium，等待 <code>DOMContentLoaded+setTimeout(500)确保 JS 渲染完成再提取 DOM - 分析阶段对第三方组件加白名单规则（如忽略
ant-table内部结构），但强制校验其外层容器是否包裹在<section></section>或<article></article>中 - 对 CMS 输出模板做预处理：正则匹配并告警
<div class=".*?content.*?><main>这类嵌套模式
唯一合法结构只有：<body><header></header><main></main><footer></footer></body>
W3C 验证通过 ≠ 语义合规，必须交叉验证可访问性工具
很多页面跑通 W3C nu-validator，却在 axe-core 或 Lighthouse 的 “Accessibility” 审计里暴出一堆 landmark 缺失、标题跳级、<img alt="基于语义化检查的HTML代码质量合规化实战" > 缺 alt。因为 W3C 只管语法闭合与嵌套，不管语义是否真实生效。
立即学习“前端免费学习笔记（深入）”；
实操建议：
section 和 article 的误用比不用更危险
把 <section></section> 当 <div> 用，或者给每条列表项都套 <code><article></article>，反而破坏语义层级。搜索引擎和辅助技术会按主题独立性建模，错用等于主动混淆意图。
判断标准很简单：
真正难的不是写对第一个 <main></main>，而是确保它在 SSR、CSR、CMS、第三方组件混杂的生产环境中，始终裸露在 下一级——这个位置一旦被遮挡，所有语义就归零。
