figcaption 是专为 figure 元素设计的语义化标题/说明文字容器，必须作为 figure 的唯一子元素置于首或尾；不是装饰性容器或通用标题标签，不可脱离 figure 使用，否则丧失可访问性与 SEO 价值。
figcaption 是什么，不是什么
figcaption 不是装饰性文字容器，也不是通用标题标签。它是专为 figure 元素设计的语义化子元素，唯一合法用途是给图、表、代码块、视频等独立媒体内容提供**可访问、可索引、可关联的标题或说明文字**。
常见误用包括：把它塞进 div 里当普通标题用；在同一个 figure 中放两个 figcaption；或者把它放在 figure 中间位置（必须是第一个或最后一个子元素）。
figcaption 必须和 figure 搭配使用
figcaption 不能脱离 figure 独立存在——没有 figure 的包裹，它就失去了语义合法性，辅助技术（如屏幕阅读器）可能直接忽略它，搜索引擎也可能不将其识别为对应媒体的描述。
正确结构只有两种合法形式：
立即学习“前端免费学习笔记（深入）”；
<figure><figcaption>标题</figcaption><img src="..."></figure><figure><img src="..."><figcaption>标题</figcaption></figure>
注意：figcaption 在 figure 内只能出现一次；放在中间（比如 <figure><img><figcaption><p></p></figcaption><code></code></figure>）属于 HTML5 无效结构，部分浏览器会自动修正但行为不可靠。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
figcaption 对 SEO 和无障碍的实际影响
搜索引擎会把 figcaption 文本与 figure 内的 img 或 code 关联起来，作为该媒体内容的上下文补充。这比单纯靠 alt 属性或周边段落文字更明确。
对屏幕阅读器用户来说，figcaption 会被读作“图：黄浦江上的卢浦大桥”，而不会像普通 p 标签那样被当作普通段落朗读。这意味着：
- 它天然具备「这是图的标题」的语义暗示
- 如果省略
figcaption，仅靠alt，视觉障碍用户无法感知该图是否配有说明性文字 - 若图本身无
alt但有figcaption，仍属不完整——二者职责不同：alt描述图像内容本身，figcaption解释图像在文中的作用或背景
容易被忽略的兼容性细节
所有主流浏览器（Chrome、Firefox、Safari、Edge）都支持 figcaption，但它在旧版 IE（≤11）中完全不被识别，会降级为普通行内元素。如果你的项目还需兼容 IE，不能依赖它的语义能力，需额外加 ARIA 属性（如 aria-labelledby）补位。
另一个隐蔽问题：CSS 选择器 figure figcaption 默认不继承父级字体设置，尤其在使用自定义字体或重置样式表（如 Normalize.css）时，容易出现字号/行高突变。建议显式声明：
figure figcaption {
font-size: 0.9em;
line-height: 1.4;
}
否则，图文并排时标题突然变小或挤在一起，第一反应常误判为 HTML 结构错误，其实只是样式未接管。
