图文排版神器：用 `<figure>` 和 `<figcaption>` 规范你的内容结构

写文章的时候，你一定遇到过这样的场景：

正文中间插了一张图，图下面配了一行说明文字。看起来很简单，但代码怎么写才"对"？

很多人随手就写：

ini 复制代码

<div class="image-container">
  <img src="chart.png" alt="销售数据图表">
  <p class="image-caption">图 1：2025 年 Q1 销售数据</p>
</div>

功能上没问题，页面也能正常显示。但如果你对 HTML 语义化有一点追求，这段代码其实经不起推敲------<div> 和 <p> 完全没有表达出"这张图 + 这行说明是一个整体"的含义。搜索引擎看不懂，屏幕阅读器也搞不清它们的关系。

HTML5 早就为我们准备好了正确答案： <figure> + <figcaption> 。

一、它们是什么？

`<figure>`：独立的媒体内容容器

<figure> 用来包裹一段自成一体、可以独立存在的媒体内容。典型场景包括：

图片及其说明
图表、数据可视化
代码片段
视频、音频
引用内容

关键词是 "独立" ------即使你把 <figure> 从页面中移走，正文的核心意思也不会受影响。它就像书里的插图，拿掉插图，文字依然通顺。

`<figcaption>`：媒体内容的标题或说明

<figcaption> 是 <figure> 的"专属配文"，用来给里面的内容加标题或说明。它可以是图注、代码说明、引用来源等。

二、最基本的用法

xml 复制代码

<figure>
  <img src="architecture.png" alt="系统架构图">
  <figcaption>图 1：微服务架构整体设计</figcaption>
</figure>

就这么简单。但别小看它------这短短几行代码，语义上已经完成了一次"升维"：

写法	语义
`<div>` + `<img>` + `<p>`	"这里有一些东西放在一起"
`<figure>` + `<img>` + `<figcaption>`	"这是一张独立的图，下面这行是它的说明"

浏览器、搜索引擎、辅助技术都能准确理解这段关系。

三、`<figcaption>` 放在哪里？

<figcaption> 可以放在 <figure> 的开头或结尾 ，浏览器都会把它关联到整个 <figure>：

xml 复制代码

<!-- 说明在下方（最常见） -->
<figure>
  <img src="demo.png" alt="演示效果">
  <figcaption>用户点击按钮后触发的动画效果</figcaption>
</figure>

<!-- 说明在上方 -->
<figure>
  <figcaption>用户点击按钮后触发的动画效果</figcaption>
  <img src="demo.png" alt="演示效果">
</figure>

一般来说，说明文字放在下方更符合阅读习惯。但如果你做的是图片画廊、摄影作品展示，把标题放上面也完全合理。

四、不只是图片：`<figure>` 的多种用法

很多人以为 <figure> 只能包 <img>，其实它的能力远不止于此。

1. 包裹代码片段

技术博客里经常要贴代码，用 <figure> 包一层会显得更规范：

xml 复制代码

<figure>
  <pre><code>function fib(n) {
  if (n <= 1) return n;
  return fib(n - 1) + fib(n - 2);
}</code></pre>
  <figcaption>示例 1：斐波那契数列的递归实现</figcaption>
</figure>

2. 包裹引用内容

css 复制代码

<figure>
  <blockquote>
    <p>任何可以用 JavaScript 来写的应用，最终都会用 JavaScript 来写。</p>
  </blockquote>
  <figcaption>------ Jeff Atwood，Atwood's Law</figcaption>
</figure>

💡 这里有个细节：<figcaption> 放在 <figure> 内部，而不是 <blockquote> 内部。这样语义才是"整个引用块 + 它的出处说明"。

3. 包裹视频

xml 复制代码

<figure>
  <video controls src="demo.mp4"></video>
  <figcaption>产品功能演示视频（时长 2:30）</figcaption>
</figure>

4. 一个 `<figure>` 里放多张图

xml 复制代码

<figure>
  <img src="before.png" alt="优化前">
  <img src="after.png" alt="优化后">
  <figcaption>对比：左侧为优化前，右侧为优化后</figcaption>
</figure>

一张说明对应多张图，完全合法。

五、样式美化：让它好看起来

默认样式下 <figure> 和 <figcaption> 看起来很朴素，加一点 CSS 就能让它们脱胎换骨：

css 复制代码

figure {
  margin: 2em auto;
  text-align: center;
  max-width: 640px;
}

figure img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

figcaption {
  margin-top: 0.75em;
  font-size: 0.9em;
  color: #666;
  font-style: italic;
  line-height: 1.5;
}

效果是这样的：

📐 图片居中显示，带圆角和阴影

📝 说明文字用灰色斜体，和正文形成视觉区分

📏 整体有舒适的留白，不会和正文挤在一起

六、为什么要用它？三个核心理由

1. 语义化，让机器也"看懂"

搜索引擎在理解页面结构时，会特别关注语义化标签。<figure> + <figcaption> 明确告诉爬虫："这张图很重要，说明文字在这里。"这对 SEO 和图片搜索都有正面帮助。

屏幕阅读器遇到 <figure> 时，会把里面的内容和 <figcaption> 关联起来，视障用户听到的不再是"一张图 + 一段孤立的文字"，而是"一张图，其说明是......"。体验完全不同。

3. 结构清晰，维护成本低

当你的文章里有十几张图、几段代码、几个引用时，<figure> 让每一组内容都有明确的边界。后期改样式、加交互、做响应式，都不用担心结构混乱。

七、常见误区

❌ 误区一：所有图片都该用 `<figure>`

不是的。<figure> 只适合独立、有意义、需要说明 的媒体内容。如果图片只是装饰性的（比如一个图标、一个分隔线），直接用 <img> 就好，不需要套 <figure>。

xml 复制代码

<!-- ✅ 适合用 figure -->
<figure>
  <img src="data-chart.png" alt="用户增长曲线">
  <figcaption>图 2：2025 年用户月活增长趋势</figcaption>
</figure>

<!-- ❌ 没必要用 figure -->
<figure>
  <img src="icon-arrow.png" alt="">
  <figcaption></figcaption>
</figure>

❌ 误区二：一个 `<figure>` 里放多个 `<figcaption>`

HTML 规范建议每个 <figure> 里最多放一个 <figcaption>。如果需要多条说明，把它们放在同一个 <figcaption> 里，用 <p> 分隔：

xml 复制代码

<figure>
  <img src="dashboard.png" alt="数据看板">
  <figcaption>
    <p>图 3：运营数据看板总览</p>
    <p>数据来源：内部 BI 系统，统计周期为 2025 年 1-6 月</p>
  </figcaption>
</figure>

❌ 误区三：用 `<figcaption>` 代替 `<alt>`

<figcaption> 是给所有用户 看的说明文字，alt 属性是给图片加载失败或屏幕阅读器用的替代文本。两者用途不同，不能互相替代：

xml 复制代码

<!-- ✅ 两个都写 -->
<figure>
  <img src="chart.png" alt="柱状图：Q1 销售额 120 万，Q2 销售额 180 万">
  <figcaption>图 4：2025 年上半年季度销售额对比</figcaption>
</figure>

八、和 `<aside>` 的区别

有人会问：<aside> 也是"附属内容"，它和 <figure> 有什么区别？

简单说：

	`<figure>`	`<aside>`
核心用途	媒体内容 + 说明	侧边栏、补充说明
内容类型	图片、视频、代码、引用	任何补充信息
和正文关系	内容本身相关，只是独立存在	间接相关，像"旁注"
典型场景	文章插图	"相关阅读"、"名词解释"

如果你拿不准，问自己一个问题： "这段内容是媒体内容吗？" 是就用 <figure>，不是就用 <aside> 或别的。

九、写在最后

<figure> 和 <figcaption> 是那种学了之后会感叹"怎么没早点用" 的标签。

它们不改变功能，不改变外观，但让代码从"能跑"变成"写得好"。在一个追求专业性的项目里，这种细节的积累，就是代码质量和工程素养的分水岭。

图文排版神器：用 `<figure>` 和 `<figcaption>` 规范你的内容结构