【HTML5】figure要素について

figureタグはイラスト、図表、写真、動画、詩などページ本体とは独立して存在するコンテンツを表すために使われる。

参考サイト : MDN web docs

子要素としてコンテンツのキャプション（説明）を表すfigcaptionタグを最初か末尾に一つだけ使用する事が出来る。

サムネイル画像をfigure要素で扱った例

– HTML –

<body>
  <figure>
    <figcaption>イチゴ</figcaption>
    <img src="Figure/images/pic2.jpg" width="300" height="200" alt=""/> 
  </figure>
  <figure>
    <figcaption>コーヒーとクロワッサン</figcaption>
    <img src="Figure/images/pic1.jpg" width="300" height="200" alt=""/>
  </figure>
  <figure>
    <figcaption>ベーコンエッグとトースト</figcaption>
    <img src="Figure/images/pic3.jpg" width="300" height="200" alt=""/> 
  </figure>
</body>

1

2

3

4

5

6

7

8

9

10

11

12