figure要素を使用するタイミングと制約、imgタグとの関係性【ウェブデザイン技能検定 1級学科範囲】

2024年7月8日 2024年7月8日 3分43秒

タスラ t3l

画像を表示させる際にimgタグのみで済ませてしまう製作者も多々いますが、figureについて解説していきたいと思います。
SEOやユーザビリティの事を考えるとしっかりと役割に合ったコード、タグを使用することで効果が良い方向にでたりしますし、検定などでも内容を理解しているか確かめる内容がでてくるだけではなく、クローラーに理解されやすいコードでサイト制作できるようになったりといいことがたくさんあります。

今回はfigureについて解説しますが、その他のタグの制約などについては他の記事で紹介していますので、是非そちらも見ていただけたらと思います。

HTMLの要素とその子要素の制約についての解説【ウェブデザイン技能検定 1級学科範囲】

1 figure 要素
2 figcaption 要素
3 img 要素との違い
4 figure 要素の配置ルール
5 まとめ

figure 要素

説明: figure 要素は、図や図表、写真、コードスニペットなどの自己完結型のコンテンツを表します。この要素は、メインコンテンツの流れから独立しているが、参照可能な内容を提供します。

使用例:

<figure>
    <img src="image.jpg" alt="A sample image">
    <figcaption>サンプル画像のキャプション</figcaption>
</figure>

figcaption 要素

説明: figcaption 要素は、figure 要素のキャプション（説明文）を提供するための要素です。このキャプションは、図の内容や目的を説明します。

配置ルール:

figcaption 要素は、figure 要素内の先頭または末尾のいずれかに配置することができます。

img 要素との違い

img 要素:

説明: img 要素は、画像を文書内に埋め込むための要素です。
特徴: 単体で画像を表示するため、キャプションや追加情報を表示するためには他の要素（例：figcaption）と組み合わせて使用する必要があります。

figure と figcaption の使用例:

<figure>
    <img src="image.jpg" alt="A sample image">
    <figcaption>これはサンプル画像です。</figcaption>
</figure>

img 要素のみの使用例:

<img src="image.jpg" alt="A sample image">

figure 要素の配置ルール

figure 要素は、メインコンテンツの流れから独立しているため、文書のどこにでも配置することができます。

まとめ

figcaption 要素は、figure 要素内であればどこにでも配置できます。
これにより、図や画像の説明を柔軟に配置することができます。
ウェブアクセシビティやユーザビリティの10原則などに関わってくる内容になりますので、img 要素との違いを理解し、適切な要素を使用をし、HTML文書の意味と構造を明確にするようにしましょう。