别把语义当摆设：深度解析 HTML figure 的正确打开方式

做前端这几年，见过太多类似的场景：设计师给了张架构图，下面带个小注脚。大家手一快，下意识就用个 <div class="container"> 把 <img> 和 <p> 包起来了。结构简单，样式随便调，好像也没毛病。可你有没有想过，这段结构对屏幕阅读器、搜索引擎来说，到底意味着什么？

很多项目上线前检查，大家都盯着 JS 报错和 CSS 兼容性看，却唯独漏掉了最底层的语义表达。今天咱们不聊虚的，专门拆解一下 <figure> 这个常被忽视的语义化标签。

并不是所有的图片包装都是 figure

很多人误以为 <figure> 仅仅是“图片容器”，这个理解偏差其实挺大。在 W3C 的标准定义里，它代表的是独立的流内容。

什么意思呢？就是这块内容虽然和主文档上下文相关，但就算你把它移到文章末尾、侧边栏，甚至单独拿出来展示，也不会影响正文的逻辑连贯性。典型的适用场景包括：配图、代码片段、数据表格或者引用块。

从 div 到 figure 的细节升级

回到最开始那个痛点。如果你之前习惯这么写：

<div class="wrapper">
  <img src="data-chart.png" alt="2023 年用户增长趋势">
  <p>数据来源：年度运营报告</p>
</div>

试着改成下面这样：

<figure>
  <img src="data-chart.png" alt="2023 年用户增长趋势">
  <figcaption>数据来源：年度运营报告</figcaption>
</figure>

乍一看代码行数没变，但内在逻辑完全不同了。<figcaption> 的存在，正式告诉浏览器和辅助工具：“这是这张图或这段内容的专属说明”，而不是页面上随便飘的一段普通文本。

超越图片：figure 的隐藏用法

说到这儿，可能有人会问：“除了图片还能装啥？”这里就有信息增量了。

在一篇技术长文中，如果你想展示一段核心代码，并且附带一段解释性文字，完全可以用 <figure> 包裹 <pre><code>，并在内部放置 <figcaption> 说明这段代码的功能作用。同理，复杂的 SVG 矢量图、带有标注的信息图表，统统都能塞进去。

这种自成一体的完整性，才是 figure 的核心价值所在。它明确了内容与说明之间的强绑定关系。

为什么我们要在乎这个？

用了它有什么实际收益？最直接的感受来自无障碍访问（A11y）。当视障用户使用屏幕阅读器浏览网页时，能明确感知到这是一个“图示区域”，可以智能地跳过或者重点听取说明。这对于提升产品的包容性至关重要。

对于 SEO 来说，结构化数据越清晰越好。爬虫更容易理解图片与文本的关联，知道哪段文字是在解释哪张图，间接有利于内容的分类索引。

什么时候不该用它？

当然，也不是所有图片都需要图灵般精确。如果是纯装饰性的图标、背景纹理，或者是流程图中必不可少、缺少后无法理解上下文的步骤，强行套 <figure> 反而会造成语义污染。

这种情况下，用普通的 <span> 或者 role="presentation" 处理会更干净利落。语义化是为了准确表达意图，不是为了堆砌标签。

写在最后

写代码像是在盖房子，地基打得直不直，决定了后期维护累不累。