HTML中figure与figcaption_HTML5内容配图标签详解

figure与figcaption必须用于“独立可引用+说明属自身”的内容，如图表、代码块、引文等；figcaption须为figure首个或最后一个直接子元素，仅一个且不可为空，与img的alt属性分工明确、不可互替。

figure 和 figcaption 不是“给图片加个标题”的快捷写法，用错地方反而会让语义混乱、影响可访问性和 SEO。

什么时候必须用 figure + figcaption

只有当内容满足「独立可引用」+「说明文字属于它自身」两个条件时才该用：

• 图表、代码块、引文、信息图这类脱离上下文仍能自解释的内容
• 说明文字是标题、编号（如“图3”）、来源（如“数据来自2024年公开调研”）或简要注释，不是泛泛的“如图所示”
• 这张图如果被移到附录、侧边栏或单独打印，figcaption 依然能准确描述它——所以不能写“上图”“左侧示意图”
• 纯装饰图、轮播图单帧、头像旁昵称、产品页主图配操作按钮，都不适用

figcaption 必须是 figure 的第一个或最后一个子元素

浏览器和读屏器依赖这个结构识别归属关系，中间插别的元素会破坏语义：

• 正确：先 figcaption 后 img，或先 img 后 figcaption
• 错误：figure > div > figcaption，或 figure > figcaption > img > figcaption
• 一个 figure 只能有一个 figcaption；多段说明请拆成多个 figure
• figcaption 不能省略结束标签，且必须有内容（空格或   不算有效内容）

alt 和 figcaption 是互补，不是重复

两者职责完全不同，缺一不可：

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

• img 的 alt 描述图像“是什么”，面向无障碍场景，比如 alt="折线图：用户登录量在1月到3月呈上升趋势"
• figcaption 解释图像“为什么在这里”，面向文档上下文，比如 <figcaption>图2：Q1用户活跃度变化趋势（数据来源：内部埋点）</figcaption>
• 不写 alt 会直接损害可访问性；把 alt 写成和 figcaption 一样，等于放弃其中一项语义价值

样式与兼容性要注意的硬限制

默认行为简单，但改起来容易踩坑：

• 所有现代浏览器（IE9+、Chrome、Firefox、Safari、Opera）都支持，IE8 及更早版本完全不识别，需降级处理（如用 div 包裹并加 ARIA）
• figure 默认只有上下 margin，没有 padding 或 border；重置时别漏掉 margin: 0
• figcaption 默认是块级、居中、字体略小，但对齐方式（text-align）只影响内联内容，Flex/Grid 布局下需用 justify-content 或 align-items
• 响应式切换布局（比如小屏切为上下结构）时，别用 float 或 position: absolute 把 figcaption 挤出流，否则读屏器可能跳过它

真正难的不是怎么写，而是每次插入图之前先问一句：它算不算一个能被单独引用、带明确上下文说明的独立单元？这个问题答错，后面所有样式和逻辑都会跑偏。