figure tag 與 figcaption tag 的使用

Posted on Edited on In Views: Disqus:

 

引用w3cschool的範例

<!DOCTYPE html>
<html>
<body>

    <p>The Pulpit Rock is a massive cliff 604 metres (1982 feet) above Lysefjorden, opposite the Kjerag plateau, in Forsand, Ryfylke, Norway. The top of the cliff is approximately 25 by 25 metres (82 by 82 feet) square and almost flat, and is a famous tourist attraction in Norway.</p>

    <figure>
        <img src="https://www.w3schools.com/tags/img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
        <figcaption>Fig.1 - A view of the pulpit rock in Norway.</figcaption>
    </figure>
    <p><strong>Note:</strong> The figure tag is not supported in Internet Explorer 8 and earlier versions.</p>
</body>
</html>

說明：

1、figure tag 與 figcaption tag 是HTML5新增元素的其中之一。

2、figure tag 的用途於將圖片與一小段文字群組起來做個標記，

而那「一小段文字」可以使用figcaption tag 包起來。

3、雖然有無使用 figure tag 於排版外觀差異不大，

但我想重點在於可讀性，特別是 google搜尋引擎，

網頁有好的可讀性有利於讓 google搜尋引擎將您的網頁排名放在前面。

 

參考資料：

HTML <figure> Tag

HTML <figcaption> Tag

Figures