HTMLのfigure要素とは？figcaptionとの組み合わせで図表をマークアップする方法

この記事では、HTMLの<figure>要素の基本的な使い方について解説します。

<figure>タグとは

<figure>タグは、HTML文書の中で「図表」として扱いたいコンテンツを作成するために使用されるセマンティックな要素です。

<figure>
  <!-- ここに図表のコンテンツを記述 -->
</figure>

<figure>要素の基本的な使い方

<figure>要素は、イラストや写真、コード例など、本文から独立していても意味が通じる「自己完結型」のコンテンツをマークアップするために使われます。

<figure>
  <img src="path-to-file" alt="画像の説明" />
</figure>

ここでいう自己完結型のコンテンツとは、仮に本文から切り離されて引用された場合でも、その内容が単体で理解できるものを指します。記事の流れに直接関係しない補足的な図表やグラフ、ソースコードのサンプルなどが該当します。

<figcaption>でキャプションを追加する

<figcaption>要素は、<figure>要素にキャプション（説明文）を追加するために使用され、特に画像と組み合わせて使われることが多い要素です。

<figure>
  <img src="path-to-image.jpg" alt="画像の説明" />
  <figcaption>写真のキャプション</figcaption>
</figure>

<figcaption>は、<figure>要素の最初の子要素または最後の子要素として配置します。このルールに従うことで、スクリーンリーダーなどの支援技術にも内容が正しく伝わりやすくなります。

まとめ

• <figure>要素は、イラスト・写真・コード例などの自己完結型コンテンツをマークアップするのに適している
• <figcaption>要素を組み合わせると、図表にキャプションを付与できる
• 意味的に正しいマークアップにより、SEOやアクセシビリティの面でもメリットがある