HTML <figure> 标签-代码号

HTML <figure> 标签：语义化嵌入内容与图文关联

本节课将详细讲解 HTML <figure> 标签的作用、语法规则及实际应用场景。<figure> 是一种用于包裹独立内容单元（如图像、图表、代码片段等）并支持关联标题描述的语义化容器标签，能够有效提升文档的结构清晰度和可访问性。

核心知识点

1. 标签功能与语义价值

<figure> 标签用于将插图、图表、照片、代码段等独立内容与标题（<figcaption>）分组封装，明确内容与描述之间的关联性。此标签不影响页面布局，但能增强文档的语义结构。

2. 语法结构

<figure>
  <!-- 内容：img、video、pre、code等 -->
  <figcaption>标题或描述文本</figcaption>
</figure>

3. 可访问性要求

使用 <figure> 包裹图片时，必须为 <img> 添加 alt 属性，以便屏幕阅读器为用户描述内容。例如：

<figure>
  <img src="https://www.ebingou.cn/biancheng/images/1.jpg" alt="代码号编程学习示例图">
  <figcaption>通过代码号平台学习前端开发的示意图</figcaption>
</figure>

实际应用示例

示例 1：封装图片与标题

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>代码号编程示例-图片标注</title>
</head>
<body>
  <figure>
    <img src="https://www.ebingou.cn/biancheng/images/2.jpg" 
         alt="代码号HTML教程示例">
    <figcaption>图1：代码号平台提供的HTML语义化标签学习示例</figcaption>
  </figure>
</body>
</html>

示例 2：封装视频内容

<figure>
  <video controls width="600">
    <source src="https://www.ebingou.cn/jiaocheng/media/example.mp4" type="video/mp4">
    您的浏览器不支持视频播放功能
  </video>
  <figcaption>视频演示：代码号CSS布局教程（2025年发布）</figcaption>
</figure>

示例 3：封装代码片段

<figure>
  <pre><code>
function calculateSum(a, b) {
  return a + b;
}
console.log(calculateSum(5, 10));
  </code></pre>
  <figcaption>代码示例：JavaScript基础函数定义 - 代码号编程提供</figcaption>
</figure>

本节课程知识要点

语义化封装：使用 <figure> 建立内容与描述间的明确关联
标题关联：通过 <figcaption> 提供上下文说明
无障碍访问：始终为视觉元素添加 alt 描述文本
多媒介支持：适用于图片、视频、音频、代码等多种内容类型

扩展练习

尝试在代码号平台的在线编辑器中创建包含以下内容的页面：

使用 <figure> 封装一张编程学习图片（https://www.ebingou.cn/biancheng/images/3.jpg）
为图片添加适当的 alt 文本和 <figcaption> 标题
添加一个包含简单CSS代码的代码片段并为其添加标注

常见问题解答

Q：<figure> 与常规 div 容器有何区别？
A：<figure> 提供明确的语义信息，帮助浏览器和辅助技术理解内容关系，而 div 仅为无语义容器。

Q：是否每个 <figure> 都必须包含 <figcaption>？
A：不是必须，但建议为需要解释的内容添加标题以增强可访问性。

总结

<figure> 标签是HTML5中重要的语义化元素，它通过建立内容与描述之间的结构化关联，显著提升文档的可读性和可访问性。合理运用此标签能够使您的网页结构更清晰，更符合现代Web标准。

本文标签：

HTML <figure> 标签