1. HTML figure 标签到底有什么作用
在现代 HTML5 中，figure 标签被设计为一个自成一体的语义容器，用来承载与“自包含内容”相关的媒介和说明文字。它的核心功能是将图片、图表、代码块、视频等媒体与对应的文字注解组合在一起，从而让浏览器和辅助设备理解该媒体以及其表达的意义。
通过使用 figcaption 元素，figure 内的 caption 给出对内容的描述或注解，这对搜索引擎优化（SEO）和可访问性（a11y）都很重要。记住，figcaption 的角色是为图像或媒体提供文本说明，并且与之保持语义关联。
除了图片，figure 也可以包含视频、音频、SVG、甚至 iframe 嵌入的内容，并且可以带有一个或多个 graphics 与文本说明的组合。使用场景的扩展性是 figure 标签最显著的优势之一。下面给出一个简单的组合示例。
<figure><img src="example.jpg" alt="示例图像，描述性文本"><figcaption>示例图像的说明性文字，帮助理解图像的内容</figcaption>
</figure>2. 常见使用场景
2.1 将媒体与说明文本成对展示
这是最常见的场景：图片与说明文字以 figure+figcaption 组合呈现，确保图像的语义清晰、可替代信息完整，提升可访问性与 SEO。该模式也方便在不同屏幕尺寸下保持布局一致。
在设计博客图片组时，利用 figure 与 figcaption 的语义关系，可以让搜索引擎更好地理解页面的图像内容，进而提升图片的检索排名。
<figure><img src="diagram.png" alt="流程图的简要描述"><figcaption>流程图说明：从输入到输出的步骤与条件</figcaption>
</figure>2.2 结合多媒体的注释与说明
当博客中包含视频或音频时，将多媒体内容放在 figure 中，并通过 figcaption 提供背景信息，可以让读者在阅读中快速获取摘要信息，提升可用性。
在一些技术博客中，嵌入的视频示例常常采用 figure 包裹，并在 figcaption 中解释演示的要点、版本、限制等信息。
<figure><video controls><source src="tutorial.mp4" type="video/mp4">浏览器不支持 video 标签。</video><figcaption>演示：如何在真实项目中应用该技术，关键点与注意事项</figcaption>
</figure>2.3 图表、代码块与图解的组合
对于包含图表、算法示意或代码示例的段落，figure 提供一个统一的容器，将图片和代码块在视觉和语义上联系起来。
当页面需要可复用的模块时，figure 的分离性有助于复制、重用和改造，对 CMS 的模板化也有帮助。
<figure><img src="chart.svg" alt="图表标题及简要描述"><figcaption>图表 1.1：年度趋势的简要解读</figcaption>
</figure>3. 最佳实践
3.1 语义清晰与可访问性
优先使用 figure+figcaption 作为媒体的语义包装，确保屏幕阅读器可以连同图像的解释文本一起读取，提升无障碍性。
对于图像元素，仍需提供 有意义的 alt 属性，防止 figcaption 与 alt 文本二义性；二者应相辅相成而非重复。
<figure><img src="portrait.jpg" alt="人像的简短描述，便于屏幕阅读器识别"><figcaption>人像照片的详细说明：拍摄地点、人物和情境</figcaption>
</figure>3.2 响应式与性能优化
在移动端与桌面端都需要良好的加载体验时，结合 srcset、sizes 与 loading 属性，可以让 figure 内的媒体按需加载和显示尺寸。
一个典型实践是对图片使用 srcset / sizes，并开启 loading="lazy"，同时保留 figcaption 的稳定布局。
<figure><img src="image-800.jpg" srcset="image-400.jpg 400w, image-800.jpg 800w, image-1200.jpg 1200w"sizes="(max-width: 600px) 100vw, 600px" alt="示例图片" loading="lazy"><figcaption>描述性文字，解释图片内容与背景</figcaption>
</figure>3.3 结构与样式的分离
将媒体内容的布局与外观通过 CSS 管理，避免将样式写在 HTML 中，以保持 HTML 的语义性与可维护性。
为 figure 添加合适的可选属性或类名，如 class="media-figure"，有助于统一的样式和跨页面一致性。
<style>.media-figure { display: grid; gap: 8px; justify-items: center; }.media-figure img { max-width: 100%; height: auto; }
</style>