HTML文档结构中的图片说明与文字关联-html教程-PHP中文网

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

figcaption必须嵌在figure中才有效，单独使用语义丢失、读屏器不识别、seo不认；它只能是figure的首或尾直接子元素，alt描述图像内容，figcaption说明上下文，二者不可互换或省略。

html文档结构中的图片说明与文字关联

单独写 figcaption 标签，浏览器会当普通文本渲染，语义丢失，读屏器不识别，SEO 也不认。它不是独立标签，而是 figure 的专属子元素，作用是说明“这个 figure 里的内容”。

常见错误包括：figcaption 放在 div 里、紧跟在 img 后面但没包 figure、或者用 section / article 替代 figure。这些写法都等于没写。

✅ 正确：<figure><img src="x.jpg" alt="服务器响应时序"><figcaption>图1：API 请求与响应时间分布</figcaption></figure>
❌ 错误：<div> <img src="x.jpg" alt="..."><figcaption>图1...</figcaption> </div>
❌ 错误：<img src="x.jpg" alt="..."><figcaption>图1...</figcaption>（无容器）

DOM 顺序决定语义归属。浏览器和读屏器靠节点位置判断“这段说明属于哪张图”，不是靠 CSS 渲染位置。中间插一个 div、p 或空格文本节点，就断了关联。

比如加个来源行：<figure><img><p class="source">数据来源：内部监控系统</p> <figcaption>图2：延迟 P95 分布</figcaption></figure> —— 这样 figcaption 就失效了。

alt 是图像的功能替代：图挂了、盲人用户、搜索引擎爬虫靠它理解“图里有什么”；figcaption 是上下文说明：告诉所有人“为什么放这张图、它在这儿意味着什么”。

两者缺一不可，照抄或删掉任一个，都会破坏可访问性。例如，一张折线图的 alt 写“折线图”，等于没写；而把 figcaption 写成“上图显示增长”，对跳过前文的读屏器用户毫无意义。

Chrome、Firefox、Safari 对 figcaption 的默认 display、margin、font-weight 处理不一致。不重置容易出现换行错位、间距突兀、居中失效等问题。

基础重置建议直接写在 CSS 里：

figure figcaption {
  display: block;
  margin: 0.5em 0 0;
  font-size: 0.9em;
  color: #666;
  text-align: center;
}

别依赖 text-align: center 让块级元素居中——它只影响内联内容；要居中整个 figcaption，得配合 width 和 margin: auto
若需与图片同宽，给 figure 设 display: inline-block，再设 figcaption 为 width: 100%
避免用 float 或 position: absolute，会脱离文档流，破坏响应式和语义顺序