0%

HTML figure 標籤的用法

通常我們在處理許多條列式的內容時,常會使用 List 的方式去排列文字或圖形,但如果每一個 <li> 的內容太過繁瑣,就會顯的有些零散,尤其是含有圖片或是影片的內容列表,會包含圖片的標題、圖說、作者介紹等等零碎資訊,這個時候 <figure> 便可派上用場。

<figure> 是 HTML5 增加的語義化標籤。figure 的英文解釋可以是數字、人物、圖形甚至輪廓,但在 HTML 裡,個人偏向解釋為「含有資訊的區塊輪廓」,就像我們在美術館觀賞一幅畫作,旁邊總會有一個解說牌,說明畫作的標題、作者、尺寸、年份與媒材,我們可以把畫作和解說牌當成是一組的 figure,而解說牌的標題當成是 <figure> 的子元素 <figcaption> ,這也很像我們在閱讀雜誌時,圖片總是會有圖說,來更詳細的解說圖片。

也因此 <figure><figcaption> 這兩個語義化元素,常常會一起使用。

<figure>的使用時機

<figure> 最常使用在圖片上,但是並不是只有「一張」圖片,事實上我們可以同時放很多張圖片在 <figure> 裡面,如果這些圖片是有關連的。

1
2
3
4
5
<figure>
<img src="cat01.jpg" alt="A white cat">
<img src="cat02.jpg" alt="A black cat">
<img src="cat03.jpg" alt="A old cat">
</figure>

之前提過, <figure> 不只可以用在圖片區塊,也可使用在例如影片、程式碼、音檔、表格、圖表或是廣告上。 <figure> 也可以使用嵌套的方式,在 <figure> 裡嵌套另一組 <figure> ,例如有好幾張圖片有各自的圖說,這些 <figure> 可以再用一組 <figure> 包起來。

<figcaption> 的使用方式

<figcaption> 元素是代表 <figure> 元素裡的一個標題或者是其相關的解釋。雖然常是和 <figure> 一起搭配使用,但並不表示 <figure> 一定需要 <figcaption> ,需要注意的是,如果使用 <figcaption> 最好放在 <figure> 的第一個會最後一個元素,方便查找。

我們也可以在 <figcaption> 的元素裡,放入多個元素,標題或段落都可以。

使用<figure><figcaption>的好處

使用這兩個 HTML 語義化標籤的好處,是可以讓搜尋引擎的機器人,在讀取時知道<figure> 的內容性質,友善搜尋引擎的速度與標記,自然會對優化 SEO 有幫助。

延伸閱讀

<figure>:可附標題內容元素 | MDN
<figcaption> | MDN

How to Use ARIA Effectively with HTML5
前端的基礎修養:aria-label

aria-label 是一個 HTML attribute,用來告訴「讀螢幕內容軟體」某個元素是什麼,提升 Web Accessibility。
例如一個關閉按鈕「×」,視覺上看來都能理解,但是「讀螢幕內容軟體」並不能正確讀出,這時就可以用 aria-label 來提示,讓「讀螢幕內容軟體」可以知道這個區塊的內容,例如:

1
<button aria-label="關閉">&times;</button>