HTML figure 元素 – 幫助使用者及瀏覽器更容易理解內容

前言

為什麼會有這一篇的原因其實很簡單,因為中午的時候在等午餐

12點了還沒來,就在公司書櫃翻著書,找到了一本HTML5以及CSS的書籍

想說閒著也是閒著就翻翻,一翻不得了

雖然裡面的內容知道的不少,但也有將近3成的內容連看都沒看過…

今天就針對看到的這個元素,以及一些相關的應用做個說明

figure

figure MDN(*1)中 直接被翻譯為「可附標題內容元素」

裡面可以放置各種元素,包括但不限於

  • img
  • p
  • 另一個figure (沒錯,他可以一層套一層!)

figcaption

而講到 figure ,就不得不提到他的夥伴 figcaption,也就是標題了!

寫了figure,卻沒有提供figcaption其實就完全失去了它的初衷了

使用了「可附標題內容元素」,卻不提供標題!! 這樣母湯的吧~

範例

直接來看看範例吧

See the Pen Untitled by story zyra (@story-zyra) on CodePen.

優點

(以下都是假設有figcaption的情況)

其實很簡單,第一是告訴使用者元素與說明具高度相關

第二則是對瀏覽器判斷上,是可以得知內容元素與文字的關聯性更高

比起用一個<div>並用<p>來說明,對瀏覽器來說,figure具有更高的辨別性!!


結論

其實寫完之後,除了覺得figcaption很好用之外

figure 根本就只是一個附標題的div而已吧!!!

參考 :

🧡希望這篇文章有提供一點幫助,沒有的話我繼續努力QQ

🧡幫我點一個小小的廣告或留言,都是對我的支持(每天都只有詐騙跟色情留言…)

⭐如有任何疑問,歡迎透過留言或messenger讓我知道 !

筆記

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *