figure标签作用及使用技巧

本文深入解析了HTML中`figure`标签的语义本质与正确用法：它并非简单的“带标题的图片容器”，而是专为可独立抽离、不影响正文逻辑的内容（如架构图、API响应示例、实验照片等）设计的语义化结构；强调`figcaption`必须是直接子元素且唯一，须与`alt`属性明确分工——前者说明图在文档中的角色（含编号、来源、用途），后者提供图像缺失时的替代描述；同时指出多图共用`figure`的前提是信息不可拆分且能被单一标题统一概括，并警示DOM顺序对辅助技术阅读流的关键影响——视觉排版不等于语义顺序，错误的HTML结构会破坏可访问性。掌握这些，才能真正用好`figure`，兼顾语义清晰、SEO友好与无障碍体验。

figure不是“给图片加标题的div”，它只在内容可抽离时才该用

直接删掉这个块，主文逻辑是否还成立？如果答案是“是”，那它大概率适合figure。比如技术文档里的架构图、API响应截图、论文中的实验照片——这些内容哪怕挪到附录或侧栏，也不影响正文阅读。反之，段落中一句“如上图所示”的配图，img加alt就够了，硬套figure反而让语义混乱，屏幕阅读器可能误判为独立引用单元。

• ✅ 正确场景：

  <code>{ "status": "ok" }</code>

• ❌ 错误场景：产品页主图+“点击查看大图”文字、轮播图每一张 banner、头像旁的昵称标签
• ⚠️ 注意：figure不保证视觉居中或环绕效果，它只声明语义；要实现图文排版还得靠 CSS（比如 display: grid 或 float）

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

figcaption不能嵌在div里，也不能出现两次，更不能夹在两个img中间。浏览器会忽略第二个figcaption，而屏幕阅读器可能因此跳读或重复朗读。

• ✅ 正确写法（推荐放首）：

  

• ✅ 正确写法（放尾也行）：

  

• ❌ 错误写法：

  说明

  （p不是figcaption）
• ❌ 错误写法：

figcaption和alt属性分工明确，缺一不可

alt是图像缺失时的替代文本，供屏幕阅读器朗读、SEO抓取；figcaption是这张图在当前文档中的角色说明，比如编号、数据来源、用途。两者不互换，也不互相替代。

• ✅ 合理搭配：
• ⚠️ 常见误区：把长描述全塞进figcaption，却留空alt——视障用户听到“一张图”，然后沉默，因为alt为空
• ? 提示：若alt已足够详细（如含单位、趋势、关键数值），figcaption可精简为编号+来源，避免冗余

一组图共用一个figure，必须满足“不可拆分”和“统一概括”两个条件

多个img可以包在一个figure里，但前提是它们共同构成一个信息整体，且figcaption能一句话准确涵盖全部，而不是“见下图”“如下几张图”这种空泛表述。

• ✅ 合理用法：显微镜下同一细胞的明场/荧光/电镜三图，figcaption写“图A1–A3：HeLa细胞核形态对比（标尺：5μm）”
• ❌ 反例：首页轮播图5张商品 banner 全塞进一个figure，配一句“热门推荐”——每张图语义独立，应各自用figure
• ⚠️ 风险点：用 CSS 把figure内容移到侧栏后，若figcaption里写“上图”“左侧示意图”，上下文就断了

真正容易被忽略的是 DOM 顺序和语义流的绑定关系：即使你用 CSS 把 figcaption 视觉上压到图上方，只要它在 HTML 中写在 img 后面，屏幕阅读器仍会先读图再读标题——认知路径就被打乱了。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~