figureタグの意味と正しい使い方を徹底解説

2021年6月11日

今回は、HTML5から使用できるようになったタグであるfigureタグの意味と正しい使い方を解説していきたいと思います。

figureタグを使えば、よくあるキャプション付きの画像なんかもマークアップをすることが出来るようになるので便利です。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>figureタグの使い方</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <figure>
    <figcaption>南半球に生息するペンギン</figcaption>
    <img src="img/penguin.jpg" alt="">
  </figure>
</body>
</html>

figure{
  width: 400px;
  position: relative;
}

figure img{
  width: 100%;
  display: block;
}

figcaption{
  background-color: rgba(0, 0, 0, 0.6);
  color: #fff;
  text-align: center;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}

なお、この記事は2021年6月現在のMDN Web Docsサイトの情報を元に、ポイントとなる部分のみを噛み砕いて解説していますので、予めご了承下さい。

figureタグとは?

figureタグとは、HTML5より追加されたタグで、主に図や表、画像などのように、それだけで自己完結するコンテンツのようなものをマークアップするのに使用されるHTMLタグです。

また、figcaptionタグと呼ばれるタグをfigureタグの子要素として併用することによって、figureタグでマークアップした図や表、画像に対するキャプションなどを追加することができます。

ちなみに、figureタグを使うことで、HTMLの文書構造がより検索エンジンに理解されやすくなるということで(若干の違いかもしれませんが)SEOの視点で有利になるということが言われています。

figureタグの正しい使い方

それでは、figureタグの正しい使い方についてを解説します。

figureタグの子要素にはフローコンテンツかfigcaptionタグのみ使用できる

figureタグの子要素にはフローコンテンツかfigcaptionタグのみ使用できます。

ただし、2021年6月の現行版ではHTMLではfigcaptionタグを使用する場合は、必ずfigureタグの最初か最後の子要素として使用しなければなりません。

<body>
  <figure>
    <figcaption>南半球に生息するペンギン</figcaption>
    <img src="img/penguin.jpg" alt="">
  </figure>
</body>

※補足
figureタグ、figcaptionタグ、imgタグにはスタイルを指定しています。

figureタグの中に複数の画像を使用しても良い

figureタグの中に複数の画像を使用しても良いです。

<body>
  <figure>
    <figcaption>南半球に生息するペンギン</figcaption>
    <img src="img/penguin1.jpg" alt="">
    <img src="img/penguin2.jpg" alt="">
    <img src="img/penguin3.jpg" alt="">
  </figure>
</body>

※補足
figureタグ、figcaptionタグ、imgタグにはスタイルを指定しています。

figureタグは必ずしも画像だけに使う訳ではない

figureタグは必ずしも画像だけに使う訳ではありません。

下のように、詩のようなものを引用をしたい際などにも使用することができます。

<body>
  <figure>
    <figcaption><cite>Winston Churchill:</cite></figcaption>
    <blockquote>You have enemies? Good. That means you've stood up for something, sometime in your life.</blockquote>
  </figure>
</body>

figureタグの誤った使い方

次に、figureタグの誤った使い方についてを紹介しておきます。

本文中で本文と密接して使用されている画像などの場合

以下のように、本文中で本文と密接して使用されている画像などの場合はfigureタグを使うのは誤っていると言えます。(これは、figureタグは「それだけで自己完結するコンテンツのようなもの」をマークアップするのに使用されるHTMLタグであると定義されている為、それだけで自己完結していない画像に対しては、単にpタグやdivタグで囲った方が正しいと言えるからです。)

<body>
  <p>先週、XXX動物園に行って、ペンギンを初めて生で見ました。(下の写真がそのときの写真です。)</p>
  <div>　<!-- ここはfigureタグを使えない。 -->
    <img src="img/penguin.jpg">
  </div>
  <p>とっても可愛くないですか?</p>
  <p>触ることはできませんでしたが、、、、、、</p>
</body>