hiyoko-programingの日記

プログラミングを勉強したてのひよっ子。   エンジニア目指して勉強中。

figureタグとキャプション

◉< figure >〜</figure >

figure要素は、写真、挿絵、図表、コードなどのまとまりを表す。

figure要素によるまとまりは、単体で独立したものでならない。

つまり、その部分を文書から切り出したとしても元の文書に影響がないとともに、

切り出した内容自体で意味が通るようにする必要がある。

全ての画像を<figure>タグで囲む必要はないが、

「本文から参照される図版(イラスト、図、写真、ソースコード など)」については

囲むように注意すると良い。

 

◉画像にキャプションをつける

写真にキャプションをつけるときは「 figcaption」タグを挿入する。

<figcaption>タグは<figure>要素内でのみ利用できることに注意する。

 

EX)

 <figure>

  <img src="images/img_01_03.jpg" alt="スマートフォンタブレット・パソコンで表示する。" >

  <figcaption>左からiPhone, iPad, Macbook Airで表示確認</figcaption> 

</figure>