HTML <figcaption>タグ：正しい理解と使い方

定義と使い方

<figcaption>タグは、
親要素である<figure>タグのコンテンツのみを参照できるキャプション（説明）や凡例を表すために使用するタグです。
任意で使用できますが、使用する場合は<figure>タグの最初の子要素、または最後の子要素としてのみ配置する必要があります。

<figcaption>タグを理解するためには、事前知識として<figure>タグについて理解しておく必要があります。

補足説明
<figure>タグは、ドキュメントのメインフローに関連しつつも、独立して存在できる（self-contained）コンテンツ（例：画像、図、コードブロックなど）を表します。
必要に応じて<figcaption>タグを使用することで、これらのコンテンツを参照するためのキャプション（説明）を追加できます。

基本例

次の例は、<figure>タグのコンテンツを参照できるキャプション（説明）を<figcaption>タグで表現している例を分かりやすく示しています。

HTML

<p>人類が暮らしている地球は美しいです。</p>
<figure>
    <img src="earth.jpg" alt="宇宙から見た、丸く青く輝く地球">
    <figcaption>宇宙から見た地球</figcaption>
</figure>

構文

親要素は必ず<figure>タグである必要があります。
<figure>タグでは必須ではなく、任意で使用できます。
<figure>タグ内で使用する場合は、最初の子要素、または最後の子要素としてのみ配置する必要があります。
<figure>タグには、ソースに関する追加情報を含めることができます。

親要素は必ず`<figure>`タグである必要があります。

次の例は、<figcaption>タグが<figure>タグとは関係なく使用されている例です。

<figcaption>タグは、親要素である<figure>タグのコンテンツを参照できるキャプション（説明）や凡例を表す目的で使用するタグです。親要素は必ず<figure>タグである必要があります。

HTML 誤った使用例

<div>
    <img src="earth.jpg" alt="宇宙から見て、丸く青く輝く地球">
    <figcaption>宇宙から見た地球</figcaption>
</div>

`<figure>`タグでは必須ではなく、任意で使用できます。

次の例は、<figure>タグで<figcaption>タグを使用していない例です。
<figcaption>タグは、必要な場合に任意で使用すれば問題ありません。

HTML

<p>人類が暮らしている地球は美しいです。</p>
<figure>
    <img src="earth.jpg" alt="宇宙から見て、丸く青く輝く地球">
</figure>

`<figure>`タグ内で使用する場合は、最初の子要素、または最後の子要素としてのみ配置する必要があります。

<figure>タグ内で使用する場合は、最初の子要素、または最後の子要素としてのみ配置する必要があります。このような位置に配置することで、スクリーンリーダーや支援技術を利用するユーザーが、Webページのコンテンツを理解し、操作しやすくなります。

以下の例は、<figcaption>タグが2番目の子要素として誤って使用されている例です。

HTML 誤った使用例

<figure>
    <img src="earth.jpg" alt="宇宙から見て、丸く青く輝く地球">
    <figcaption>宇宙から見た地球</figcaption>
    <p>人類が暮らしている地球は美しいです。</p>
</figure>

`<figure>`タグには、ソースに関する追加情報を含めることができます。

次の例では、最初の<figcaption>ブロックがアヒルの画像に関連する説明および出典情報を提供しています。このように、Webページ上でメディアや情報要素に関連する追加情報を構造化して提供できます。

HTML

<figure>
    <img src="duck.jpg" alt="かわいいアヒルが湖畔にいます。">
    <figcaption>
        <p>この写真は、かわいいアヒルの様子を示しています。</p>
        <p><small>写真提供：🌟 ニュース</small></p>
    </figcaption>
</figure>

コード補足説明
<small>タグは、タイポグラフィ上の規則や慣例として小さな文字で表現されてきた法的表記や注意事項などのサイドコメント（the side comment、補足文）を表します。

技術的な文法の要約

figcaptionタグの技術的な文法の要約
使用可能な親要素	`<figure>` （必ず`<figcaption>`は`<figure>`の最初、または最後の子要素である必要があります。）
許可されるコンテンツ	フローコンテンツ
暗黙的な`role`属性値	該当する役割はありません
許可される`role`属性値	`group`, `none`, `presentation`