<main>必须全局唯一且不得含广告或导航，因其是屏幕阅读器“M键直达”的唯一语义锚点；多个或混入非核心内容会导致跳转失效、可访问性崩溃。
main 必须全局唯一，且不能包裹导航、广告或页脚；否则屏幕阅读器“M键跳转”直接失效——这不是警告，是可复现的崩溃点。
为什么 main 多一个或混进广告就出事
辅助技术（如 NVDA、VoiceOver）把 main 当作页面的语义锚点：用户按 M 键，工具会跳过所有 nav、header、aside，直抵 main 内容起始。但规范明确要求：全 DOM 树中只能有一个 main，且它必须代表“用户当前最需要操作/阅读的核心内容”。
常见崩坏场景：
- Next.js 布局组件里写了一个
main，子页面又套一个——浏览器通常只认第一个，第二个被忽略；用户从首页跳进详情页，M 键仍停在旧位置 - 微前端子应用在
iframe中自行声明main，脱离主文档上下文，辅助技术无法将其纳入整体可访问性树 - 把顶部 banner、左侧菜单、广告位全塞进同一个
main，导致“主要内容”被稀释，读屏工具播报时堆砌无关信息，用户被迫听完整段噪音才能定位表单
section 和 article 不是 div 的高阶替代品
它们不解决布局问题，只解决“文档大纲（outline）”和“内容可分发性”。滥用会导致屏幕阅读器导航节点爆炸式增长，反而更难定位。
立即学习“前端免费学习笔记（深入）”；
判断依据极简：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
section必须自带<h2>–<h6>标题；没标题？用div -
article要能独立存在：删掉周围所有内容后仍语义完整；能被 RSS 抓取、邮件推送、聚合页引用；否则别硬套 - 错误示例：
<section><p>欢迎关注我们</p></section>——无标题、不可分发、无结构意义，纯属污染大纲
嵌套在 div 里真不影响可访问性？看标签类型
对 header、footer、nav、main 这类块级语义标签，被 div 包裹一般无害——辅助技术仍能识别其角色，DOM 中语义未丢失。
但以下两类标签绝不允许随意嵌套：
-
ul/ol：子元素只能是li；中间插div或span→ HTML 无效 → 浏览器降级解析 → 屏幕阅读器可能跳过整段列表，或把div当成空项播报 -
table：只接受thead、tbody、tr、td等表格专用子元素；用div包tr或往td里塞section→ 表格语义断裂 → 读屏工具无法构建正确行列关系，数据表格彻底不可读
标题层级断裂比不用语义标签更伤可访问性
很多团队花力气替换了 div，却在 h1–h6 上翻车：页面从 h2 开始、main 外堆了三个 h1、产品页小节用了 h3 但主内容还没出现 h2。
后果是：屏幕阅读器生成的文档大纲（outline）完全错乱。用户依赖大纲快速跳转，而断裂的层级会让“下一级标题”键失效，或跳到意料之外的位置。
实操底线：
- 每个页面有且仅有一个
h1（通常是header里的站点名或页面主标题） -
main内部标题必须严格递进：主内容用h1或h2，章节用h2/h3，禁止跨级（如h2后直接h5） - 用浏览器 DevTools 的 Accessibility 面板实时检查 outline，别只靠肉眼
真正难的不是记住哪些标签该用，而是每次写完都问一句：这个结构，能让一个看不见屏幕的人，在不听完整页的前提下，三秒内定位到他要的内容吗？
