HTML图像描述教程｜figure与figcaption使用详解

本文深入解析了HTML5中figure与figcaption这对语义化标签的核心作用与正确用法，强调它们并非装饰性元素，而是构建可访问、可索引、搜索引擎友好的图文关联结构的关键——figcaption必须作为figure的首或尾子元素，精准描述其包裹的独立内容（如图片、SVG、视频、代码块等），与img的alt属性形成互补而非替代：alt解决图像失效时的替代与基础可访问性，figcaption则提供上下文丰富、语义明确的深度说明；文章还纠正常见误用（如figcaption位置错误、混用div破坏语义、滥用或空泛描述），并指出其对读屏软件支持、SEO优化（尤其图片搜索）的实质性价值，最终呼吁开发者回归语义本质：让每一段figcaption都真正有用、不可省略、不可敷衍。

figure 和 figcaption 是什么关系

它们不是可有可无的装饰标签，而是 HTML5 明确规定的语义组合：figure 表示一个独立的内容单元（比如图、图表、代码块），figcaption 必须是它的**第一个或最后一个子元素**，用来描述它。浏览器和读屏软件靠这个结构识别“这段文字是在解释这张图”。

常见错误现象：figcaption 放在 figure 外面、或者中间夹了其他元素（比如 div）；这样语义就断了，辅助技术可能完全忽略描述。

• figcaption 只能出现一次 per figure
• 它不一定要在图片下方——可以放上面，也可以用 CSS 调位置，但 DOM 顺序必须紧邻 figure 开始或结束
• 如果图里有多张图（比如画廊），每个图应各自套一个 figure + figcaption，不要共用一个

img 的 alt 属性和 figcaption 有什么区别

alt 是给 img 自身的简短替代文本，用于加载失败或纯文本环境；figcaption 是对整张图（甚至包含图表、照片+说明文字等复合内容）的上下文描述，可以更长、更具体。

使用场景举例：一张带标注的架构图，alt="系统架构图" 太模糊，而 figcaption 可以写：“图 3：用户请求经 API 网关路由至微服务集群，其中 Auth 服务负责 JWT 验证（见右上角流程框）”。

• alt 必须存在（空字符串 alt="" 也行，表示装饰性），否则是可访问性问题
• figcaption 是可选的，但只要用了，就得准确反映图的内容，不能只是“如图所示”
• 别把 alt 写成 figcaption 的简化版，也不要用 figcaption 替代 alt —— 它们服务不同场景

figure 里只能放 img 吗

不是。figure 的设计初衷就是包容各种“自包含的流内容”，包括但不限于：img、svg、video、pre（比如代码块）、甚至 table（比如数据图表）。

常见错误现象：把一段 Markdown 渲染出的图表硬塞进 div，再加个 p 当说明，结果搜索引擎和读屏器根本不知道这是“图+说明”的组合。

• SVG 图表建议直接内联到 figure 中，figcaption 放在最后，方便屏幕阅读器按顺序读取
• 视频片段配说明时，figcaption 应说明视频重点（如“演示登录态自动续期逻辑，时间点 0:12–0:28”），而不是只写“视频”
• 避免在 figure 里塞交互组件（比如按钮、表单），它语义上代表“静态参考内容”

兼容性和 SEO 影响怎么看

所有现代浏览器都支持 figure 和 figcaption，IE9+ 也能渲染，但 IE 不识别其语义（不影响显示，只影响辅助技术）。SEO 方面，Google 明确表示会利用 figure/figcaption 结构理解页面图文关系，尤其在图片搜索中提升关联度。

性能上没额外开销，但注意：如果 figcaption 里塞了大量文本或嵌套标签（比如 strong 套 em 套 span），可能增加 DOM 深度，对极端低端设备有轻微影响。

• 别为了“语义正确”强行把每张图都包 figure —— 装饰性小图标、按钮图标、背景图都不需要
• SSR 或静态站点生成时，确保 figcaption 文本随图一起输出，别靠 JS 注入，否则爬虫看不到
• 如果图是响应式加载（比如 srcset + picture），figcaption 仍要放在最外层 figure 里，别拆到 picture 内部

最容易被忽略的是：figcaption 的文本得真正有用。很多人写了“图1：流程图”，却没说清楚流程是什么、节点怎么流转、哪一步是关键判断——那跟没写差不多。

本篇关于《HTML图像描述教程｜figure与figcaption使用详解》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！