HTML5布局中figure和figcaption怎么用_图文组合内容的语义化布局【教程】-html教程-PHP中文网

figure 和 figcaption 用于标识独立可引用的内容单元，非美化用途；必须满足图/媒体可脱离上下文存在且说明文字属其自身，如图表、代码截图、带来源说明的历史插图等。

html5布局中figure和figcaption怎么用_图文组合内容的语义化布局【教程】

figure 和 figcaption 不是用来“美化排版”的，而是告诉浏览器和辅助技术：“这部分图和文字是一个独立的、可被引用的内容单元”。用错地方反而会破坏语义，比如把纯装饰图、轮播图、文章配图（无说明性标题）塞进去。

什么时候必须用 `figure` + `figcaption`

核心判断标准：这张图/媒体是否能脱离上下文独立存在？它的说明文字是否属于它自身的一部分，而非正文叙述？

图表（<svg></svg> 或 <canvas></canvas> 生成的统计图）、流程图、示意图
代码截图 + 对应的说明性标题（如“fetch() 请求失败时的错误处理逻辑”）
引用的第三方照片、历史文献插图，并附带来源/作者说明
产品对比图 + 标题“iOS 与 Android 端主界面布局差异”

注意：figcaption 必须是 figure 的**第一个或最后一个子元素**，否则语义失效；且一个 figure 只能有一个 figcaption。

`figcaption` 放上面还是下面？有影响吗

视觉位置不影响语义，但会影响屏幕阅读器播报顺序和 SEO 解析倾向。默认行为是：屏幕阅读器先读 figcaption，再读图/媒体内容。

降重鸟

要想效果好，就用降重鸟。AI改写智能降低AIGC率和重复率。

下载

立即学习“前端免费学习笔记（深入）”；

标题型说明（如“图3-2：用户登录流程图”）建议放顶部——符合文档阅读习惯，也利于结构化数据提取
解释型说明（如“拍摄于2023年东京展会现场，设备为 iPhone 14 Pro”）更适合放底部，避免打断正文流
CSS 可自由调整位置（flex-direction: column-reverse 或 order），但不要用 position: absolute 把 figcaption 移出 figure 流

常见误用和替代方案

这些场景不该用 figure：

文章内嵌的普通配图（仅起装饰或示意作用，无独立说明）→ 直接用 <img alt="HTML5布局中figure和figcaption怎么用_图文组合内容的语义化布局【教程】" > + alt 属性即可
轮播图/画廊组件 → 它们是交互容器，不是独立引用单元；用 <section></section> 或 <div role="region"> 更合适<li>带标题的广告图 → 属于商业内容，用 <code><aside></aside> 或带 aria-label 的 <div> <li>多图并列但共用一个标题 → <code>figure 不支持“一组图+一个标题”，应改用 <section></section> 包裹多个 figure，或用 <dl></dl> 搭配 <dt></dt>/<dd></dd>

<!-- ✅ 正确：单图+独立说明 -->
<figure>
  @@##@@
  <figcaption>图4.1：Q1–Q4 营收同比增长率（单位：%）</figcaption>
</figure>
<p><!-- ❌ 错误：无说明的装饰图 -->
<figure>
@@##@@
<!-- 没有 figcaption，且图本身无信息价值 -->
</figure>

响应式图片和 `figure` 怎么配合

<picture></picture> 和 <source></source> 可以直接放在 figure 内，语义完全兼容。关键点是：alt 必须写在 <img src="chart.png" alt="2023年各季度营收增长曲线"> 上，不能省略；figcaption 仍描述整个内容单元，不重复 alt 已说明的信息。