HTML5figure标签使用教程：图片说明组合技巧

HTML5 的 `

` 标签远不止是图片的容器，而是一个语义化极强的“独立内容单元”，适用于图表、代码块、引文等可单独引用、编号或移除而不影响正文逻辑的内容；正确使用 `

figure 标签不是“图片容器”，而是“独立内容单元”

很多人一看到 figure 就默认它是 的父容器，其实不然。它的语义核心是「一段可独立于主文流存在的内容」，比如图表、代码块、照片、插图、甚至一段引文——只要它能被单独引用、编号或移除而不影响主体逻辑，就适合用 figure。

常见错误是把所有带图的文字说明都硬套 figure，结果破坏了语义结构，反而不利于屏幕阅读器识别和 SEO。

• 适合用：figure + img + figcaption 表达一张有明确标题/说明的摄影图、示意图、数据图
• 不适合用：纯装饰性图片、按钮图标、头像、轮播图中的单帧（除非每帧本身构成独立信息单元）
• figcaption 必须是 figure 的第一个或最后一个子元素，且最多只能有一个

figcaption 放上面还是下面？浏览器默认位置与可访问性影响

HTML 规范允许 figcaption 出现在 figure 内部任意位置，但实际渲染和辅助技术（如读屏软件）会按 DOM 顺序解析。绝大多数场景下，把它放在 figure 最后更符合直觉和习惯——用户先看图，再读说明。

不过，如果说明文字是图注编号（如“图 3-2：用户登录流程”），且设计要求标题在图上方（常见于学术论文、技术文档），可以合法地把 figcaption 放最前面。CSS 可以视觉上调整布局，但 DOM 顺序仍决定语义优先级。

• 屏幕阅读器通常按 DOM 顺序朗读：先读 figcaption 再读 img（如果它在前）
• 搜索引擎可能将 figcaption 文本作为该图的强相关描述，影响图片搜索权重
• 不要用 CSS 的 order 或 flex-direction: column-reverse 颠倒视觉顺序却保留 DOM 顺序不一致，这会误导辅助技术

figure 里能放多个 img 吗？组合图、对比图怎么处理

可以，figure 允许包含多个 img，也支持嵌套其他流内容（如 div、p、甚至另一个 figure），但关键在于整体是否构成一个语义完整的“独立单元”。比如左右并排的 A/B 测试截图、上下排列的步骤分解图，都算合理使用。

注意：多个图片共用一个 figcaption 是完全合法的，只要说明文字概括了全部内容；如果每张图都需要独立说明，则应拆分为多个 figure，而不是在一个 figure 里塞多个 figcaption（HTML 不允许）。

<figure>
  <img src="before.png" alt="优化前页面加载瀑布图">
  <img src="after.png" alt="优化后页面加载瀑布图">
  <figcaption>图 4：CDN 与压缩策略实施前后首屏加载耗时对比</figcaption>
</figure>

figure 没有默认样式，但 display 和 margin 会影响布局

浏览器对 figure 的默认样式非常轻量：display: block，没有内边距，上下外边距约 1em（各浏览器略有差异）。它不像 section 或 article 那样自带语义化样式，所以容易被忽略其垂直间距问题。

• 在段落中插入 figure 时，常因默认 margin-top/bottom 导致图文间距过大，可用 margin: 0 重置
• 若需居中图片，别只给 img 加 display: block; margin: 0 auto，而应在 figure 上控制，避免破坏语义层级
• 响应式场景下，figure 本身不参与 flex/grid 布局的自动对齐，需显式设置 display: flex 或用 text-align: center 控制内部对齐

真正容易被忽略的是：当 figure 被设为 display: inline-block 或用于内联上下文时，底部默认留白（来自基线对齐），这时需要加 vertical-align: top/middle 或设 font-size: 0 清除间隙。

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。