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><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill8961" title="html-to-pptx-converter"><img
src="https://img.php.cn/upload/skill/000/000/081/179232667384043.jpg" alt="html-to-pptx-converter" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill8961" title="html-to-pptx-converter" class="overflowclass">html-to-pptx-converter</a>
<p class="overflowclass">使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。</p>
</div>
<a rel="nofollow" href="/xiazai/skill8961" title="html-to-pptx-converter" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div></figcaption><code>）属于 HTML5 无效结构，部分浏览器会自动修正但行为不可靠。
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 结构错误，其实只是样式未接管。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
