推荐使用+组合展示图片及说明，因其语义化强、可访问性高、结构清晰；表示自包含内容，为其唯一标题或说明，须嵌套其中且不可省略alt属性。
在 HTML 中，用 <figure></figure> 和 <figcaption></figcaption> 组合展示图片及说明，是语义化、可访问性高且结构清晰的标准做法。它比单纯用 <div> 包裹 <code><img alt="如何在 HTML 中利用 和 标签组合展示图片及说明" > + 文字更规范，浏览器和屏幕阅读器能自动识别这是“一个独立的图表内容及其标题”。
为什么推荐用 +
这两个标签专为图文关联内容设计：<figure></figure> 表示一段自包含的流内容（如图片、图表、代码块等），<figcaption></figcaption> 是它的标题或说明，必须作为 <figure></figure> 的第一个或最后一个子元素出现。这种结构对 SEO 友好，也便于未来添加 CSS 样式或 JavaScript 交互。
基础写法与必需结构
正确写法如下，注意顺序和嵌套关系：
<figure></figure>
<img src="photo.jpg" alt="一只在窗台晒太阳的橘猫">
<figcaption>图1：午后暖光中的日常</figcaption>
-
<figcaption></figcaption>必须在<figure></figure>内部，且只能出现一次 -
alt属性不能省略——它是图片内容的核心文字描述，<figcaption></figcaption>是补充性说明，两者作用不同 - 不支持自闭合写法，
<figure></figure>和<figcaption></figcaption>都必须有明确的开始与结束标签
多图并排时的实用处理
若要横向排列多个 <figure></figure>，直接让它们并排即可，无需额外包裹容器（除非需要整体控制）：
立即学习“前端免费学习笔记（深入）”；
<figure style="display: inline-block; margin: 8px;"></figure>
<img src="a.jpg" alt="山景">
<figcaption>远山如黛</figcaption><figure style="display: inline-block; margin: 8px;"></figure>
<img src="b.jpg" alt="溪流">
<figcaption>清泉石上</figcaption>
- 用
display: inline-block或现代布局（如display: flex）控制并排效果 - 建议统一设置
max-width和height: auto防止图片撑破容器 -
<figcaption></figcaption>默认是块级元素，会自然换行到图片下方，无需额外定位
常见误区提醒
避免以下写法：
- 把
<figcaption></figcaption>放在<figure></figure>外面——结构失效，语义丢失 - 用
<figure></figure>包裹纯装饰性图片（如背景分割线）——它只适用于有意义的独立内容 - 省略
alt，只靠<figcaption></figcaption>交代信息——屏幕阅读器可能跳过<figcaption></figcaption>，且alt是图片加载失败时唯一可见文本 - 误写成
<figure><img alt="如何在 HTML 中利用 和 标签组合展示图片及说明" ></figure><figcaption>…</figcaption>——<figcaption></figcaption>不再属于该<figure></figure>，失去关联性
