HTML的figure和figcaption标签怎么用？-html教程-PHP中文网

HTML的figure和figcaption标签怎么用？

煙雲

发布： 2025-07-12 15:55:01

原创

142人浏览过

figure和figcaption的核心作用是为网页中的独立内容提供语义化容器及标题。1. figure作为独立内容单元，可包含图片、代码、引用、视频等，即使被移动仍保持上下文；2. figcaption必须位于figure首或尾，提供描述性标题；3. 它们提升语义化、可访问性和seo，帮助机器理解内容结构；4. figure不仅限于图片，还可包裹代码块、引文、媒体等；5. 使用时需避免仅用于样式、确保figcaption位置正确、保留img的alt属性，并调整默认样式以适应布局。

HTML的figure和figcaption标签怎么用？

figure 和 figcaption 这两个 HTML 标签，说白了，就是用来给你的网页内容——尤其是那些独立的、可以被挪动位置而不影响文章主体的图片、代码块、引用、视频等——提供一个语义化的容器，并为它加上一个描述性的标题。它们的存在，让浏览器、搜索引擎和辅助阅读设备能更好地理解这部分内容的含义和它与标题的关系。

解决方案

figure 标签被设计为一个独立的、自我包含的内容单元，通常会包含一个或多个图像、代码片段、视频、音频、表格或引文。它的一个核心特点是，即使它被从文档的当前位置移开，比如放到附录或者侧边栏，它所包含的内容依然能保持其意义和上下文。

而 figcaption 标签，顾名思义，就是 figure 的“标题”或“说明”。它必须是 figure 元素的第一个或最后一个子元素。它为 figure 中的内容提供一个简短的描述或引用来源。

立即学习“前端免费学习笔记（深入）”；

来看一个最常见的用法：

<figure>
  @@##@@
  <figcaption>图1: 这是一张示例图片，展示了figure和figcaption的用法。</figcaption>
</figure>

登录后复制

在这个例子里，img 标签是 figure 的内容，而 figcaption 则提供了对这张图片的说明。这种组合不仅让视觉上内容更清晰，更重要的是，它赋予了这部分内容更强的语义化意义，对于可访问性（比如屏幕阅读器）和搜索引擎优化都有很大的帮助。它告诉机器：“嘿，这里有一块独立的内容，它的标题是这个。”

为什么我们需要使用figure和figcaption，它们有什么实际意义？

我个人觉得，这两个标签的价值远不止于“看起来像个图片带标题”那么简单。它们的核心意义在于语义化和可访问性。

首先，从语义化的角度讲，过去我们可能就是用一个 div 包着 img 和一个 p 标签来做标题。但 div 没有任何语义，它只是一个通用的容器。而 figure 和 figcaption 明确地告诉浏览器和开发者：“这是一块独立的、可以被引用的内容，并且它有自己的说明。”这种明确的语义对于机器理解网页内容至关重要。搜索引擎在抓取和索引页面时，能更好地识别出哪些是主要内容，哪些是辅助性的、可独立引用的内容。

其次，对于可访问性来说，它们的价值更是无法替代。想象一下，一个使用屏幕阅读器的用户在浏览网页。当屏幕阅读器遇到一个 figure 元素时，它知道这里有一个独立的、自我包含的内容块，并且会查找 figcaption 来为用户朗读这个内容的描述。这比单纯的 img 标签的 alt 属性（虽然 alt 也很重要，且不可替代）提供了更丰富的上下文信息。用户能快速理解这张图、这段代码或者这个引用的具体含义，而不是仅仅听到“图片”或“代码块”。

再者，这种结构也让内容的重用和移植变得更简单。一个 figure 块可以被轻松地复制粘贴到文章的其他部分，甚至其他页面，而它的含义和标题依然保持完整。它就像一个乐高积木，可以独立存在，也可以组合起来。

除了图片，figure还能包含哪些类型的媒体或内容？

这大概是很多初学者会忽略的一点，大家一提到 figure，脑子里可能就只剩下图片了。但实际上，figure 的能力远不止于此。它是一个非常通用的“独立内容单元”容器。

举几个例子：

代码片段： 在技术博客里，我们经常会贴代码。把 pre 和 code 标签包在一个 figure 里，然后用 figcaption 来注明这段代码的作用或者它是哪个文件的代码，这简直是完美。
```
<figure>
  <pre class="brush:php;toolbar:false"><code>
    function greet(name) {
      console.log(`Hello, ${name}!`);
    }
    greet('World');
  </code>
```
登录后复制
代码清单1: 一个简单的JavaScript问候函数。

引文（Blockquotes）： 当你引用一段长文本时，特别是带有出处的引文，figure 也能派上用场。

<figure>
  <blockquote>
    设计不仅是它看起来的样子和感觉。设计是它如何工作。
  </blockquote>
  <figcaption>—— 史蒂夫·乔布斯</figcaption>
</figure>

登录后复制

视频或音频： 嵌入的媒体内容，比如 YouTube 视频或者播客片段，也可以用 figure 来包裹，并用 figcaption 提供视频的标题或内容摘要。

<figure>
  <video controls src="path/to/your/video.mp4">
    您的浏览器不支持视频播放。
  </video>
  <figcaption>视频1: 这段视频展示了如何使用HTML5视频标签。</figcaption>
</figure>

登录后复制

表格： 复杂的表格，特别是需要一个标题来解释其内容的，也可以放在 figure 中。

总之，任何可以被视为“独立内容单元”且可能需要一个标题来解释其上下文的内容，都可以考虑使用 figure。这让你的文档结构更加清晰，也更符合现代 Web 标准。

使用figure和figcaption时，有哪些常见的误区或最佳实践？

在使用 figure 和 figcaption 时，确实有些地方需要注意，避免踩坑，同时也能让你的代码更健壮。

一个常见的误区是把 figure 当成一个纯粹的样式容器。记住，figure 是一个语义标签，它表示的是内容本身的独立性和可引用性。如果你只是想给一张图片加个边框或者背景色，而这张图片并没有独立的上下文或者不需要一个标题，那么一个普通的 div 或者直接给 img 标签加样式可能更合适。过度使用 figure 反而会稀释其语义价值。

另一个需要强调的点是，figcaption 必须是 figure 元素的第一个或最后一个子元素。如果你把它放在了中间，或者放在了 figure 之外，那么它就失去了作为 figure 标题的语义关联。浏览器可能不会报错，但语义会丢失，对辅助技术也不友好。

关于可访问性，这里有个重要的细节：即使你使用了 figcaption，图片内部的 alt 属性依然不能省略。figcaption 提供了对整个 figure 内容的上下文描述，而 img 标签的 alt 属性则是对图片本身的简短替代文本。两者是互补关系，不可替代。屏幕阅读器会先读 alt，然后结合 figcaption 提供更全面的信息。

<!-- 错误示范：没有alt属性 -->
<figure>
  @@##@@
  <figcaption>这张图展示了什么。</figcaption>
</figure>

<!-- 正确示范：alt和figcaption都存在 -->
<figure>
  @@##@@
  <figcaption>这张图展示了什么，以及更详细的背景信息。</figcaption>
</figure>

登录后复制

最后，figure 标签通常会有一些默认的浏览器样式，比如外边距（margin）。这可能导致它在你的布局中显得有点突兀。所以在实际项目中，你可能需要通过 CSS 来重置或调整 figure 的默认样式，以使其更好地融入你的设计。这不算什么技术错误，只是一个常见的布局调整点。

总之，figure 和 figcaption 是 HTML5 中非常实用的语义化标签，正确使用它们能让你的网页内容更清晰、更易于理解，并且对所有用户都更友好。