HTML5中Figure与Figcaption组合的图文排版方案

处理HTML5中Figure与Figcaption组合的图文排版方案这类问题时，先确认目标场景，再按步骤核对配置或玩法细节。

figure与figcaption是HTML5中专为图文关联设计的语义化标签，用于明确表达图与其说明文字的逻辑关系；figcaption必须是figure的直接子元素且仅能有一个，用于提供独立内容的标题、来源或注释。

Figure 与 figcaption 是 HTML5 中专为图文关联设计的语义化标签组合，核心价值在于明确表达“图与其说明文字”的逻辑关系，而非仅实现视觉排版。

语义优先：什么时候必须用 figure/figcaption？

当图片、图表、代码块、引用等内容具有独立意义，且需要配一段说明性文字（标题、来源、注释等）时，就该用 figure 包裹内容，再用 figcaption 作为其首个或最后一个子元素。例如：

1. 文章中插入一张产品截图，并附带“图1：后台管理界面布局”
2. 技术文档里展示一段 JSON 示例，并标注“清单 2：用户配置示例”
3. 博客中嵌入一张信息图，并注明“数据来源：2024 年公开调研报告”

注意：figcaption 必须是 figure 的直接子元素，且最多只能有一个（W3C 规范限定）。

默认样式与基础布局控制

浏览器对 figure 默认仅设上下外边距，figcaption 默认显示为块级、居中、字体略小。若需常规图文左图右文或上图下文，推荐用 CSS Flex 或 Grid 控制：

1. 上图下文（默认流式）：无需额外样式，figcaption 放在 figure 底部最自然
2. 左图右文：给 figure 设 display: flex; align-items: flex-start;，再控制图片宽高和文字区域最小宽度
3. 响应式处理：可用 @media 在小屏下切回上下结构，避免文字被压缩

可访问性与 SEO 隐含收益

屏幕阅读器会将 figcaption 自动识别为 figure 内容的描述，显著提升残障用户理解效率；搜索引擎也更倾向把 figure + figcaption 组合视为高质量图文单元，有助于图片内容被准确索引。务必确保 figcaption 文字简洁准确，避免“如图所示”这类无信息量表述。

常见误区提醒

1. 不要只为“加个标题”而滥用：纯装饰性图标、背景图、按钮图标等无需 figure
2. 不要嵌套多个 figcaption：一个 figure 只能有一个说明，多说明请拆分为多个 figure
3. 图片本身已有 alt 属性，figcaption 不重复替代它：前者面向无障碍，后者面向上下文解释

用对了，既干净又专业；用错了，反而破坏语义结构。不复杂但容易忽略。