使用figure和figcaption包裹图片和说明

在HTML5中，<figure>和<figcaption>元素为开发者提供了语义化的方式来标记图片及其相关说明。正确使用这些元素不仅能提升网页的可访问性，还能改善SEO表现。

基本规范

<figure>元素用于包含独立的内容流（如图片、图表、代码片段等），而<figcaption>则用于为这些内容提供标题或说明。

正确用法

html 复制代码

<figure>
  <img src="sunset.jpg" alt="海滩日落景色">
  <figcaption>图1：马尔代夫海滩的壮丽日落</figcaption>
</figure>

错误用法

html 复制代码

<!-- 错误1：缺少figcaption -->
<figure>
  <img src="sunset.jpg" alt="海滩日落景色">
</figure>

<!-- 错误2：figcaption不在figure内 -->
<img src="sunset.jpg" alt="海滩日落景色">
<figcaption>图1：马尔代夫海滩的壮丽日落</figcaption>

高级用法与示例

多个图片共享一个说明

html 复制代码

<figure>
  <img src="product-front.jpg" alt="产品正面视图">
  <img src="product-side.jpg" alt="产品侧面视图">
  <figcaption>图2：我们的新产品从不同角度的展示</figcaption>
</figure>

包含其他媒体类型

html 复制代码

<figure>
  <video controls>
    <source src="demo.mp4" type="video/mp4">
  </video>
  <figcaption>视频演示：如何使用我们的产品</figcaption>
</figure>

代码示例

html 复制代码

<figure>
  <pre><code>
    function greet() {
      console.log("Hello, world!");
    }
  </code></pre>
  <figcaption>代码1：简单的JavaScript问候函数</figcaption>
</figure>

常见错误与修正

错误：将figure用于装饰性图片

html 复制代码

<!-- 错误：装饰性图标不应使用figure -->
<figure>
  <img src="icon-star.png" alt="">
</figure>

<!-- 正确：装饰性图片直接使用img -->
<img src="icon-star.png" alt="" class="decoration-icon">

错误：过度使用figure

html 复制代码

<!-- 错误：每个小图片都使用figure会降低语义价值 -->
<figure>
  <img src="avatar.jpg" alt="用户头像">
  <figcaption>张三的头像</figcaption>
</figure>

<!-- 正确：用户头像等简单元素不需要figure -->
<img src="avatar.jpg" alt="张三的头像" class="user-avatar">

错误：figcaption内容不恰当

html 复制代码

<!-- 错误：figcaption不应包含无关内容 -->
<figure>
  <img src="chart.png" alt="销售增长图表">
  <figcaption>
    <h3>销售报告</h3>
    <p>联系我们获取完整报告：sales@example.com</p>
  </figcaption>
</figure>

<!-- 正确：figcaption应简洁描述内容 -->
<figure>
  <img src="chart.png" alt="销售增长图表">
  <figcaption>图3：2023年季度销售增长趋势</figcaption>
</figure>

最佳实践

语义优先：只在内容确实需要独立说明时使用figure
alt文本：即使有figcaption，img仍需提供有意义的alt属性
CSS友好：figure默认有margin，重置样式时注意保持语义
嵌套关系：确保figcaption是figure的直接子元素
SEO优化：figcaption中的关键词有助于图片搜索排名

通过遵循这些规范，开发者可以创建结构清晰、语义明确且对辅助技术友好的网页内容。