figure标签用于标识可抽离、可编号、可独立理解的语义单元，适用前提是配图删除后正文仍逻辑自洽；figcaption须为figure直接子元素且与alt各司其职，css不可破坏dom顺序与语义结构。
figure 标签不是“给配图加标题”的样式工具，而是明确告诉浏览器和读屏器：“这部分图文是一个可抽离、可编号、可独立理解的语义单元”——用错就等于把图注从上下文中剥离，辅助技术可能直接跳过说明文字。
figure 该不该用？先看配图是否满足「可抽离性」
技术文章里一张图能不能套 figure，不取决于它有没有图，而取决于删掉它后正文是否依然逻辑自洽：
- ✅ 适用：
<pre class="brush:php;toolbar:false;"><code>fetch()</code></pre>截图 +figcaption注明“图5：错误响应结构（HTTP 401）”，这张截图放进附录也不影响主文阅读 - ✅ 适用：系统架构 SVG 图 +
figcaption写“图2.1：微服务间 gRPC 调用链路”，移走后正文仍能说清模块职责 - ❌ 不适用：段落中一句“如图所示，点击按钮后弹出确认框”，配一张局部 UI 截图——图是句子的一部分，删掉句子就断了
- ❌ 不适用：文章顶部 banner 图、侧边栏产品 logo、代码块旁的小图标——它们是装饰或交互元素，不是可引用图元
figcaption 必须是第一个或最后一个直接子元素
DOM 顺序决定读屏器播报流。写在中间、或包在 <div> 里，都会导致语义断裂：
<ul>
<li>✅ 正确：<code><figure><figcaption>图3：Redis 缓存穿透防护流程</figcaption><img src="flow.png" alt="流程图：布隆过滤器+空值缓存"></figure>
<figure><img src="flow.png" alt="流程图：布隆过滤器+空值缓存"><figcaption>图3：Redis 缓存穿透防护流程</figcaption></figure>
<figure><img><p class="caption">图3...</p></figure> —— p 不是 figcaption，读屏器无法关联<figure><img><div><figcaption>...</figcaption></div></figure> —— figcaption 必须是 figure 的**直接子元素**alt 和 figcaption 各司其职，不能互换或省略
两者共存是硬性要求，且分工清晰：
-
alt是图像缺失时的简短替代（≤125 字符），面向无图环境；例如：alt="UML 序列图：用户登录时 JWT 验证与刷新流程" -
figcaption是图元的上下文说明，面向所有用户；例如：figcaption="图4：JWT 过期后自动刷新机制，避免用户中断操作（含 refresh_token 有效期 7 天）" - ❌ 不要写：
alt="图4：JWT 过期后自动刷新机制..."—— 把figcaption内容塞进alt，既冗余又破坏可访问性 - ❌ 不要省略
alt：即使有figcaption，<img>也必须带alt，否则图像加载失败时无 fallback 文字
响应式布局中 figure 的 CSS 控制边界
figure 默认只有上下 margin，视觉排版靠 CSS，但语义底线不能破：
- ✅ 推荐：
figure { display: flex; flex-direction: column; } @media (min-width: 768px) { figure { flex-direction: row; align-items: flex-start; } }—— DOM 顺序不变，仅改变视觉流向 - ✅ 可行：
figcaption { text-align: center; }或margin-top: 0.5em;控制间距 - ❌ 禁止：
figcaption { position: absolute; top: 0; left: 0; }—— 移出文档流后，读屏器大概率跳过 - ❌ 禁止：
figure { display: grid; } figcaption { order: -1; }——order改变视觉顺序但不改 DOM 顺序，读屏器仍按原序读，造成认知错位
最容易被忽略的是「可抽离性」这个判断前提——很多技术作者看到配图就本能套 figure，结果把段落内辅助说明的截图也编了号，反而让读屏器反复播报“图X：如上所示”，而上下文根本没提“上图”。语义不是加了标签就成立，而是内容本身得站得住。
