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

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

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

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

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

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

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

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

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

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

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

Speech Studio

微软语音服务，提供语音到文本、文本到语音和语音翻译功能。

下载

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

常见误用和替代方案

这些场景不该用 figure：

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



  @@##@@
  图4.1：Q1–Q4 营收同比增长率（单位：%）



@@##@@

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


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

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

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