HTML figure 标签

HTML figure 语法

在 HTML 中，figure 标签通常搭配 figcaption 标签一起，用于定义 “图片 + 图注” 效果（如下图所示）。

HTML figure标签和figcaption标签

语法：

<figure>
    <img src="图片路径" alt="替代文本">
    <figcaption>图注内容</figcaption>
</figure>

说明：

figure 标签用于包含图片和图注，figcaption 标签用于定义图注内容。在实际开发中，对于 “图片 + 图注” 效果，我们都建议使用 figure 和 figcaption 这两个标签来实现，从而使得页面的语义更加良好。

提示: 并不是每一张图片都要使用 figure 标签。如果你的图片不需要图注，则不需要使用 figure 和 figcaption 这 2 个标签，而是直接使用一个 img 标签即可。

HTML figure 摘要

属于	HTML 图片
使用频率	高
兼容性	查看
官方文档	查看
MDN	查看

HTML figure 示例

对于 “图片 + 图注” 效果，很多小伙伴想到的都是使用下面代码来实现。

<div>
    <img src="" alt="">
    <span></span>
<div>

但这种实现方式的语义并不好，我们可以使用 figure 和 figcaption 这 2 个标签来增强图片的语义化。

<figure>
    <img src="" alt="">
    <figcaption></figcaption>
</figure>

示例：figure 标签的基本用法

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        body {
            text-align: center;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <figure>
        <img src="./imgs/bird.jpg" alt="">
        <figcaption>鸟儿</figcaption>
    </figure>
</body>
</html>

页面效果如下图所示。

HTML figure标签示例

分析：

HTML 语义化是非常重要的，它不仅可以提高代码的可读性和可维护性，而且对于 SEO 优化也非常有用。

此外还要了解一点：默认情况下，浏览器会给 figure 标签添加一个较大的外边距（margin），可能导致图片无法贴边显示。在实际开发中，我们通常需要重置这个样式：

figure {
    margin: 0;
}