figure 和 figcaption 仅用于自包含、可独立引用的语义单元，如学术图表、代码截图等；figcaption 必须为 figure 的首或尾子元素；alt 描述图像内容，figcaption 解释其意义；非独立图文不得滥用。

figure 和 figcaption 不是用来“给图加个说明文字”的样式工具，而是明确告诉浏览器、搜索引擎和读屏软件：“这张图和这段文字是一个独立、可引用的语义单元”。用错地方，反而会让读屏器跳过说明、SEO 丢失图文关联、甚至导致布局意外偏移。

什么时候必须用 figure + figcaption？

只在内容满足「自包含 + 可脱离上下文存在」时才用。比如：

• 学术论文里的折线图，配标题“图3：2023年用户留存率趋势”
• 代码块截图，配说明“useEffect 的清理函数执行时机”
• 产品后台界面截图，标注“图1：权限配置模块布局”
• 历史资料插图，注明“来源：1947年《申报》扫描件”

纯装饰图、轮播图、正文内无标题的配图（如“上图展示了操作流程”这种泛泛而谈），不该塞进 figure —— 它们不属于独立内容单元。

figcaption 必须是 figure 的第一个或最后一个子元素

这是 W3C 强制规范，不是建议。浏览器和读屏器靠这个位置判断归属关系。中间插一个 <button> 或 <p>，语义就断了。

正确写法只有两种：

<figure>
  <figcaption>图2：API 响应结构示例</figcaption>
  <img src="api-response.png" alt="JSON 格式响应体截图">
</figure>

或

<figure>
  <img src="api-response.png" alt="JSON 格式响应体截图">
  <figcaption>图2：API 响应结构示例</figcaption>
</figure>

别为了视觉顺序硬改 HTML 结构。如果设计要求标题在上、说明在下，但语义上说明更重要，用 CSS 的 flex-direction: column-reverse 控制渲染流，保持 HTML 合规。

alt 和 figcaption 的分工不能混淆

alt 属性描述图像「内容本身」（供盲人理解图里有什么），figcaption 解释图像「意义或上下文」（为什么放这张图、它代表什么）。

• 错：<img alt="后台管理界面" src="..."><figcaption>图1：后台管理界面布局</figcaption>（alt 和 figcaption 重复，且 alt 没讲清内容）
• 对：<img alt="左侧导航栏含‘用户管理’‘角色配置’等菜单项，主区域显示表格与搜索框"><figcaption>图1：后台管理界面布局</figcaption>

删掉整个 figure，文档主干逻辑不能断。如果删了图+说明后，正文变得难以理解，说明它本不该用 figure —— 那段说明可能属于正文的一部分，该写进段落里。

最容易被忽略的是「自包含性」判断。很多人只盯着「有图有字」就套 figure，结果把语义搞混。真正关键的不是排版效果，而是你是否在向机器声明：“这一小块，可以单独被引用、分享、索引”。