figure 和 figcaption 是 html5 规定的语义组合：figure 表示独立内容单元，figcaption 必须为其首个或最后一个子元素，用于描述该内容；二者共同构成可访问、可索引的图文关联结构。
figure 和 figcaption 是什么关系
它们不是可有可无的装饰标签，而是 html5 明确规定的语义组合：figure 表示一个独立的内容单元（比如图、图表、代码块），figcaption 必须是它的**第一个或最后一个子元素**，用来描述它。浏览器和读屏软件靠这个结构识别“这段文字是在解释这张图”。
常见错误现象：figcaption 放在 figure 外面、或者中间夹了其他元素（比如 div）；这样语义就断了，辅助技术可能完全忽略描述。
-
figcaption只能出现一次 perfigure - 它不一定要在图片下方——可以放上面，也可以用 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：流程图”，却没说清楚流程是什么、节点怎么流转、哪一步是关键判断——那跟没写差不多。