HTML5でfigure,figcaption要素を使って図表のタイトルやキャプションを設定する
HTML5において追加された、figure要素とfigcaption要素というものがあります。
当サイトでも使っている機会は殆ど無いため、管理人も全く知識がありませんでした。
しかし、htmlの正しいマークアップを心掛けることはSEO的にも良いことは確かなため、今一度まとめ直してみます。
https://reviewlog.info/html5-block-inline-display/figureタグは図表や画像であることを示し、figcaptionタグは図表の注釈やキャプションを示す
<figure>
<img src="camera.png" alt="Canonの一眼レフカメラの画像">
<figcaption>Canonの一眼レフ</figcaption>
</figure>
上記のように、figure要素は画像を表示するimg要素を囲む使い方が出来ます。
また、figcaption要素は画像や図表に注釈(キャプション)を付けることが出来ます。
figcaption要素とimg要素のalt属性は全く別物！画像の内容を検索エンジンに伝えるのはalt属性の役目
img要素のalt属性は、画像の内容を検索エンジンやブラウザに伝える役割を果たしたり、画像上にマウスカーソルを持っていった際に表示されます。(視覚障害者のための音声読み上げの内容にもなります。)
figcaption要素はあくまでフロントに表出しますが、alt属性は表出しません。
ですが、検索エンジンに画像の内容を伝える意味合いとしてよく使われるのはalt属性です。(SEO的に効果が高いかは不明ですし、気にする必要は無いでしょう。)
上記は忘れずに覚えておきたいです。
