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

定義と使い方

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

使用方法の参考事項

<figure>タグのコンテンツは、周囲のコンテンツの流れの一部です。
<figure>タグを、単に画像や写真、図表、コード一覧、またはその他の関連コンテンツを囲むためのタグだと考えないでください。
このタグは、文書の主な流れと関連してはいるものの、完全な文のように「独立して存在できる（self-contained）コンテンツ」を表します。
例えば、周囲のコンテンツの流れの理解を助ける画像、写真、図表、ダイアグラム、コードブロック、各種メディアなどが該当します。
ここでいう「独立して存在できる（self-contained）コンテンツ」とは、文書から該当部分を切り離しても、それ自体で意味を持つことを指します。
メインコンテンツの内容の流れとは別のコンテンツの場合は、<aside>タグの方がより適切です。

例

次の例を見ていくと、<figure>タグがどのように使用されているかを簡単に把握できます。

一般的な画像のみで構成された例

次は、周囲のコンテンツの理解を助けるために<img>タグで画像をコンテンツとして使用した<figure>タグの例です。

HTML

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

`<figcaption>`タグを使用してキャプションを追加

次の例では、<figcaption> タグを使用して、このコンテンツを参照できるキャプション（説明）を追加しています。

補足説明
<figcaption> タグは、親要素である<figure>タグのコンテンツを参照するためのキャプション（説明）や凡例を表すために使用するタグです。

HTML

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

CSS <figcaption> タグにスタイルを適用しました。

figcaption {
    background-color: #d1d1d1;
    text-align: center;
    padding: 4px;
}

<figcaption> タグを使用する際の注意点があります。

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

CSSで背景画像を使用したコンテンツ

<figure>タグの内部には、必ずしもコンテンツが含まれている必要はありません。
次は、<figure>タグにコンテンツを配置せず、CSSのbackground-imageプロパティで背景画像を実装した例です。

上の例を見て、疑問に感じるかもしれません。<figure>タグは、周囲のコンテンツの理解や流れと関連する独立したコンテンツを表します。上の例のような使い方は、Webコンテンツのアクセシビリティを考慮したうえで、画像などに主要な情報が含まれていない視覚的な装飾目的であり、視覚障害のあるユーザーに不便を与えない場合に限って使用できます。

動画を活用したコンテンツ

次は、周囲のコンテンツの理解を助けるために<video>タグで動画をコンテンツとして使用した<figure>タグの例です。

HTML <video>タグの自動再生ガイド

コードブロック

コードブロックは、開発ドキュメントなどでよく活用されます。次は、開発ドキュメントの内容を分かりやすくするために、<figure>タグでコードブロックをコンテンツとして使用した例です。

HTML

<p>typeof演算子は、被演算子のデータ型を文字列として返す演算子です。</p>
<figure>
    <figcaption>typeof演算子の基本例</figcaption>
    <pre>
        <code>
            let a;
            console.log(typeof a); // 出力: "undefined"
        </code>
    </pre>
</figure>

コードの補足説明
<pre>タグは、記述した書式を保持したテキストブロックを表す際に使用します。
つまり、このタグを使用すると、インデント、改行、空白など、記述したとおりの元の書式がブラウザに表示されます。

コードの補足説明
<code>タグは、コンピュータコードの一部を表します。

実際に適用された様子

上の例のように、<figure>タグは、メインコンテンツの理解や流れと関連する画像、イラスト、図表、写真、コード一覧、またはその他の関連コンテンツなど、独立したコンテンツを表すあらゆる場面で活用できます。

技術的な文法の要約

figureタグの技術的な文法の要約
使用可能な親要素	フローコンテンツを許可するすべての要素
許可されるコンテンツ	フローコンテンツ。任意で1つの`<figcaption>` が最初または最後の子要素として配置されることがあります。
暗黙的な`role`属性値	`figure`
許可される`role`属性値	子要素に`<figcaption>` がない場合：すべて許可、ある場合は許可される役割なし