HTML <figure> <figcaption> 內容自我獨立的區塊

<figure> 標籤 (tag) 作為一個容器 (container),裡面用來引用任何內容像是文字段落、圖片、圖表或程式碼片段等。

而 <figure> 主要目的是用來包含內容自我獨立 (self-contained) 的區塊,且 <figure> 中的內容雖然和附近的主內容 (main flow) 有關聯,但 <figure> 區塊的排版是可以被隨意移動位置或整個區塊直接移除而不會影響上下文中主要內容的意思。

<figure> 中還可以有一個 <figcaption> 標籤用來說明該 figure 區塊的標題。

語法範例:

<figure>
  <img src="/media/elephant.jpg">
</figure>

<figure>
  <img src="/media/elephant.jpg">
  <figcaption>An elephant at sunset</figcaption>
</figure>

<figure>
  <figcaption><cite>Edsger Dijkstra:</cite></figcaption>
  <blockquote>If debugging is the process of removing software bugs,
  then programming must be the process of putting them in.</blockquote>
</figure>

<figure> vs. <aside> 的差別

<figure> 和 <aside> 的作用其實蠻類似的,主要的差異在於 <figure> 可以有一個標題 <figcaption>;再來 <figure> 中的內容和主要內容間是有直接關係的,而 <aside> 是有點關係而已。