目录
- [什么是 `<figure>` 标签？](#什么是
<figure>标签？) - [为什么我们要用 `<figure>`？](#为什么我们要用
<figure>？) - [`<figure>` 标签的语法](#
<figure>标签的语法) - [`<figure>` 标签的适用场景](#
<figure>标签的适用场景) -
- [1 图片及其说明 (最常用)](#1 图片及其说明 (最常用))
- [2 代码片段及其注释](#2 代码片段及其注释)
- [3 图表、流程图或数据可视化](#3 图表、流程图或数据可视化)
- [4 引用或引文 (Quote) 及其出处](#4 引用或引文 (Quote) 及其出处)
- 总结
在现代网页开发中，我们不仅仅关注页面看起来如何，更注重其内在的 语义结构 。一个结构良好、语义清晰的网页，不仅能更好地被搜索引擎理解，也能为使用辅助技术（如屏幕阅读器）的用户提供更友好的体验。而 HTML5 中的 <figure> 标签 ，正是实现这一目标的关键工具之一。
你可能经常看到网站用 <div> 来包裹图片和文字说明，但你知道吗？其实有一个更专业、更有语义的标签来完成这项任务------那就是 <figure>。
什么是 <figure> 标签？
<figure> 标签用于表示一段独立的内容 ，这些内容可以独立于文档的主流程存在，并且在语义上与文档相关。它通常与 <figcaption> 标签 一起使用，<figcaption> 用来为 <figure> 中的内容提供标题或说明。
简单来说，<figure> 就是给你的图片、图表、代码片段等内容提供一个"容器"，并附上一个明确的"标签说明"。
为什么我们要用 <figure>？
使用 <figure> 的主要好处在于：
- 提升语义化： 告诉浏览器和搜索引擎这部分内容是一个独立的单元，并且附带了说明。这有助于提升网页的结构和意义。
- 增强可访问性： 对于依赖屏幕阅读器的用户来说，
<figure>和<figcaption>能够清晰地告知他们图片或图表的内容及其说明，极大提升了用户体验。 - 更好的内容组织： 让你的 HTML 代码更清晰、更易于管理和维护。
<figure> 标签的语法
<figure> 的基本语法非常直观：
html
<figure>
<figcaption>
</figcaption>
</figure>请注意，<figcaption> 可以放在 <figure> 内部的开头或结尾，取决于你希望标题显示在内容的上方还是下方。
<figure> 标签的适用场景
现在我们来看看在哪些场景下，使用 <figure> 标签会是你的最佳选择：
1 图片及其说明 (最常用)
当你页面上的图片需要配上文字说明时，<figure> 是完美的选择。
html
<figure>
<img src="beautiful-sunset.jpg" alt="夕阳下的海滩">
<figcaption>图 1：宁静的夕阳与沙滩，拍摄于夏威夷。</figcaption>
</figure>这样做不仅让图片和说明语义关联，也方便 CSS 样式化。
2 代码片段及其注释
在技术博客或文档中，展示代码并提供说明是非常常见的。
html
<figure>
<pre><code>
function calculateSum(a, b) {
return a + b;
}
console.log(calculateSum(5, 3)); // 输出 8
</code></pre>
<figcaption>代码示例 1：一个简单的 JavaScript 求和函数。</figcaption>
</figure><pre> 和 <code> 标签通常用于包裹代码，而 <figure> 则为整个代码块提供了语义。
3 图表、流程图或数据可视化
任何需要解释的图表或可视化内容都非常适合用 <figure> 包裹。
html
<figure>
<img src="quarterly-sales-chart.png" alt="某公司季度销售额图表">
<figcaption>图 2：2024 年第一季度公司销售额增长趋势图。</figcaption>
</figure>4 引用或引文 (Quote) 及其出处
如果你想引用一段文字，并明确标注出处，<figure> 也可以派上用场。虽然 <blockquote> 标签用于引用块，但你可以用 <figure> 来包含 <blockquote> 和其出处，使其成为一个独立的语义单元。
html
<figure>
<blockquote>
<p>独行者速，众行者远。</p>
</blockquote>
<figcaption>------ 非洲谚语</figcaption>
</figure>总结
在 HTML5 中，<figure> 标签不仅仅是一个简单的容器，它更是一种语义化的声明 ，告诉浏览器和用户这部分内容是一个独立的、有意义的单元。虽然它的使用频率可能不如 <div> 那么高，但它在提升网页可读性、可访问性和搜索引擎优化方面的作用不容小觑。
下次当你需要为图片、代码或其他独立内容添加说明时，不妨尝试使用 <figure> 和 <figcaption> 标签，让你的网页更加专业和友好！
你是否已经在你的项目中开始使用 <figure> 标签了呢？或者有什么其他关于语义化 HTML 的想法？欢迎在评论区分享！