在HTML页面开发中，为图像添加对应的描述信息是非常常见的需求，使用figure和figcaption标签可以规范地实现图像和描述的关联，同时提升页面的语义化程度。
figure和figcaption标签的基本介绍
figure是HTML5新增的语义化标签，用于表示一段独立的内容，这段内容通常和主文档有关，但可以独立于主文档存在，比如图像、图表、代码示例等。figcaption是figure的子标签，专门用于为figure内的内容添加标题或描述信息，一个figure元素最多可以包含一个figcaption元素。
基本语法结构
最基础的figure和figcaption搭配用法如下：
<figure> <img src="example.jpg" alt="示例图像"> <figcaption>这是示例图像的描述信息</figcaption> </figure>
在上述结构中，figcaption里的文字就是对应img图像的描述内容，浏览器会默认识别二者属于同一个语义单元。
figcaption的位置规则
figcaption作为figure的子元素，位置可以是figure内部的第一个子元素，也可以是最后一个子元素，两种位置都是符合规范的：
figcaption在figure开头
<figure> <figcaption>风景实拍图</figcaption> <img src="scenery.jpg" alt="自然风景照片"> </figure>
figcaption在figure结尾
<figure> <img src="product.jpg" alt="电子产品展示图"> <figcaption>2023年新款智能手表外观展示</figcaption> </figure>
实际开发中可以根据页面排版需求选择合适的位置，两种写法的语义效果是一致的。
多图像的场景处理
如果figure内部包含多张图像，只需要一个figcaption就可以为所有图像添加统一的描述，不需要为每张图像单独设置figcaption：
<figure> <img src="page1.jpg" alt="手册第一页"> <img src="page2.jpg" alt="手册第二页"> <img src="page3.jpg" alt="手册第三页"> <figcaption>产品使用手册前三个页面的内容展示</figcaption> </figure>
和普通div实现方式的对比
很多开发者会用div配合p标签实现图像描述，我们可以对比两种方式的差异：
| 实现方式 | 语义化程度 | 可访问性 | 代码关联度 |
|---|---|---|---|
| div + p | 无语义，只是普通容器 | 辅助工具无法识别图像和描述的关联 | 仅通过位置相邻关联，无明确绑定 |
| figure + figcaption | 明确的语义关联 | 辅助工具可识别描述属于对应图像 | 标签层级明确绑定，结构清晰 |
注意事项
- figcaption必须是figure的直接子元素，不能嵌套在其他子元素内部，否则无法正确关联。
- 一个figure元素只能包含一个figcaption，如果需要多段描述，可以在figcaption内部用其他标签划分，不要添加多个figcaption。
- figure内部不一定只能放图像，也可以放代码块、视频等内容，figcaption同样可以为这些内容添加描述。
- 如果图像没有对应的描述信息，不需要强行添加figcaption，避免冗余内容。
实际开发示例
下面是一个完整的页面片段示例，展示如何用figure和figcaption实现带描述的产品图展示：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>产品展示页面</title>
<style>
figure {
width: 300px;
border: 1px solid #eee;
padding: 10px;
border-radius: 4px;
}
figcaption {
text-align: center;
color: #666;
margin-top: 8px;
font-size: 14px;
}
</style>
</head>
<body>
<figure>
<img src="https://ipipp.com/product-img.jpg" alt="无线蓝牙耳机产品图" style="width:100%;">
<figcaption>新款降噪无线蓝牙耳机，续航时长可达24小时</figcaption>
</figure>
</body>
</html>
通过上述示例可以看出，使用figure和figcaption实现的图像描述结构清晰，语义明确，也方便后续的样式调整和维护。
HTMLfigurefigcaption图像描述语义化修改时间：2026-06-19 00:30:33