HTML中figure和figcaption标签标注图片说明的规范-html教程-PHP中文网

figure 和 figcaption 是语义标签而非样式工具，figcaption 必须为 figure 的首个或末个直接子元素，一个 figure 仅容一个非空 figcaption，且需与 alt 分工协作以保障无障碍与 SEO。

html中figure和figcaption标签标注图片说明的规范

figure 和 figcaption 不是“给图片加个说明”的样式工具，而是语义契约——用错位置、多写一个、或塞进无关元素，就会让屏幕阅读器读错、搜索引擎忽略图文关联。

figcaption 必须是 figure 的第一个或最后一个直接子元素

浏览器和辅助技术（AT）靠 DOM 位置判断归属关系。中间插个

、

 或按钮，语义就断了。
✅ 正确：图2：用户登录流程


✅ 正确：图2：用户登录流程

❌ 错误：...（figcaption 不是直接子元素）
❌ 错误：说明文字（p 不是 figcaption，无法被识别为图注）

一个 figure 只能有一个 figcaption，且不能为空
W3C 规范明确限定：重复写 figcaption，第二个会被浏览器忽略；留空或只含空格，读屏器可能跳过或报错。

											
												
												
													DeepBI DHTML 页面生成器
													生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力：

- 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面；  
- 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”；  
- 提及位于 `apps/console/src/featur
												
												下载
												
											
										

多段说明？拆成多个 figure，比如分步截图 → 每张图一个 figure + 独立 figcaption

轮播图每帧都要单独包裹：
...
...
，不能共用一个 figcaption

统一编号（如“图1–4”）应放在外层  或  里，而非强塞进某个 figcaption


alt 和 figcaption 分工不同，不能互相替代
alt 是图像的替代文本，面向无图环境与无障碍；figcaption 是上下文说明，面向文档逻辑与 SEO。二者信息维度不同，重复写等于放弃一半语义价值。


alt 描述“是什么”：alt="折线图：2024年Q1至Q3用户留存率变化"


figcaption 解释“为什么放这里”：图3：Q2留存率回升27%，源于新用户引导流程优化

删掉 figure 块，正文仍通顺 → 适合用 figure；只是配图解释某句话 → 直接用  加 alt 就够了

响应式布局中别用 float 或 absolute 把 figcaption 移出文档流
视觉上想左图右文、标题在上说明在下？可以，但必须用 display: flex 或 grid 控制，保持 DOM 顺序合规。否则读屏器可能完全跳过 figcaption。

小屏切上下结构：@media (max-width: 768px) { figure { flex-direction: column; } }

标题视觉置顶但语义在后？用 flex-direction: column-reverse，不改 HTML 顺序
别用 float: left 包裹 img、再用 position: absolute 定位 figcaption —— 这会让 AT 丢失关联

真正难的不是怎么写标签，而是每次插入图前问一句：它能不能被抽出来放进附录、被论文引用编号、或者脱离当前段落依然说得清？答“能”，才动 figure；答“不能”， + alt 就是最干净的选择。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索前端的入门与实战技巧！