HTML 圖文引用 figure 與 figcaption：帶說明的獨立內容

用來引用任何內容像是文字段落、圖片、圖表或程式碼片段等。雖然與主要內容有關聯，但刪除它也不會影響主要內容。<figcaption> 做為子元素用於標題，它是給所有人看的說明文字，與 <img> 的 alt 分工並不相同。

<figure>
  <img src="./images/css.png">
</figure>

<figure>
  <img src="./images/css.png">
  <figcaption>CSS 化妝師</figcaption>
</figure>

<figure>
  <figcaption>CSS</figcaption>
  <blockquote>用來描述網頁的樣式和畫面如何被呈現。</blockquote>
</figure>

<figcaption> 只能是 <figure> 的第一個或最後一個子元素，兩種位置都合法。

與 alt 的分工

<figure>
  <img src="./chart.png" alt="2026 年前端框架使用率長條圖" width="800" height="450">
  <figcaption>資料來源：State of JS 2026 年度調查</figcaption>
</figure>

屬性	對象	是否顯示
alt	看不到圖片的人	否
<figcaption>	所有人	是

兩者用途不同，通常會同時存在，內容也不該重複。

什麼時候用它

這張圖是內容的一部分、需要說明文字，或會被內文以 如圖一 的方式參照時才用。純裝飾或版面用的圖片，直接寫 <img> 就好。

常見問題

figcaption 和 img 的 alt 有什麼不同？

alt 是圖片的替代文字，圖片顯示不出來時代替它；<figcaption> 是給所有人看的說明文字，會顯示在畫面上。兩者用途不同，通常會同時存在且內容不重複。

figcaption 要放在前面還是後面？

只能是 <figure> 的第一個或最後一個子元素，兩種都合法。圖片說明通常放後面，表格或程式碼的標題則常放前面。

所有圖片都要用 figure 包起來嗎？

不用。純裝飾或版面用的圖片直接寫 <img> 即可。要用 <figure> 的時機是這張圖是內容的一部分、需要說明文字，或會被內文以 圖幾 的方式參照。

延伸閱讀

影像 <img>響應式影像 <picture>側邊欄 <aside>