先记住这个答案
<figure> 适合把图片、图表或代码连同说明作为一个可独立引用的单元；<figcaption> 是这个单元的标题或解释。若正文写“见下图”，把图和图题放在一起能保持语义关联。普通装饰图旁边的段落不必自动套进去，关键看它离开当前段落后是否仍构成完整的内容单位。
figure表示可独立引用的单元figcaption是整体说明alt传达图像关键信息- 装饰图不必强套
figure
文章里的瀑布图和图题
技术文章里放一张性能瀑布图，下方解释“图 2：首屏资源下载顺序”。把图片和说明包在 <figure> 中，<figcaption> 写图题，读者和辅助技术更容易把图与说明对应起来。<img alt> 仍应描述图中的关键信息；图题说明这张图是什么，不能自动代替图像替代文本。若图只是装饰，甚至可能用空 alt，而无需额外的 figure。
<figure>
<img src="/waterfall.png"
alt="首屏脚本下载晚于关键样式，导致渲染延迟">
<figcaption>图 2：首屏资源下载顺序</figcaption>
</figure>
<!-- 图题说明整体，alt 传达图像关键信息 -->figure 可以脱离主叙述而被引用，例如正文写“见图 2”；这与单纯用 div 把图片和文字排在一起的视觉效果不同。
示例的 <figcaption> 说明“这张图是什么”，而 alt 说“看不见图时最该知道什么”。如果图中显示脚本下载晚于关键样式，那么只写“资源瀑布图”作为 alt 会漏掉结论；如果正文已经紧挨着完整解释趋势，alt 也不必把每个时间戳重复一遍。图题、替代文本和正文应相互补足，避免三处写完全相同的一句话。
图题与替代文本各司其职
figcaption 是这一整体的说明，通常只放一个，并作为 figure 的首个或最后一个子元素。图像的 alt 是在图片无法呈现或辅助技术读取时传达图像内容的替代文字。复杂图表可能还需要正文或附近更完整的数据说明，不能只靠一句图题。
图题不能自动替代图片的 alt。一张展示“各月成交量”的柱状图，figcaption 可写图表标题和数据来源，alt 则应概括图里最关键的趋势；完整数据和解释再放正文或表格。若两处都只写“成交量图”，看不到图片的用户仍得不到结论。把图作为独立单元引用，不代表可以省掉替代信息。
容易答错的地方
- 以为每张图片都必须放
figure - 装饰图标、正文中的普通图片不一定构成可独立引用的单元。
- 把图题当成
alt的替代品 - 图题标识整体，替代文字描述图片内容和作用，二者服务不同情境。
面试官还会怎么问？
代码片段也能用 figure 吗？
可以。若代码示例可独立引用，并有对应标题，figure 与 figcaption 同样适用。
figcaption 可以有多个吗？
一个 figure 通常只应有一个 figcaption，位置在开头或结尾。
复杂图表一句 alt 写不下怎么办？
用简短 alt 概括重点，再在邻近正文或数据表中提供详细信息。
参考资料
示例用于理解所注明的运行环境与边界；延伸学习可结合原文中的更多案例。