【HTML5】figure要素について
figureタグはイラスト、図表、写真、動画、詩などページ本体とは独立して存在するコンテンツを表すために使われる。
参考サイト : MDN web docs
子要素としてコンテンツのキャプション(説明)を表すfigcaptionタグを最初か末尾に一つだけ使用する事が出来る。
サムネイル画像をfigure要素で扱った例
– HTML –
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<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> |
divタグで囲った時と同じようにブロック要素として縦に並んでいく。
(※通常img要素はインライン要素として横並びとなる)