必须是的直接子元素，否则失去landmark语义：浏览器和辅助技术依赖其位置识别主内容，包裹在或中会导致lighthouse报错、屏幕阅读器误读、seo权重失效。
HTML文档结构本身不能“增强”语义，只能“正确表达”语义——错用标签、嵌套失当或忽略隐含规则，语义立刻失效，甚至比用 这些标签的语义强度远高于视觉表现。滥用会导致辅助技术误判内容意图，甚至干扰 SEO 权重分配。 当原生语义标签无法覆盖真实交互逻辑（如 JS 控制的折叠面板、图标按钮、动态弹窗）时，才用 ARIA 显式声明角色、名称或关系。乱加反而破坏可访问性。 最容易被忽略的点是：语义有效性不取决于你用了什么标签，而取决于它在 DOM 中的位置、嵌套关系、内容匹配度，以及是否与 ARIA 协同得当。一个 <div> 更糟。
<h3>为什么<main>必须是的直接子元素</main>
</h3>
<p>浏览器和辅助技术（如 NVDA、VoiceOver）靠标签名 + DOM 位置识别 landmark 区域。<code><main></main> 映射 ARIA 的 role="main"，但这个映射只在它作为 直接子节点时才被激活。一旦被 <div class="wrapper"> 或 <code><section></section> 包裹，它就退化为普通容器。
<main></main>，或读作 “section” 而非 “main”<header></header><main></main><footer></footer>，中间不插任何非语义容器<main></main> 塞进 Bootstrap 的 <div class="container"> —— 视觉没问题，语义已崩
<h3>标题层级断裂比不用<h1>更危险</h1>
</h3>
<p>标题不是为了加粗变大，而是构建文档大纲（outline）。屏幕阅读器靠它生成导航树，搜索引擎靠它判断内容主次。跳级、重复或错位，会直接让辅助技术用户迷失上下文。</p>
<ul>
<li>错误现象：<code><h2></h2> 开头、<h1></h1> 缺失、<h3></h3> 出现在 <h2></h2> 之前、<h1></h1> 被 CSS display: none 隐藏却没加 aria-hidden="true"
<h1></h1>（代表页面主主题），<h2></h2> 分割主要板块（如“产品介绍”“客户评价”），<h3></h3> 描述子模块<h2></h2> 做 logo 文字——应为 <h1></h1> 或纯文本 + aria-label
nav、article、section 不是样式分组工具
<nav></nav> 隐含 role="navigation"，必须包含至少一个有效链接（href 不为空或有可聚焦的 <button></button>）；面包屑、页脚友情链接可各自用一个 <nav></nav>，但“登录/注册”按钮组不属于导航<article></article> 要求内容自包含：脱离当前页面仍能独立理解（如博客正文、新闻稿、用户评论），且通常需配 <h2></h2>–<h6></h6> 标题<section></section> 必须有主题，不是为“看起来像卡片”而用；FAQ 列表、参数说明、客户评价模块——必须带标题，否则语义等价于 <div>
<li>错误写法：<code><div><header></header></div> —— <div> 完全稀释了 <code><header></header> 的语义，爬虫和读屏器只认原生标签名
ARIA 是补救，不是装饰
role="dialog"、aria-labelledby（指向标题 ID）、aria-modal="true"
aria-label 或 aria-labelledby 提供操作意图，title 属性对屏幕阅读器不可靠<input> + <label for="xxx"></label> 的表单，再加 aria-labelledby 可能导致重复播报aria-hidden="true"：只用于视觉隐藏但不应被读屏器访问的内容；若隐藏的是 <h1></h1>，必须确认其语义是否真的不该暴露<main></main> 被包在 <div> 里，和一个没标题的 <code><article></article>，在辅助技术眼里都等于没写。
