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

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

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

什么时候必须用 figure + figcaption

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

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

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

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

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

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

常见误用和替代方案

这些场景不该用 figure：

• 文章内嵌的普通配图（仅起装饰或示意作用，无独立说明）→ 直接用 + alt 属性即可
• 轮播图/画廊组件 → 它们是交互容器，不是独立引用单元；用
  或 更合适
• 带标题的广告图 → 属于商业内容，用 或带 aria-label 的
• 多图并列但共用一个标题 → figure 不支持“一组图+一个标题”，应改用
  包裹多个 figure，或用
  搭配
  /

  @@##@@
  



@@##@@

响应式图片和 figure 怎么配合

和 可以直接放在 figure 内，语义完全兼容。关键点是：alt 必须写在 上，不能省略；figcaption 仍描述整个内容单元，不重复 alt 已说明的信息。

• 避免在 figcaption 里写“一张柱状图”，而应写“2025年华东区门店销量TOP5”
• 如果图本身含文字（如截图里的 UI），alt 需描述文字内容，figcaption 描述其用途或上下文
• 不要为了“适配移动端”把 figure 拆成多个，响应式靠 CSS 和 控制，不是靠语义标签数量

真正容易被忽略的是：当 figure 被 CSS 设为 display: inline 或浮动后，若内部 figcaption 用了 width: 100%，可能意外撑宽父容器——语义正确不等于样式安全，得手动约束宽度或用 max-width: max-content。