【初心者向き】HTML figureタグの正しい使い方!

  • 2025年9月27日
  • 2025年9月27日
  • Coding

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属性とは、似ているように思えますが内容がことなってきます。

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