HTML5 `＜figure＞` 标签：提升网页语义化与可访问性的利器

[什么是 `<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 的想法？欢迎在评论区分享！

HTML5 `＜figure＞` 标签：提升网页语义化与可访问性的利器

目录

什么是 <figure> 标签？

为什么我们要用 <figure>？

<figure> 标签的语法

<figure> 标签的适用场景

1 图片及其说明 (最常用)

2 代码片段及其注释

3 图表、流程图或数据可视化

4 引用或引文 (Quote) 及其出处

总结

什么是 `<figure>` 标签？

为什么我们要用 `<figure>`？

`<figure>` 标签的语法

`<figure>` 标签的适用场景