【HTML figure】figureタグとは？imgタグやdivタグとの違いを徹底解説！HTML＆CSS入門

「HTMLを勉強し始めて<figure>タグを見たことはあるけど使い方がわからない」

「<figure>タグと<img>タグとの違いがわからない」

こんな悩みを抱えている人はいませんか？
プログラミング学習を始めてHTML、CSSを勉強すると、タグの種類の多さにびっくりしてしまいますよね。
タグの多さに学習が止まってしまうプログラミング初学者の方も少なくありません。
今回の記事では図表であることを示す際に使用する<figure>タグについて現役エンジニアが徹底解説します！

この記事を読むことで<figure>タグの使い方や似たような役割を持つ<div>タグとの違いを知ることが出来ます。

＼プログラミングスクールを比較／

	DMM WEBCAMP	COACHTECH	RUNTEQ
目指せる姿	WEBエンジニアへの転職	フリーランスエンジニア	WEBエンジニアへの転職
分割払い	○	○	○
補助金	○	×	○
転職保証	○	×	×
受講期間	3ヶ月〜	3ヶ月〜	5ヶ月〜
特徴	【IT業界の転職を一番に考えたい方向け】 大手DMMが運営のプログラミングスクール 転職成功率98.8% 豊富なキャンペーンや補助金制度あり	【フリーランスを目指したい方向け】 フリーランスのエンジニアを最短で目指す エンジニアと共に実際の案件開発を担当	【とことん勉強してから転職したい方向け】 1,000時間（約9カ月）のカリキュラムでしっかり勉強 企業の求める即戦力のWEBエンジニアを目指す
料金	329,350円〜 ※給付金適用後	42万9,000円~	55万円
	公式HP	公式HP	公式HP

<figure>タグ とは

<figure>タグ（フィギュアタグ）とは図表を示す際にコンテンツを囲むタグです。
主に注釈（キャプション）を付ける場合に使用する<figcaption>タグと一緒に使用します。
<figure>タグはHTML5で追加された新しいタグになります。
HTML5については下記の記事で詳しく解説してあるので、この機会にあわせて理解を深めましょう！

【初心者入門】HTML5ってそもそも何？HTML4と違う点は？徹底解説！

<figure>タグの使用方法

実際のコードを見ながら<figure>タグの使用方法を見ていきましょう。
<figure>タグは以下のように図表を含む要素をグループ化します。

<figure>タグは<div>タグと同様にタグそのものは意味を持ちません。
要素を<figure>タグで囲んでグループ化することで、HTMLとひもづくCSSの記述がわかりやすくなります。
また、第三者がコードを読んだ際にわかりやすいコードになります。

<figure>タグの最大の特徴は<figcaption>タグと併用することで図表に対して注釈を入れることが出来ることです。
HTML4までは図表に対して注釈を入れる専用のタグは存在しませんでした。
そのため、図表の要素の下に改行を意味する<p>タグを使用して文字を記述することで注釈の代用をしてきました。
以下がHTML4までのバージョンで図表の下に注釈を記述しようとした場合のコードの一例です。

こちらの記述でもWebブラウザ上での見え方の違いはほとんどありません。

しかし図表を含む要素をグループ化するための<figure>タグ、注釈専用の<figcaption>タグを使用した方が、第三者がコードを読んだ際にわかりやすい記述となっています。

よくある<figure>タグに関する疑問

<figure>タグはHTML5で追加された新しいタグであり、タグそのものは意味を持たないことから他のタグと混同しやすいです。
中でも混同しやすい3つのタグとの違いについてわかりやすく解説をしていきます。

①<figure>タグと<img>タグの違い

<img>タグは単体で意味を持つタグであり、<figure>タグは単体では意味を持たないタグです。
<img>タグはHTMLで画像を表示する際に必須のタグになります。<img>タグにsrc属性として画像のソースURL（ローカルの場合はファイルパス）を付加することでWebブラウザ上に画像を表示する事が出来ます。
<figure>タグはあくまでも図表を示す際にコンテンツを囲むタグであり、<img>タグのように単体でsrc属性を付加して画像を表示することは出来ません。

②<figure>タグと<div>タグの違い

<div>タグと<figure>タグはどちらもコンテンツを囲むタグとして非常に似た性質を持っています。
この2つのタグの違いは<figure>タグが図表コンテンツを囲むことに特化しているのに対して<div>タグは図表以外のコンテンツを囲む際にも使用されます。

「それなら最初から<div>タグだけを使えばよいのでは？」と考える方もいらっしゃると思います。

実際HTML4までは<div>タグで図表コンテンツも囲っていたので間違いではありませんが、第三者がコードを読んだ際に<figure>タグがあれば図表のコンテンツであるとすぐに解読することが出来ます。
可読性の高いコードにすることで、保守性が高まり改修や機能追加をしやすいコードになります。

<div>タグはHTML、CSSを学習する上で非常に使用頻度の高いタグですが、単体で機能を持たないタグであることからプログラミング初学者には理解が難しいタグです。
<div>タグに関しての詳細は下記の記事で詳しく解説してあるので、この機会にあわせて理解を深めましょう！

【HTML div】divタグとは？使い方を基礎から徹底解説｜HTML＆CSS入門

③<figure>タグと<p>タグの違い

<p>タグは段落を示すタグであり単体で意味を持つタグです。<figure>タグは単体では意味を持たないタグです。
この2つのタグは大きく役割が異なるので混合する人は少ないと思います。
しかし<figure>タグの中で使用頻度の高い<figcaption>タグと<p>タグはWeb上での見え方がほとんど変わらないため、どちらを使えばよいか迷う方は多いでしょう。
<p>タグは段落を示すタグであり、注釈以外の段落を表現する際にも用いられます。一方<figcaption>タグは注釈専用のタグであり、<figure>タグ内でしか使用しないタグと覚えましょう。

<figure>タグを使用するメリット

<div>タグと同じくコンテンツを囲むタグである<figure>タグをあえて使用するメリットはあるのでしょうか。ここでは<figure>タグを使用するメリットを2つご紹介します。

①コードの可読性が高くなる

<figure>タグを使用するメリットの1つ目はコードの可読性が高くなることです。
<figure>タグは図表にしか使用出来ないタグであるため、コードを読んだ際に図表に関する記述であると一目で判断することが出来ます。

特にチームでの開発がメインとなるエンジニアは、自分で書いたコードが第三者が見やすいコードであるかが非常に重要になります。
また、開発後の保守運用時に開発担当以外のエンジニアが引き継ぐこともあり、常に第三者が見てもわかりやすいコードを記述することが重要になります。

②SEO対策になる

<figure>タグを使用するメリットの2つ目はSEO対策になることです。
<figure>タグを使用することで、人間がコードを見た場合と同様に機械が見てもわかりやすい文書構造になります。

わかりやすい文書構造のWebサイトはクローラーと呼ばれるWebサイトの情報を収集するプログラムで見つけやすくなります。
クローラーで収集した情報によって検索した場合に上位表示するかどうか決めるため、クローラーが見つけやすいようなWebサイトを作成することはSEO対策の1つになります。

まとめ

<figure>タグに関してご紹介させていただきました。

図表コンテンツを囲むことに特化している<figure>タグを使用することで、HTMLの記述をわかりやすくすることが出来ます。
また、図表に注釈を入れたい場合には注釈専用のタグである<figcaption>タグを使用することでより可読性の高いコードを実現することが出来ます。

コードの記述の方法は様々ですが、人間が見たときでも機械が見たときでもわかりやすいコードを記述することが非常に重要になります。
常にわかりやすいコードを記述するように心がけましょう！