figure 和 figcaption 仅用于构成独立可引用图元的内容，如图表、代码截图、插画等；figcaption 必须为 figure 的首或尾子元素，alt 与 figcaption 各司其职、不可互换。
figure 和 figcaption 不是“可加可不加”的装饰标签，用错位置或强行套用反而破坏语义——只有当内容构成一个独立、可被单独引用的“图元”时才该用。
什么情况必须用 figure + figcaption
典型场景：一张图表、一段代码截图、一个插画、一个带说明的流程图，它们在文档中可以被编号引用（如“见图3”），且移除后不影响主文逻辑连贯性。
- 文章正文中嵌入的示意图，下方需标注“图1：用户登录流程”
- 技术文档里展示
fetch()的返回结构截图，配文字说明字段含义 - 博客中插入自己绘制的 SVG 架构图，并附简短设计说明
- 不适用：纯装饰性头图、轮播 banner、列表项里的小图标——这些不是“可被引用的图元”
figcaption 必须是 figure 的第一个或最后一个子元素
HTML5 规范明确要求 figcaption 只能出现在 figure 的开头或结尾。放中间会导致解析异常，部分屏幕阅读器可能跳过说明文字。
✅ 正确写法：
<figure> @@##@@ <figcaption>图2：Q1 各渠道新增用户数（单位：万人）</figcaption></figure>
❌ 错误写法（figcaption 在中间）：
<figure> @@##@@ <figcaption>图2：Q1 各渠道新增用户数（单位：万人）</figcaption><p>数据来源：内部 BI 系统</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill7761" title="Article To Html"><img src="https://img.php.cn/upload/skill/000/000/081/179168408018805.jpg" alt="Article To Html" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill7761" title="Article To Html" class="overflowclass">Article To Html</a> <p class="overflowclass">文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。</p> </div> <a rel="nofollow" href="/xiazai/skill7761" title="Article To Html" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> </figure>
如果需要补充来源或注释，应放在 figure 外部，或用 <aside></aside> 包裹（但注意 aside 本身也有语义限制）。
alt 和 figcaption 不重复，但要互补
alt 是图像的替代文本，用于无图环境（如加载失败、盲人读屏）；figcaption 是图元的标题/说明，面向所有用户，强调上下文意义。两者职责不同，不能互相代替，也不应照抄。
- ✅
alt="柱状图：iOS 与 Android 用户留存率对比"（描述图像类型和核心维度） - ✅
figcaption="图4：Android 端次日留存率持续高于 iOS，差距在 7.2%～9.8% 之间"（指出关键结论） - ❌
alt="图4：Android 端次日留存率持续高于 iOS..."（把 figcaption 内容塞进 alt，冗余且破坏可访问性）
响应式图片和 figure 的兼容处理
用 srcset 或 <picture></picture> 时，整个结构仍应包裹在 figure 内，且 figcaption 位置规则不变。常见错误是把 picture 当成普通容器，漏掉 alt 或让 figcaption 悬空。
✅ 推荐结构：
<figure><picture><source media="(min-width: 768px)" srcset="chart-lg.webp"><source srcset="chart-sm.webp">
@@##@@
</source></source></picture><figcaption>图5：工作日 DAU 明显高于周末，峰值出现在周三上午 10 点</figcaption></figure>
关键点：<img src="chart.png" alt="2024 Q1 用户增长趋势"> 仍需 alt，<picture></picture> 自身不支持 alt；figcaption 仍紧贴 picture 块级元素，而非某个 source。
最容易被忽略的是“独立可引用”这个前提——很多团队把每张图都套 figure，结果语义反而稀释。真正该花时间判断的，不是怎么写标签，而是这张图在文档结构里到底算不算一个“图元”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
