、、三个标签直接决定屏幕阅读器的阅读起点：缺失或嵌套错误会导致用户需手动按键12次以上才能到达正文，必须确保唯一为直接子元素、每个以开头、内含标题或。
为什么、、三个标签直接决定阅读起点
页面加载后，屏幕阅读器不会从第一行HTML开始逐字读，而是先找语义锚点：它默认跳转到
常见错误现象：
<div class="main-wrapper"> 替代 <code><main></main>，导致辅助工具无法识别主内容边界- 多个
<main></main>并存（如 SSR 框架中布局组件和页面组件各 render 一个） -
<article></article>里没配<h2></h2>或更高级标题，屏幕阅读器报“无标题内容”，用户拒绝继续听 - 检查 DOM 中是否真有且仅有一个
<main></main>，它必须是的直接子元素（不能被<div class="container"> 包着） <li>每个 <code><article></article>开头必须带<h2></h2>或更高层级标题；若内容本身无标题（如纯评论流），改用<section></section> -
<header></header>不必只出现在页面顶部——每篇<article></article>内也可有独立<header></header>，但里面至少含一个<h2></h2>或<time></time> - 描述一个问题 → 单独一个
<p></p> - 列出三个解决步骤 → 用
<ol></ol>，每步一个<li>，别用<p></p>模拟编号 - 注意事项区块 → 用
<aside></aside>包裹，内部可含多个<p></p>，但每个仍需表达完整语义单元 -
<article></article>内部的标题应从<h2></h2>开始，而非复用外层<h1></h1>—— 它是独立内容单元，需自成大纲 -
<section></section>必须带标题（<h2></h2>–<h6></h6>），否则语义失效；可用<h2 class="visually-hidden"></h2>隐藏视觉样式但保留读屏支持 - 用
<hgroup></hgroup>包裹主副标题已废弃，现代写法是<h2>主标题</h2> <p class="subtitle">副标题</p>，并给<p></p>加aria-hidden="true"
实操建议：
段落节奏失控的真正元凶不是CSS，而是
滥用
连续写 <p></p>
<p></p> 看似“留白”，实则把空段落塞进无障碍树，屏幕阅读器会念出“段落”“段落”两次；而把整篇操作指南硬塞进一个 <p></p>，会让读屏工具当成一句话播完，中间不换气。
正确做法取决于内容语义：
性能影响：过度拆分 <p></p> 会增加 DOM 节点数，对低端设备渲染帧率有轻微拖累（实测 >200 个 <p></p> 时首屏绘制延迟约 80ms）；但比错用 <div> 好——后者完全切断语义链。
<h3>标题层级断裂比不用语义标签更伤阅读流</h3>
<p>用户扫读时依赖标题建立心理地图：<code><h1></h1> 是目的地，<h2></h2> 是路标，<h3></h3> 是岔路口。一旦跳级（比如 <h2></h2> 后直接 <h4></h4>），屏幕阅读器会跳过整个子节，用户根本不知道下面还有内容。
容易被忽略的细节：
图片、引用、代码块这些非文本内容怎么参与阅读流
它们不是阅读的“中断项”，而是阅读节奏的调节器。但若没用对语义标签，就会变成障碍：纯 <img> 没 alt，读屏工具卡住；引用块用 <blockquote></blockquote> 却没 <cite></cite>，用户不知道来源；代码示例塞在 <pre class="brush:php;toolbar:false;"><code></code> 外还包一层 <code><div>，导致语法高亮插件失效。
<p>关键参数差异：</p>
<ul>
<li>
<code><figure></figure></code> 必须同时含 <code><figcaption></figcaption></code> 才完整；若只有图无说明，改用普通 <code><img></code> + <code>alt</code>
</li>
<li>
<code><blockquote></blockquote></code> 的 <code>cite</code> 属性值必须是有效 URL，否则不如删掉；来源文字放 <code><footer></footer></code> 内更可控</li>
<li><code><pre class="brush:php;toolbar:false;"><code></code> 中的 <code>language-xxx</code> 类名（如 <code>language-js</code>）要与高亮库约定一致，否则 <code>line-height</code> 和 <code>tab-size</code> 会错乱</pre>
最常被忽略的是：所有这些元素都必须出现在正确的语义容器里。<figure></figure> 可以放在 <article></article> 内任意位置，但不能塞进 <header></header> 或 <footer></footer> —— 它们不是“页面级装饰”，而是内容的一部分。
