HTMLのfigureタグの使い方｜figcaptionと余白の問題

HTML5から使用できるようになった、fiogureタグでしたが、使い方を理解していなかったこともあり、懸念しておりました。

調べるとSEOへも有効に働くタグだったので、適切に使えるよう調べたことを書いておきます。

私と同じようにfigureタグの使用を懸念している方、使い方を理解していない方の参考になれば幸いです。

<figure>の使い方！

結論からお伝えします。

figureタグは、メインコンテンツの補足となるコンテンツに対して使用します。

もう少し詳しくすると、<figure>で囲ったコンテンツがなくても、メインコンテンツは成り立つが、あるとメインコンテンツがわかりやすくなるコンテンツのことを指します。

あと、<figure>内のコンテンツは、単独で完結している必要があります。

まとめると、「サイト内にあると、メインコンテンツがよりわかりやすくなる。自己完結した要素」といった感じです。

<figure>が使えるコンテンツとは？なんでもOK？

figureタグの中は、画像でも、ソースコードのどちらでもOKです。

メインコンテンツの補足となるコンテンツという位置であれば問題ありません。

<figure>の使い方の例。

使い方の例をここで紹介しておきます。

まず、以下のような説明（メインコンテンツ）があったとします。

犬とは。

イヌとは、食肉目イヌ科イヌ属に分類される哺乳類の一種である。

古くからヒトに猟犬や番犬、牧羊犬、軍用犬、警察犬などとして使役されたほか、愛玩動物（ペット）として飼われている。
引用：https://ja.wikipedia.org/wiki/%E3%82%A4%E3%83%8C

これは、イヌの説明ですが、これだけではイヌのイメージは掴めません。

そこで、画像を補足として加えたとします。

これで、イヌの説明の補足として画像が入りました。

挿入した画像は、単独で完結しているかつ、なくてもイヌの説明文（メインコンテンツ）には影響しません。

しかし、画像が入ったことにより、イヌのイメージがより詳しくつくため、メインコンテンツの内容が理解しやすくなったといえます。

<div>
 <p>犬とは。<br>イヌとは、食肉目イヌ科イヌ属に分類される哺乳類の一種である。<br>古くからヒトに猟犬や番犬、牧羊犬、軍用犬、警察犬などとして使役されたほか、愛玩動物（ペット）として飼われている。<br></p>
 <figure><img src="dog.jpg"></figure>
</div>

小説などの「挿絵」のようなイメージだと考えるとわかりがいいかもしれません。

一緒に覚えておきたい<figcaption>の使い方！

<figure>と一緒に覚えておくことで、さらにSEO向上の効果が得られるタグが<figcaption>です。

<figure>タグのキャプションをつける時に使います。

「<figure>の使い方の例」で記載してテキストに加えると、以下のように使います。

<div>
 <p>犬とは。<br>イヌとは、食肉目イヌ科イヌ属に分類される哺乳類の一種である。<br>古くからヒトに猟犬や番犬、牧羊犬、軍用犬、警察犬などとして使役されたほか、愛玩動物（ペット）として飼われている。<br></p>
 <figure>
　<img src="dog.jpg">
  <figcaption>イヌの画像（私の愛犬です）</figcaption>
 </figure>
</div>

以下の部分を追加しました。

<figcaption>イヌの画像（私の愛犬です）</figcaption>

画像の説明文などにも使用できますでの、適切なテキストをタグ内に挿入して使用してください。

画像なら説明文やタイトル、キャプションなどを入れ、それ以外のものについても、適切なテキストを入れておくことで、クローラーが文章構造を適切に理解することができるため、SEO向上が望めます。

<figcaption>は<figure>の直下に配置すること！

<figcaption>は<figure>の直下に配置しなくてはなりません。

言い換えると、親要素は<figure>でなくてはならないといいうことです。

直下であれば、imgタグの前においても、後に相手も構いません。

また、<figcaption>内のテキストにリンクをはることなんかもできます。

<figure>タグの誤った使い方！

<figure>の間違った使い方も書いておきます。

前提は「サイト内にあると、メインコンテンツがよりわかりやすくなる。自己完結した要素」でした。

つまり、メインコンテンツに含まれている必要な画像には使えない。ということです。

わかりやすく、頻度が高いところでいうと、「バナー」などが該当するかと思います。

バナーは、なくてはユーザーの行動を促すことができないですし、リンクが貼られたバナーであれば、メインコンテンツになくてはならない要素になります。

バナーを<figure>で囲うことは不適切とえるでしょう。

<figcaption>とalt属性との違いは？

画像を<figure>の要素として、<figcaption>も使用したとすると<img>のalt属性と意味が被ってしまうのでは？と思いますよね。

しかし、<figcaption>とalt属性では用途が違います。

まず、alt属性は読み上げ機能なので使われます。

読み上げ機能以外にも、クローラーへ画像の内容・情報を適切に伝える意味があります。

<figcaption>は、どっちかというと注釈・タイトルといった意味合いが強いです。

そのため、内容や情報を伝えるalt属性とは、似ているように思えますが内容がことなってきます。

使用する際は、意識して使い分けましょう。

figureを使うと、勝手に左右へ余白がつきます。

実務でいちばん引っかかるのがここです。

<figure> には、ブラウザの初期スタイルで余白が入っています。

CSSを何も当てていない状態で測ると、こうなっていました。

左右に40pxも入ります。引用の blockquote とまったく同じ値です。

画像を <figure> で囲んだ途端に位置がずれた、という場合はこれが原因です。

リセットCSSを入れていれば消えますが、入れていないサイトや、部分的に当たっていないページでは残ります。

figure {
  margin: 0;
}

これを書いておけば解決します。使う前に一度確認しておくと、あとで原因を探さずに済みます。

pictureタグとは、役割が違います。

どちらも画像まわりのタグなので、混同されがちです。

役割が違うので、どちらかを選ぶものではありません。両方使うこともあります。

<figure>
  <picture>
    <source srcset="wide.webp" media="(min-width: 768px)">
    <img src="narrow.webp" alt="グラフ">
  </picture>
  <figcaption>2026年の推移</figcaption>
</figure>

外側で意味を示し、内側で出し分ける。この組み合わせが自然です。

picture のほうはpictureタグの使い方にまとめています。

無理に使わなくてもいい場面。

「画像はfigureで囲むもの」と覚えてしまうと、かえって読みにくいHTMLになります。

次のような画像は、<img> のままで構いません。

• アイコンや装飾。本文から独立した「図」ではありません。
• ロゴ。見出しやリンクの一部として置かれているものです。
• メインビジュアル。ページの一部であって、参照される図ではありません。
• キャプションを付けない画像。付けないなら、囲む意味が薄くなります。

判断の基準はひとつです。「本文中の別の場所に移動させても、意味が通るか」を考えてください。

移動させても通るなら、それは独立した図なので <figure> が合います。本文の位置に依存しているなら、囲む必要はありません。