HTML 中 figcaption 标签的作用与使用场景
一、figcaption 的定义与语义
在 HTML5 规范中，figure 元素用于标识自包含的可独立引用的内容，而 figcaption 提供对该内容的可选说明文本。该文本与图片、图表、演示等媒体内容相关，具有语义化的作用，能帮助搜索引擎理解页面结构和内容上下文。
使用 figcaption 的主要目的是为图像、图表等提供一个可达的描述，提升可访问性，尤其是对屏幕阅读器用户。
示例用于展示 figcaption 的基本用法，通常放在 figure 标签内部，紧随媒体元素之后以实现简洁的结构与解析。
<figure><img src="cat.jpg" alt="猫的照片" /><figcaption>这是对图片的简短描述或标题。</figcaption>
</figure>
二、figcaption 与 figure 的关系
figcaption 必须和 figure 一起使用，它不是独立的块级内容。通过将媒体与对应的描述放在同一个 figure 容器中，可以实现更清晰的文档结构。
在屏幕阅读器中，figcaption 会被读出为该图的说明文本，帮助用户理解媒体的目的和上下文。
<figure><img src="diagram.svg" alt="" /><figcaption>系统架构图：显示组件和数据流。</figcaption>
</figure>
三、可访问性与语义化的提升
对于视力受限的用户，figcaption 提供了简洁而具体的说明，从而降低对图像的认知负担。结合 alt 属性，figcaption 提供双重描述：图像的替代文本与视觉呈现的说明两者互补。
可访问性 并不仅限于屏幕阅读器，还包括键盘导航和上下文理解，figcaption 的存在让媒体内容的目的更加清晰。
<figure><img src="graph.png" alt="年度销售趋势图" /><figcaption>年度销售趋势：2023年与2024年的对比。</figcaption>
</figure>
四、figcaption 的使用场景
figcaption 的典型使用场景包括图像、表格、图表、插图、海报等媒体元素的描述。除了图片，figcaption 也可用于以下情况：
- 对图像中的重要细节提供文本说明；
- 为数据可视化提供标题与注释；
- 在多媒体教程中对步骤或要点进行简短描述。
下面的例子展示了在数据图表中如何应用 figcaption 来增强信息传达。
<figure><canvas id="salesChart" width="600" height="400"></canvas><figcaption>数据图：按月汇总的销售额，单位为千美元。</figcaption>
</figure>
与无 figcaption 的对比与实践要点
一、使用 figcaption 的优势
引入 figcaption 能显著提升媒体的可访问性与语义化水平。对于站点的结构化数据，搜索引擎抓取上下文信息也会更准确。
结构清晰：媒体与描述在同一个 figure 容器内，便于样式控制和 DOM 关系理解。
<figure><img src="portrait.jpg" alt="女子肖像" /><figcaption>肖像：时尚摄影，拍于巴黎。</figcaption>
</figure>
二、常见错误与避免
常见错误包括将 figcaption 放在 figure 外、为 figcaption 提供空描述、或在需要装饰性图片时忽略 alt 属性。正确的做法是确保 figcaption 的文本与媒体内容高度相关且简明。
替代文本（alt）应独立表达图片信息，而 figcaption 提供补充性描述。
<figure><img src="map.png" alt="城市热力图展示主要区域分布" /><figcaption>热力图显示不同区域的访问密度。</figcaption>
</figure>
