先记住这个答案
正确用法是将图片、代码或图表等内容放入 <figure>，并在其中放置 <figcaption>（第一个或最后一个子元素）作为标题。与 div 加文本不同，<figure> 和 <figcaption> 提供了一个不可分割的语义单元，后者为 <figure> 提供可访问名称。这种关联不仅有助于屏幕阅读器用户理解图表，还允许内容独立移动而不影响文档主流程，因为它的语义是自足的。
- figcaption必须是figure的第一个或最后一个子元素
- figcaption为figure提供无障碍名称
- 它表示独立单元，可移动而不影响主流程
figure的语义关联机制
HTML 规范将 <figure> 定义为独立的内容单元，通常是图片、图解、代码片段或引用，该单元可以在文档主流程中引用，同时可移动到附录而不影响叙述连贯性。<figcaption> 作为其内嵌标题，必须位于 <figure> 的开头或结尾，且一个 <figure> 中只推荐一个标题。这种位置限制确保了标题与内容在 DOM 结构上有固定的父子关系，使解析器能明确标题归属。
更关键的机制是 <figcaption> 为父级 <figure> 提供了无障碍名称（accessible name）。当辅助技术（如屏幕阅读器）遇到 <figure> 时，它会将 <figcaption> 的文本内容作为该图形的可编程标签。例如，屏幕阅读器用户会听到“图：大象在日落”作为该图形的名称，同时也会读出图片的 alt 文本，这实现了内容与标题在无障碍树中的关联。因此，结构上的语义映射远胜于视觉上的邻近摆放。
文档中包含图表与代码片段时的组织
场景：撰写一篇教程文章，文中包含一张数据图（<img>）和一段代码示例（<pre>），两者都需要标题。输入为纯 HTML，要求屏幕阅读器用户能明确每个内容的标题，且文章排版允许将插图和代码移至附录。经考虑，使用 <article> 作为主内容容器，内部为插图和代码各创建一个 <figure>，并在每个 <figure> 中分别插入带 <figcaption> 的标题，如“图1：季度销售趋势”和“代码1：最小回归函数”。这样调整后，无论内容在 DOM 中的位置如何变化，标题与内容的关联都持续有效。
对比使用 <div> 加 <p> 的方案：由于 <div> 没有内在语义，辅助技术无法知道哪个文本是哪个图片的标题，除非额外添加 ARIA 角色 figure 并通过 aria-labelledby 手动关联标题。但这会增加属性维护和出错风险，而且依赖的是辅助 API 而非 HTML 原生结构。因此本场景选择原生 <figure> 和 <figcaption> 可避免无谓的 ARIA 依赖，且兼容性更好。最终结果：一篇标记正确的文章，即便用户使用阅读器，也能准确说出每个图表的标题，且样式独立。
何时不该使用figure
尽管 <figure> 很灵活，但它仅用于“独立”内容单元。若图片只是装饰性点缀或与文段有强关联、不能被移除而不影响理解（如直接展示一个人物头像），则不应将其放入 <figure>。此外，若内容仅有标题而无主体内容，或标题与一段普通文字绑定，则并非独立图形，应使用常规标题与段落。典型失败：将一组紧密相关、非独立的统计图仅作为辅助说明放在章节内，使用 <figure> 会误导用户认为可整体移动。
另一个边界是嵌套限制：规范规定 <figcaption> 必须是 <figure> 的第一个或最后一个子元素，若你把它放在中间，其合法性会存在问题且无法提供正确的标题关联。同时，当 <figure> 内已有 <figcaption> 时，不能随意为其添加 ARIA 角色，因为规范禁止。此时维护者若尝试添加 role 以支持旧浏览器，反而会破坏可访问性。因此，需约束 DOM 结构，避免嵌套额外的 <figure> 或放置多个 <figcaption>。
容易答错的地方
- figcaption 可以放在 figure 内任意位置
- 错误。规范要求
figcaption必须是第一个或最后一个子元素，否则虽然浏览器仍会渲染，但它的语义角色将不明确，可能被忽略，导致无法为图形提供标题名称。始终将其置于开头或结尾。 - figure 必须包含图片标签
- 错误。
figure不只是图片容器，它可以是代码片段、引用、诗歌甚至公式。只要内容是独立单元且有标题，就可使用figure。它适用于多种类型内容，语法灵活。
面试官还会怎么问？
figcaption 中的标题与图片的 alt 有何关系？
二者独立。alt 描述图片内容本身，figcaption 是图表标题。屏幕阅读器会按照 DOM 顺序朗读，标题可能在图片之前或之后，取决于 figcaption 的位置。它们可并存，但若标题重复了图片内容，建议简化 alt，避免冗余。
当 figure 没有 figcaption 时，其角色如何？
若 <figure> 内无 <figcaption>，它仍代表独立内容，但不会自动获得标题作为可访问名称。它在无障碍树中仍具有 figure 角色，只是缺少可由 figcaption 提供的标题文本。此时仍可考虑通过 ARIA 属性提供名称，但使用原生 figcaption 更简洁、语义也更明确。
figure 能否嵌套在其他 figure 内？
HTML 规范允许 <figure> 内的内容包含流式内容，因此技术上讲可以嵌套，但通常不推荐，原因是会产生歧义。若确有嵌套需要，必须确保每个 <figure> 只含一个 <figcaption>，否则所有标题关联将混乱。
参考资料
示例用于理解所注明的运行环境与边界；延伸学习可结合原文中的更多案例。