媒体内容标题标签 - <figcaption>

什么是 <figcaption> 标签？

<figcaption> 标签用于为 <figure> 标签中的媒体内容提供标题或说明。它是 <figure> 元素的一个子元素，可以放置在 <figure> 标签的开头或结尾。

基本语法

html 
<figure>
  <img src="image.jpg" alt="图片描述">
  <figcaption>图片标题或说明</figcaption>
</figure>

放置位置

<figcaption> 标签可以放置在 <figure> 标签的开头或结尾：

html 
<!-- 放置在结尾 -->
<figure>
  <img src="painting.jpg" alt="名画">
  <figcaption>名画标题</figcaption>
</figure>

<!-- 放置在开头 -->
<figure>
  <figcaption>名画标题</figcaption>
  <img src="painting.jpg" alt="名画">
</figure>

包含的内容

<figcaption> 标签可以包含文本、链接、强调文本等内容：

html 
<figure>
  <img src="team-photo.jpg" alt="团队照片">
  <figcaption>2025年公司团队合影，<strong>地点：</strong><a href="https://example.com">总部大楼</a></figcaption>
</figure>

全局属性

<figcaption> 标签支持所有HTML全局属性，包括 class、id、style 等。

示例：

html 
<figure>
  <img src="chart.jpg" alt="销售图表">
  <figcaption class="figure-caption">2025年产品销售数据</figcaption>
</figure>

语义化意义

<figcaption> 标签具有明确的语义化意义：

  1. 关联性：与 <figure> 中的媒体内容直接相关

  2. 说明性：提供媒体内容的上下文信息、标题、来源等

  3. 可访问性：帮助屏幕阅读器用户理解媒体内容的含义

  4. SEO友好：为搜索引擎提供有关媒体内容的额外信息

最佳实践

  1. 保持简洁：figcaption应该简洁明了，提供必要的上下文信息

  2. 包含关键信息：包括标题、作者、来源、日期等重要信息

  3. 使用适当的格式：可以使用HTML标签（如 <strong>、<em>、<a>）增强figcaption的可读性

  4. 保持一致性：在整个网站中使用一致的figcaption样式和格式

  5. 避免冗余：不要重复媒体内容已经包含的信息（如alt属性中的内容）

示例

html 
<!-- 基础figcaption -->
<figure>
  <img src="sunset.jpg" alt="海滩日落">
  <figcaption>海滩日落美景</figcaption>
</figure>

<!-- 包含链接的figcaption -->
<figure>
  <img src="mountains.jpg" alt="山脉">
  <figcaption>照片来源：<a href="https://example.com">摄影网站</a></figcaption>
</figure>

<!-- 包含格式化文本的figcaption -->
<figure>
  <img src="product.jpg" alt="新产品">
  <figcaption>新产品发布会：<strong>2025年3月15日</strong>，地点：上海国际会展中心</figcaption>
</figure>

<!-- 视频的figcaption -->
<figure>
  <video src="tutorial.mp4" controls width="640" height="360"></video>
  <figcaption>HTML5视频标签使用教程</figcaption>
</figure>

<!-- 代码片段的figcaption -->
<figure>
  <pre><code>function add(a, b) {
  return a + b;
}</code></pre>
  <figcaption>JavaScript的加法函数实现</figcaption>
</figure>

浏览器兼容性

<figcaption> 标签在所有现代浏览器中都得到支持，包括Chrome、Firefox、Safari、Edge和Opera。对于旧版本的Internet Explorer（IE8及以下），不支持该标签，但可以使用HTML5 Shiv等工具进行兼容处理。

总结

<figcaption> 标签是HTML5中引入的语义化标签，用于为 <figure> 中的媒体内容提供标题或说明。它可以放置在 <figure> 标签的开头或结尾，包含文本、链接等内容。正确使用 <figcaption> 标签可以提高文档的语义化程度、可访问性和SEO友好性。

最后更新：2026-02-07