figure/figcaption 仅用于具有“可抽离性”的独立内容单元（如学术图表、代码示例），必须满足移至附录/侧栏不破坏主文逻辑；figcaption 应置于 figure 首子元素以保障读屏语义流，且不可替代 img 的 alt 属性。
figure 和 figcaption 不是“给图片加个居中文字”的样式工具，而是向浏览器、搜索引擎和读屏软件明确声明：“这一块内容是自包含的、可被独立引用的单元，这段文字就是它的官方说明”——用错地方反而会破坏语义。
什么时候必须用 figure/figcaption？
只在内容满足「可抽离性」时才用：这张图（或代码块、图表、引用）能否从正文中拿走，放到附录、侧栏或参考文献里，而不影响主文逻辑？
- ✅ 学术论文里的“图3.2：系统架构图”——必须用，否则交叉引用和读屏识别失效
- ✅ API 文档中一段
<pre><code>{ "status": "ok" }</code></pre>加说明“响应示例”——适合包裹，figcaption标注用途 - ❌ 文章段落中解释某句话的配图（如“如图所示，点击按钮后状态变化”）——直接用
<img alt="">更合适，figure反而语义过载 - ❌ 轮播图、头像、banner 图、纯装饰 icon——一律不用，它们不属于“可被引用的独立内容单元”
figcaption 必须放在 figure 的第一个子元素位置
HTML 规范没强制顺序，但 DOM 顺序决定读屏器播报逻辑。先读 figcaption 再读图，用户才能带着上下文理解图像；若写在后面，会先听到“一张图”，再听到“这是系统流程图”，认知断层明显。
- 推荐始终把
figcaption放在figure的第一个子元素位置 - 不要用
flex-direction: column-reverse或order去“视觉上倒序”——这会破坏语义流 - 浏览器默认渲染时，无论
figcaption写在前还是后，通常都显示在底部；但语义和读屏逻辑只认 DOM 顺序 - 若设计稿要求标题在上、说明在下，且语义上说明更重要，仍应保持
figcaption在前，靠 CSS 控制视觉对齐（如text-align: center、margin-bottom: 0.75em）
常见错误写法与兼容性注意点
这些错误不会让页面“不显示”，但会让语义失效、SEO 减分、读屏器误读：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 在一个
figure里塞两个figcaption——违反规范，第二个会被忽略或导致解析异常 - 把说明文字包在
<div><p></p></div>里再放进figure——辅助技术无法识别这是“图的标题”，只能当普通段落 - 用
figure包含带操作按钮的图（如“截图+下载按钮”）——figure只管图与说明这对语义单元；按钮应放在figure外，用<div class="figure-wrapper">统一包裹 -
figcaption中写“上图”“左侧示意图”这类上下文依赖词——figure内容可能被 CSS 移到侧边栏或附录，标题必须自解释
多张图共用一个 figcaption 怎么写？
多个相关图片可用一个 figure 包裹，配一个统一说明，但前提是它们构成一个不可分割的内容单元（如“故宫系列照片”），而不是强行拼凑。
- 正确：
<figure><img src="p1.jpg" alt="北京故宫外景"><img src="p2.jpg" alt="故宫内部庭院"><figcaption>作者于2023年拍摄的北京故宫系列照片</figcaption></figure> - 错误：把轮播图的每一张图都塞进同一个
figure——轮播组件本身不是独立内容单元，figure表达的是“一个”可被单独引用的实体（比如“图3：用户登录流程图”），不是“一组” - 若需统一说明“图1–图4：系统架构演进”，应在
figure外用<section>或<h2>标注，而不是让一个figcaption覆盖多个figure
最容易被忽略的一点是：即使不用 figcaption，也必须确保 <img> 的 alt 属性有意义——figure 不是 alt 的替代品，二者职责不同。语义结构一旦写错，后期靠 CSS 或 JS 强行补救，只会让可访问性和维护成本越来越高。
