HTML中figure和img区别 HTML中figure标签案例解析-html教程-PHP中文网

figure 是语义容器而非 img 替代品，用于标识独立、可移动、自带说明的内容单元；必须含子元素（如 img），figcaption 须为首或尾子元素，alt 与 figcaption 各司其职。

html中figure和img区别 html中figure标签案例解析

figure 不是 img 的替代品，而是语义容器

figure 和 img 解决的是完全不同的问题：img 是一个内联内容元素，负责把一张图“画出来”；而 figure 是一个块级语义容器，负责声明“这段内容（不管是不是图）是一个独立、可移动、自带说明的单元”。它不渲染任何视觉样式，也不处理图像加载逻辑——这些仍得靠 img 或其他子元素完成。

常见错误现象包括：用 figure 替代 img 导致页面空白（忘了往里放 img）、给 figure 加 src 属性（它根本不支持）、或把装饰性图标硬塞进 figure（破坏语义，反而降低可访问性）。

figure 必须包含至少一个内容子元素（如 img、code、video），否则语义失效
figcaption 只能是 figure 的第一个或最后一个子元素，放中间会被解析为普通内容，失去标题语义
如果图只是段落里的插图、无标题、也不需要独立引用，直接用 img 更轻量、更准确

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

当你需要明确告诉浏览器和辅助技术：“这个内容块可以脱离上下文存在，且它的标题属于它自己”，就该用 figure。典型场景包括：

技术文档中的代码截图 —— figure 包裹 pre + code，figcaption 写“示例 3-2：React useEffect 清理函数写法”
新闻稿里的信息图 —— figure 包裹 img，figcaption 写“图 1：2025 年全球碳排放趋势（数据来源：IEA）”
博客中的引用截图 —— figure 包裹 blockquote，figcaption 标注出处和作者

用 div + p 模拟也能实现视觉效果，但会丢失结构语义：屏幕阅读器无法识别这是“图+标题”的绑定关系，SEO 工具无法提取图注作为上下文线索，CSS 媒体查询时也无法统一控制所有“图元”的响应行为。

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

figure 中嵌套 img 的正确写法与易错点

最常被忽略的一点：在 figure 里用 img，alt 属性依然必须存在，且语义职责不变——它描述图像本身；而 figcaption 描述的是整个图元的上下文意义。两者不可互相替代。

<figure>
  @@##@@
  <figcaption>图 2：2025 年第一季度销售分布（单位：万元）</figcaption></figure>

alt 要具体到图像内容细节（比如数值、趋势、对象），不能只写“销售图表”
figcaption 可含编号、来源、说明性补充，但不宜重复 alt 已表达的信息
不要给 figure 设置 width/height —— 这些应作用于内部的 img 或通过 CSS 控制容器尺寸
若图需响应式缩放，优先用 CSS 的 max-width: 100% + height: auto，而非在 img 上写死像素值

figure 在现代布局中的实际影响

figure 本身不改变渲染流，但它让 CSS 和 JS 更容易做“语义化批量操作”。例如：

CSS 中用 figure img { border-radius: 4px; } 统一处理所有图元内的图像，比写一堆类名更干净
打印样式表中用 @media print { figure { page-break-inside: avoid; } } 防止图元被截断
无障碍工具依赖 figure + figcaption 的组合来生成图像索引或导出附录
某些 SSR 框架（如 Next.js）会基于 figure 自动注入 loading=lazy 或预设宽高，但前提是内部 img 正确设置了 width/height