HTML如何用figure标签_html figure和figcaption用法【新手必读】

figure用于标记可独立抽离、不影响主文档逻辑的内容块，如图表、代码示例、引文等；figcaption必须为首个或末个直接子元素，用以提供语义化标题，不可替代img的alt属性。

figure 不是“给图片加标题的 div”，它只在内容真正独立、可抽离时才该用；乱套用反而破坏语义，还可能被屏幕阅读器误读。

什么时候必须用 figure 而不是 div

判断标准只有一个：这段内容（图/代码/引用等）拿掉后，主文档逻辑是否依然完整？如果它只是装饰、配图说明正文某一句，就别用 figure。

• ✅ 适用：文章中插入一段独立的 <pre><code> 示例，附带说明文字；学术论文里的实验折线图 + 图注；带出处的历史照片
• ❌ 不适用：产品页里“主图+‘点击查看大图’文字”；轮播图的每一张图；头像旁的昵称标签
• ⚠️ 注意：figure 内容被 CSS 移到侧边栏或附录时，figcaption 必须仍能准确描述它——所以标题里不能写“上图”“左侧示意图”这类上下文依赖词

figcaption 的位置和嵌套规则

figcaption 必须是 figure 的**直接子元素**，且只能出现在第一个或最后一个位置。中间放其他内容（比如多个 img）没问题，但标题不能夹在中间。

• 正确：<figure><figcaption>...</figcaption><img></figure> 或 <figure><img><figcaption>...</figcaption></figure>
• 错误：<figure><img><p>说明</p></figure>（p 不是 figcaption）
• 错误：<figure><img><figcaption></figcaption><img></figure>（figcaption 不在首尾）

和 img 的 alt 属性是什么关系

alt 是图像的**替代文本**（无图时显示、供屏幕阅读器朗读），figcaption 是它的**标题或上下文说明**（解释这张图在当前文档中扮演什么角色）。两者不互斥，要共存。

立即学习“前端免费学习笔记（深入）”；

• 例如：<img src="chart.png" alt="2025年用户增长曲线图"> + <figcaption>图1：A/B测试组与对照组的月活增长率对比（数据来源：内部后台）</figcaption>
• 如果 alt 已经足够详细（比如长描述），figcaption 可以更简略，聚焦在编号、来源、类型等元信息上
• 千万别用 figcaption 替代 alt——没有 alt 的图对视障用户就是“一张没名字的空白”

兼容性和样式控制要点

IE9+、所有现代浏览器都支持 figure 和 figcaption，但默认样式极简（figcaption 就是普通块级文本），必须靠 CSS 控制外观和布局。

• 常见坑：直接写 figcaption { text-align: center; } 会把整段文字居中，但若内容过长换行，效果难看；建议用 display: flex 或 max-width 约束宽度
• 不要依赖 figure 自动实现“图文环绕”——它本身不带浮动逻辑，得用 float 或 display: grid 配合
• SEO 和可访问性收益不会自动发生：只有当 figcaption 文字真正描述内容本质（而非“一张图”），且结构严格符合规范时，辅助技术和搜索引擎才能可靠识别

最常被忽略的是自包含性判断——很多人看到“有图有文”就条件反射套 figure，结果让语义变得模糊。宁可多花十秒想清楚“它离开这儿还能自己说清一件事吗”，再决定要不要用。