HTMLのdiv,span,figureタグの使い分け

概要

ここではHTMLのdiv,span,figureタグの使い分けについて学習します。
すべて画面上でグループを表現するためのタグです。
見比べてそれぞれの使い方の違いを感じ取ってください。

divタグ

役割＆特徴

divタグはHTML文書内で意味的にまとまった範囲をグループ化するために使用されます。
まとまった範囲をグループ化するだけなので、タグそのもの、また囲まれた範囲内に特別な意味は発生しません。

classやidを記載することで、CSSでスタイルを適用できるようになります。
おもに範囲内の文字色を変えたり、余白を付けたりするときに使用します。

ブロック要素なので、囲まれた範囲は可能な限り幅いっぱいに広がります。
つまり囲まれた前後は改行されることになります。

使用例

<div>
  <div class="bold">ここの文字を太字にする</div>
  <div class="red">ここの文字色を赤にする</div>
</div>

spanタグ

役割＆特徴

spanタグはHTML文書内で意味的にまとまった範囲をグループ化するために使用されます。
まとまった範囲をグループ化するだけなので、タグそのもの、また囲まれた範囲内に特別な意味は発生しません。

classやidを記載することで、CSSでスタイルを適用できるようになります。
範囲内の文字色を変えたり、余白を付けたりするときに使用します。

インライン要素なので、囲まれた範囲の前後が改行されるということはありません。
つまりspanタグを連続して記述しても、横並びになります。

使用例

<div>
  吾輩は<span class="bold">猫</span>である。<span class="red">名前はまだない。</span>
</div>

figureタグ

役割＆特徴

figureタグは画像や図表と、テキストなどをグループ化するために使用されます。
figureタグの中にfigcaptionタグを記述することで図表の説明などを表現します。

ブロック要素なので、囲まれた範囲は可能な限り幅いっぱいに広がります。
つまり囲まれた前後は改行されることになります。

使用例

<figure>
  <img src="image.jpg" alt="ロゴ画像">
  <figcaption>シャッチクンの画像です</figcaption>
</figure>

まとめ

divタグとspanタグの違いは、囲んだだけで改行されるかどうかです。
またdivタグで囲んだだけでは、囲んだ範囲に意味を与えることができないので、他の適切なタグで記述できないか常に考えましょう。
画像ならばfigureタグで囲むのが望ましいですし、文章ならばpタグになります。
ヘッダーやフッター、サイドバーといったものは専用のタグがありますので、そちらを使用するようにしましょう。
divタグが少ないコードのほうが、他の開発メンバーが見た時にわかりやすくなります。
またspanタグで文字を強調したい場合はstrongタグの使用を検討しましょう。
他の開発メンバーはもちろん、検索エンジンにも重要な記述だと知らせることができます。