figure标签用于语义化包裹独立内容如图片、图表等，figcaption为其提供标题说明，二者结合提升可访问性与结构清晰度，推荐在图文组合中使用并确保alt属性与语义正确。
在HTML中，figure 和 figcaption 标签用于语义化地组织独立的插图内容及其标题，比如图片、图表、代码片段等。它们的组合使用有助于提升页面可访问性和结构清晰度。
figure标签的作用与使用场景
figure 是一个语义容器，用来包裹文档中独立的内容块，这些内容可以被移动到文档其他位置（如侧边栏或附录）而不影响主文理解。常见用途包括：- 单张图片或插图
- 一组相关图像
- 图表、统计图
- 代码示例
- 引用的诗句或段落
figcaption标签的功能与位置
figcaption 为 figure 中的内容提供标题或说明，是可选但推荐使用的标签。它必须作为 figure 的直接子元素，并且只能出现一次（也可省略），通常放在开头或末尾。- 若存在，一般置于 figure 内部第一个或最后一个子元素位置
- 用于描述 figure 内容的主题或简要说明
- 支持文字、链接、甚至简单结构化内容
标准图文组合写法示例
以下是一个符合规范的图文组合结构：<figure> <img src="chart-sales.png" alt="2023年季度销售趋势图"> <figcaption>图1：2023年各季度销售额变化趋势</figcaption> </figure>其中 img 提供视觉内容，alt 文本确保无障碍访问，figcaption 补充语义标题。这种写法既满足语义化要求，也利于屏幕阅读器识别。
注意事项与最佳实践
正确使用 figure 和 figcaption 需注意以下几点：- 不要仅为了布局而使用 figure，应基于语义而非样式需求
- 即使没有 figcaption，也应确保 img 的 alt 属性有意义
- 避免将大段文本或非独立内容包裹在 figure 中
- 多个相关图片可用一个 figure 包裹，配一个统一说明
- 保持结构简洁，不要嵌套过多层级
