必须是的直接子元素且全局唯一，否则失去landmark语义，导致屏幕阅读器无法跳转、seo提取失败、lighthouse报错；被包裹即退化为普通容器。
语义化标签不是“写了就有效”，而是必须按浏览器和辅助技术的解析规则来用；写错位置、滥用、漏掉必要属性，效果等于零。
为什么 <main></main> 放在 <div class="wrapper"> 里就失效了
<p>浏览器和屏幕阅读器依赖 DOM 层级判断 <code><main></main> 是否为“页面主体内容起始点”。一旦被无语义容器包裹，它就失去地标（landmark）意义——NVDA 不会把它列为可跳转区域，Googlebot 也难准确提取主内容区块。
-
<main></main> 必须是
- 常见错误：
<div class="wrapper"><main>...</main></div> → 这个 <main></main> 被视为普通嵌套容器
- SSR 场景下尤其注意：React/Vue 的根容器（如
<div id="root">）不能包住 <code><main></main>，否则语义链断裂
<nav></nav> 和 <div role="navigation"> 在键盘操作上差在哪
<p>原生 <code><nav></nav> 自带焦点管理与快捷键支持；<div role="navigation"> 只是告诉 AT “这是导航”，但不提供任何交互能力。
<ul>
<li>
<code><nav></nav> 默认可被 Tab 键聚焦（即使没设 tabindex），VoiceOver 用户可用 Ctrl+Option+U 直接唤出地标菜单并跳转
<div role="navigation"> 没有默认 <code>tabindex，需手动加 tabindex="0" 才能进 Tab 流；空格/回车不会触发任何行为
- IE11 + JAWS 组合可能完全忽略
role="navigation"，但一定能识别 <nav></nav>
- 多个导航区必须区分：
<nav aria-label="主导航"></nav>、<nav aria-label="面包屑"></nav>，否则 VoiceOver 会把它们混为一类
<section></section> 不是 <div> 的语义换皮，它需要标题才成立
<p>W3C 明确规定：<code><section></section> 应代表一个“有主题的、可独立分发的内容单元”，而主题由其内部的 <h1>–<h6></h6>
</h1> 体现。没有标题的 <section></section>，会被部分 AT 当作普通分组跳过。
- 正确：
<section><h2>用户评论</h2>
<p>…</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML"><img
src="https://img.php.cn/upload/skill/000/000/081/178998486916110.jpg" alt="Doc To HTML" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML" class="overflowclass">Doc To HTML</a>
<p class="overflowclass">使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。</p>
</div>
<a rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div></section>
- 错误：
<section><div class="card">…</div></section> → 本质还是 DIV 汤
- 仪表盘中多个统计卡片，应优先用
<article></article>（每个卡片是独立信息单元），而非堆砌 <section></section>
-
<section></section> 不替代 <main></main>：一个页面只能有一个 <main></main>，但可以有多个 <section></section>
<label></label> 绑定失败的三个隐形原因
即使写了 <label for="email">邮箱</label><input id="email">，仍可能被跳过——问题常不在语法，而在执行细节。
- ID 含非法字符：
id="user-email@domain" 中的 @ 违反 HTML ID 规范，导致 for 失效；应改为 id="user_email"
- 动态渲染未同步：
input 是 React useState 生成的，但 id 值用了随机数，label 的 for 却没更新 → 必须保证两者 ID 字符串完全一致
- label 内容为空或纯空白：
<label for="email"> </label> 或 <label for="email"></label>，某些移动端 VoiceOver 会直接忽略该 label
最容易被忽略的是：语义化不是“加了标签就完事”，而是整条链路要对齐——DOM 结构、ID 关联、ARIA 补充、键盘流、AT 响应，缺一不可。一个 <nav></nav> 标签写对了位置，但里面全是 <div onclick>，照样造出一座可访问性高墙。</div>
<main></main> 必须是 <div class="wrapper"><main>...</main></div> → 这个 <main></main> 被视为普通嵌套容器<div id="root">）不能包住 <code><main></main>，否则语义链断裂
<nav></nav> 和 <div role="navigation"> 在键盘操作上差在哪
<p>原生 <code><nav></nav> 自带焦点管理与快捷键支持；<div role="navigation"> 只是告诉 AT “这是导航”，但不提供任何交互能力。
<ul>
<li>
<code><nav></nav> 默认可被 Tab 键聚焦（即使没设 tabindex），VoiceOver 用户可用 Ctrl+Option+U 直接唤出地标菜单并跳转
<div role="navigation"> 没有默认 <code>tabindex，需手动加 tabindex="0" 才能进 Tab 流；空格/回车不会触发任何行为
role="navigation"，但一定能识别 <nav></nav>
<nav aria-label="主导航"></nav>、<nav aria-label="面包屑"></nav>，否则 VoiceOver 会把它们混为一类
<section></section> 不是 <div> 的语义换皮，它需要标题才成立
<p>W3C 明确规定：<code><section></section> 应代表一个“有主题的、可独立分发的内容单元”，而主题由其内部的 <h1>–<h6></h6>
</h1> 体现。没有标题的 <section></section>，会被部分 AT 当作普通分组跳过。
- 正确：
<section><h2>用户评论</h2>
<p>…</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML"><img
src="https://img.php.cn/upload/skill/000/000/081/178998486916110.jpg" alt="Doc To HTML" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML" class="overflowclass">Doc To HTML</a>
<p class="overflowclass">使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。</p>
</div>
<a rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div></section>
- 错误：
<section><div class="card">…</div></section> → 本质还是 DIV 汤
- 仪表盘中多个统计卡片，应优先用
<article></article>（每个卡片是独立信息单元），而非堆砌 <section></section>
-
<section></section> 不替代 <main></main>：一个页面只能有一个 <main></main>，但可以有多个 <section></section>
<label></label> 绑定失败的三个隐形原因
<section><h2>用户评论</h2>
<p>…</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML"><img
src="https://img.php.cn/upload/skill/000/000/081/178998486916110.jpg" alt="Doc To HTML" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML" class="overflowclass">Doc To HTML</a>
<p class="overflowclass">使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。</p>
</div>
<a rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div></section>
<section><div class="card">…</div></section> → 本质还是 DIV 汤<article></article>（每个卡片是独立信息单元），而非堆砌 <section></section>
<section></section> 不替代 <main></main>：一个页面只能有一个 <main></main>，但可以有多个 <section></section>
<label></label> 绑定失败的三个隐形原因即使写了 <label for="email">邮箱</label><input id="email">，仍可能被跳过——问题常不在语法，而在执行细节。
- ID 含非法字符：
id="user-email@domain"中的@违反 HTML ID 规范，导致for失效；应改为id="user_email" - 动态渲染未同步：
input是 React useState 生成的，但id值用了随机数，label的for却没更新 → 必须保证两者 ID 字符串完全一致 - label 内容为空或纯空白：
<label for="email"> </label>或<label for="email"></label>，某些移动端 VoiceOver 会直接忽略该 label
最容易被忽略的是：语义化不是“加了标签就完事”，而是整条链路要对齐——DOM 结构、ID 关联、ARIA 补充、键盘流、AT 响应，缺一不可。一个 <nav></nav> 标签写对了位置，但里面全是 <div onclick>，照样造出一座可访问性高墙。</div>
