HTML figcaption 标签

HTML figcaption 语法

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

HTML figure标签和figcaption标签

语法：

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

说明：

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

注意:

figcaption 标签只能放在 figure 标签内部使用。
figcaption 不一定非要放在图片下面。我们可以把它写在 figure 内部的最前面（作为顶部标题），或者最后面（作为底部标题）。
如果你的图片不需要图注，则不需要使用 figure 和 figcaption 这 2 个标签。

HTML figcaption 摘要

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

HTML figcaption 示例

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

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

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

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

示例：figcaption 标签的基本用法

运行代码

<!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 figcaption标签示例

分析：

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