Je code donc je suis là.

0%

Posted on Edited on

title: HTML figure 標籤的用法
date: 2020-11-02 00:42:24
categories: ‘HTML’
tags: [‘HTML’]
—#

通常我們在處理許多條列式的內容時，常會使用 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>