必须用 figure + figcaption 仅当图（或代码块、图表、引用）具备「可抽离性」：删掉不影响正文逻辑，挪至附录/侧栏/打印页时 figcaption 仍能独立准确描述；figcaption 必须为 figure 直接子元素，且与 alt 属性分工明确、不可互换或省略。
用 figure 和 figcaption，不是 div + p，也不是仅靠 CSS 模拟。
什么时候必须用 figure + figcaption
只在图片（或代码块、图表、引用）满足「可抽离性」时才用：删掉它，正文主干逻辑依然完整；挪到附录、侧栏或打印页，figcaption 仍能准确描述它。
- ✅ 适用：
fetch()错误响应截图 +figcaption写“图5: 错误响应结构（HTTP 401）” - ✅ 适用：系统架构 SVG 图 +
figcaption写“图2.1: 微服务间 gRPC 调用链路” - ❌ 不适用：段落中一句“如图所示，点击按钮后弹出确认框”，配一张局部 UI 截图——图是句子的一部分，删掉句子就断了
- ❌ 不适用：文章顶部 banner 图、侧边栏产品 logo、代码块旁的小图标——它们是装饰或交互元素，不是可引用图元
figcaption 必须是 figure 的直接子元素
DOM 顺序决定读屏器播报流。写在中间、或包在 div 里，都会导致语义断裂。
- ✅ 正确：
<figure><img><figcaption>图1: …</figcaption></figure> - ❌ 错误：
<figure><img><div><figcaption>…</figcaption></div></figure>——figcaption不是直接子元素 - ❌ 错误：
<figure><img><p>图1: …</p></figure>——p不是figcaption，读屏器无法关联
alt 和 figcaption 各司其职，不能互换或省略
两者共存是硬性要求，且分工清晰：
立即学习“前端免费学习笔记（深入）”；
- ❌ 不要写：
<img alt="后台管理界面"><figcaption>图1: 后台管理界面布局</figcaption>——alt太笼统，figcaption没补充新信息 - ✅ 对：
<img alt="左侧导航栏含‘用户管理’‘角色配置’等菜单项，主区域显示带搜索框的用户列表表格"><figcaption>图1: 权限管理模块界面布局</figcaption>——alt讲清内容，figcaption点明模块归属与用途 - ⚠️ 注意：
alt=""表示图纯装饰，此时绝不能加figcaption—— 否则语义矛盾 - ⚠️ 最容易被忽略的是：
figcaption中写“上图”“左侧示意图”这类上下文依赖词。figure 内容可能被 CSS 移到侧边栏或附录，标题必须自包含、不依赖位置
真正难的不是写对标签，而是判断这张图是否真的「可抽离」——很多人把 figure 当成“带标题的图片容器”来用，结果语义错位，读屏器跳过说明，SEO 也收不到有效信号。
