HTML5怎么用figure和figcaption加图文说明_语义化用法【方法】

figure 是独立内容单元，figcaption 必为首个或最后一个子元素且唯一；多图须分属不同 figure；alt 描述图像本身，figcaption 补充语义背景。

figure 和 figcaption 的语义关系必须严格匹配

HTML5 中 figure 不是“随便包个图+文字”的容器，它代表一个**独立的、可被文档流外引用的内容单元**（比如图表、照片、代码块、引文等）。figcaption 必须是 figure 的**第一个或最后一个子元素**，且最多只能有一个。浏览器和读屏器依赖这个结构识别图文归属关系。

• 错误写法：figure 里塞两个 figcaption，或把说明文字放在 div 里再套进 figure
• 正确顺序：要么 figcaption 在前（标题式说明），要么在后（常见说明式）
• 如果图和说明之间有其他内容（如按钮、操作栏），不能硬塞进 figure —— 应该用 div 包裹整个模块，figure 只管图+说明这对核心语义单元

figcaption 放前面还是后面？看内容性质

位置影响语义权重和渲染逻辑。CSS 默认不会自动换行或加粗，但位置决定了它在无障碍 API 中的播报顺序和视觉层级。

• 放前面：适合“标题型说明”，比如「图3-1：用户登录流程图」，强调这是对后续内容的命名
• 放后面：适合“解释型说明”，比如「该界面支持指纹与密码双验证」，补充图中未明示的信息
• 不要为了样式强行颠倒顺序——若设计要求标题在上、说明在下，但语义上说明更重要，应保持 figcaption 在后，并用 CSS 控制显示位置（例如 flex-direction: column-reverse）

多图共用一个 figcaption？不行，得拆开

figure 表达的是“一个”独立内容单元，不是“一组”。常见误区是把图库或轮播图用一个 figure 包住，再配一个 figcaption，这会破坏语义完整性。

小羊标书

一键生成百页标书，让投标更简单高效

下载

• 每张图（或每组强关联图，如分步截图）都应单独包裹在自己的 figure 中
• 轮播组件本身不是语义化图元，应由外层 div 或 section 承载，内部每个 img 对应一个 figure + figcaption
• 若需统一说明（如“图1–图4：系统架构演进”），应在 figure 外用 section 或 h2 标注，而不是让一个 figcaption 覆盖多个 figure

<figure>
  <img src="login-flow.png" alt="用户登录流程：输入账号→验证→跳转首页">
  <figcaption>图3-1：Web端登录核心流程</figcaption>
</figure>

<figure>
  <figcaption>该界面支持指纹与密码双验证</figcaption>
  <img src="auth-ui.png" alt="双因素认证界面，含指纹图标与密码输入框">
</figure>

alt 和 figcaption 别重复，分工要清楚

alt 是图像的**替代文本**（用于加载失败、纯文本环境、屏幕阅读器初始播报），figcaption 是图像的**上下文说明**（补充背景、用途、结论等）。两者信息维度不同，重复写会降低可访问性。

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

• alt 应描述图“是什么”（如“柱状图：2023年各季度营收对比”）
• figcaption 应说明图“为什么重要”或“想表达什么”（如“Q4营收跃升42%，主要来自新市场拓展”）
• 如果图本身无实质信息（如装饰性分隔图），alt=""，且不应放进 figure —— figure 必须承载有意义的内容