在現代網頁開發中，我們不僅僅關注頁面看起來如何，更注重其內在的 語義結構。一個結構良好、語義清晰的網頁，不僅能更好地被搜索引擎理解，也能為使用輔助技術（如屏幕閱讀器）的用戶提供更友好的體驗。而 HTML5 中的 <figure> 標簽，正是實現這一目標的關鍵工具之一。

你可能經常看到網站用 <div> 來包裹圖片和文字說明，但你知道嗎？其實有一個更專業、更有語義的標簽來完成這項任務——那就是 <figure>。

---

什么是 <figure> 標簽？

<figure> 標簽用于表示一段獨立的內容，這些內容可以獨立于文檔的主流程存在，并且在語義上與文檔相關。它通常與 <figcaption> 標簽一起使用，<figcaption> 用來為 <figure> 中的內容提供標題或說明。

簡單來說，<figure> 就是給你的圖片、圖表、代碼片段等內容提供一個“容器”，并附上一個明確的“標簽說明”。

---

為什么我們要用 <figure>？

使用 <figure> 的主要好處在于：

1. 提升語義化： 告訴瀏覽器和搜索引擎這部分內容是一個獨立的單元，并且附帶了說明。這有助于提升網頁的結構和意義。
2. 增強可訪問性： 對于依賴屏幕閱讀器的用戶來說，<figure> 和 <figcaption> 能夠清晰地告知他們圖片或圖表的內容及其說明，極大提升了用戶體驗。
3. 更好的內容組織： 讓你的 HTML 代碼更清晰、更易于管理和維護。

---

<figure> 標簽的語法

<figure> 的基本語法非常直觀：

<figure><figcaption></figcaption>
</figure>

請注意，<figcaption> 可以放在 <figure> 內部的開頭或結尾，取決于你希望標題顯示在內容的上方還是下方。

---

<figure> 標簽的適用場景

現在我們來看看在哪些場景下，使用 <figure> 標簽會是你的最佳選擇：

1 圖片及其說明 (最常用)

當你頁面上的圖片需要配上文字說明時，<figure> 是完美的選擇。

<figure><img src="beautiful-sunset.jpg" alt="夕陽下的海灘"><figcaption>圖 1：寧靜的夕陽與沙灘，拍攝于夏威夷。</figcaption>
</figure>

這樣做不僅讓圖片和說明語義關聯，也方便 CSS 樣式化。

2 代碼片段及其注釋

在技術博客或文檔中，展示代碼并提供說明是非常常見的。

<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> 包裹。

<figure><img src="quarterly-sales-chart.png" alt="某公司季度銷售額圖表"><figcaption>圖 2：2024 年第一季度公司銷售額增長趨勢圖。</figcaption>
</figure>

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

如果你想引用一段文字，并明確標注出處，<figure> 也可以派上用場。雖然 <blockquote> 標簽用于引用塊，但你可以用 <figure> 來包含 <blockquote> 和其出處，使其成為一個獨立的語義單元。

<figure><blockquote><p>獨行者速，眾行者遠。</p></blockquote><figcaption>—— 非洲諺語</figcaption>
</figure>

---

總結

在 HTML5 中，<figure> 標簽不僅僅是一個簡單的容器，它更是一種語義化的聲明，告訴瀏覽器和用戶這部分內容是一個獨立的、有意義的單元。雖然它的使用頻率可能不如 <div> 那么高，但它在提升網頁可讀性、可訪問性和搜索引擎優化方面的作用不容小覷。

下次當你需要為圖片、代碼或其他獨立內容添加說明時，不妨嘗試使用 <figure> 和 <figcaption> 標簽，讓你的網頁更加專業和友好！

你是否已經在你的項目中開始使用 <figure> 標簽了呢？或者有什么其他關于語義化 HTML 的想法？歡迎在評論區分享！