HTML中<figure>标签与<img>标签的区别是什么？

1. 语义定位与核心用途 #

• <img>是行内替换元素，本质就是用来嵌入单张图片的基础标签，只负责图像内容的呈现，语义单一，仅表示“此处有一张图片”。
• <figure>是块级语义容器，用于包裹独立的媒体内容单元——可以是<img>、<svg>、<video>，甚至代码块、手绘图表等，同时可搭配<figcaption>添加对应的标题或说明文字，代表这是一个可独立引用、完整的内容模块（比如文章里的插图带标注、数据图表带说明）。

2. 内容承载与结构差异 #

• <img>只能承载图像资源，通过src指定图片地址，alt提供替代文本，本身不支持子元素。示例代码：

  <img src="mountain.jpg" alt="雪山远景">
  

• <figure>作为容器，可包含一个或多个媒体元素，同时通过<figcaption>补充说明，结构更完整。示例代码：

  <figure>
    <img src="weather-chart.png" alt="2024年夏季气温变化图">
    <figcaption>图1：2024年7-8月全国平均气温波动曲线</figcaption>
  </figure>
  

3. 布局与样式控制差异 #

• <img>默认是行内元素，需通过display: block等CSS属性改为块级，本身不提供容器级的布局能力，排版需依赖父元素或额外的CSS调整。
• <figure>默认是块级元素，浏览器会自带默认外边距，可直接作为独立布局单元，方便整体控制媒体内容与说明的排版（比如给整个图+说明模块加边框、居中展示等）。

4. 可访问性与语义化价值差异 #

• <img>仅能传递“图像存在”的基础信息，辅助技术（如屏幕阅读器）只会播报图像的替代文本。
• <figure>会明确告诉浏览器和辅助技术：“这是一个独立的媒体内容块，附带专属说明”，屏幕阅读器会自动关联<figure>与<figcaption>的关系，将说明文字与图像内容绑定播报，大幅提升内容的可访问性。

内容的提问来源于stack exchange，提问作者Nikhil Sharma