HTMLの勉強を始めて、spanタグとdivタグの役割はなんとなく分かった。
でも、いざコードを書こうとすると「どっちを使えばいいの？」と迷ってしまう……。
文字の一部分を囲みたいときや、どこまでの範囲をdivタグでまとめればよいのかなど、正しいHTMLの書き方に迷う初心者は少なくありません。
どちらも要素をグループ化するタグであるため、違いが分かっていても実際の使い分けで悩むことはよくあります。
結論から言うと、この2つのタグは「対象が文章の一部分なのか、それとも要素のまとまりなのか」という範囲で使い分けるのが基本です。
また、その違いを正しく理解するには、インライン要素とブロック要素の考え方も知っておく必要があります。
ここでは、spanタグとdivタグの基本的な違いを簡単に確認したうえで、インライン要素とブロック要素の特徴、HTML5以降での考え方、そして実際にどのような場面でspanタグとdivタグを使い分ければよいのかを、コード例を交えながら初心者向けにわかりやすく解説します。
読み終える頃には、「この場合はspanタグ」「この場合はdivタグ」という判断ができるようになり、自信を持ってHTMLを書けるようになるでしょう。
spanタグとdivタグの違いを簡単に確認
spanタグ と divタグ は、どちらも HTML要素 をグループ化するために使用するタグです。
しかし、グループ化する「範囲」が異なるため、目的に応じて使い分ける必要があります。
spanタグは文章や文字の一部分を指定する場合に使用し、divタグは要素やコンテンツのまとまりをグループ化する場合に使用するのが基本です。
spanタグとdivタグの違いや特徴について詳しく知りたい方は、以下の記事をご覧ください。
＞＞spanタグとdivタグの違い
spanタグは文章内の一部分を指定するタグ
spanタグは、文章や文字の一部分をグループ化するために使用するタグです。
文章全体の流れを崩さずに、ピンポイントで「ここだけ」を指定したいときに大活躍します。
主な用途は以下の通りです。
・文字色の変更（特定のキーワードだけ赤文字にする、など）
・文字サイズの変更（注釈だけ小さくする、など）
・特定部分へのCSS適用（一部の文字だけに背景色や下線を引く）
・JavaScriptでの操作（特定の文字だけを動的に変化させる）
例えば、商品の価格だけ文字色を変更したい場合は、次のように spanタグで対象の文字を囲みます。
商品の価格は<span class="price">980円</span>です。この例では、「980円」の部分だけが spanタグで囲まれています。そのため、CSS を使って文字色や文字サイズを変更したり、JavaScript で価格部分だけを取得・変更したりできます。
divタグは要素をグループ化するためのコンテナ
divタグは、HTML要素をグループ化するために使用する汎用的なコンテナです。
特定の意味を持つタグではなく、要素をひとまとまりとして扱いたいときに使用します。
主に、CSS を適用する範囲を作ったり、レイアウトを調整したり、関連するコンテンツを1つのグループとして管理したりする目的で利用されます。
例えば、商品名と商品の説明を1つの商品情報としてまとめる場合は、次のようにdivタグを使用します。
<div class="product">
<h2>商品名</h2>
<p>商品の説明</p>
</div>この例では、h2タグ と pタグ を商品情報という1つのまとまりとしてグループ化しています。divタグ に productクラス を指定することで、商品情報全体に背景色や余白、枠線などのデザインをまとめて適用できます。
また、divタグ は必ずしも複数の要素を囲むためだけに使用するものではありません。
例えば、1つの要素に対してレイアウトや CSS を適用したい場合にも利用できます。
divタグ の主な用途は次のとおりです。
・CSSを適用する範囲を作る
・レイアウトを調整する
・関連する要素をグループ化する
・JavaScriptでまとめて操作する対象を作る
このように、divタグ は「要素をひとまとまりとして扱いたい場合」に使用するタグと考えると、spanタグ との違いを理解しやすくなります。
spanタグ が文章の一部分を対象にするのに対し、divタグ は要素やコンテンツ全体をグループ化する役割を持っています。
spanタグとdivタグを理解するためのインライン要素とブロック要素
spanタグとdivタグを正しく使い分けるためには、「インライン要素」と「ブロック要素」の違いを理解することが大切です。
spanタグが文章の一部分を対象とし、divタグが要素のまとまりを対象とするのは、それぞれが持つ表示上の特徴が大きく関係しています。
そのため、この考え方を理解しておくと、「どちらのタグを使えばよいのか」を判断しやすくなります。
補足：HTML5以降では「インライン要素」「ブロック要素」は正式な分類ではありません
HTML4以前では、HTMLタグを「インライン要素」と「ブロックレベル要素」に分類して考える方法が一般的でした。
しかし、HTML5以降では「コンテンツ・モデル」という考え方によって要素の役割や配置ルールが定義されています。
ただし、spanタグとdivタグの特徴やCSSによる表示の違いを理解するうえでは、現在でもインライン要素・ブロック要素という考え方は役立ちます。
そのた、この記事では初心者向けに理解しやすくするため、「spanタグはインライン要素として扱われる」「divタグはブロック要素として扱われる」という表現で解説します。
spanタグはインライン要素として扱われる
spanタグは、インライン要素として扱われるタグです。
インライン要素とは、文章の流れの中で使用される要素のことで、基本的に前後で改行されず、ほかの文字と同じ行に表示されます。
例えば、次のHTMLでは「5,000円」の部分だけをspanタグで囲んでいます。
合計金額は<span>5,000円</span>です。ブラウザでの表示結果は次のようになります。
spanタグで囲まれた「5,000円」は文章の途中にあるため、前後で改行されることはありません。
そのため、文字色や文字サイズを変更したり、一部分だけをJavaScriptで操作したりする場合に適しています。
spanタグの特徴をまとめると、次のとおりです。
・文章の流れの中で利用する
・基本的に前後で改行されない
・文章や文字の一部分を指定する用途に向いている
このように、文章の一部分だけを対象にしたい場合は spanタグ を使用するのが基本です。
divタグはブロック要素として扱われる
divタグは、ブロック要素として扱われるタグです。
ブロック要素は、前後で改行され、1つのまとまりとして表示されるのが特徴です。
例えば、次の HTML では、見出しと説明文を divタグ で囲んでいます。
<div class="product">
<p class="name">りんご</p>
<p class="price">980円（税込）</p>
<p class="description">青森県産の新鮮なりんごです。</p>
</div>CSS
.product {
width: 300px;
padding: 20px;
background-color: #FFFACD;
border: 1px solid #ddd;
border-radius: 8px;
}ブラウザ上での表示は次のようになります。
りんご
980円（税込）
青森県産の新鮮なりんごです。
このように、divタグは文章の一部分ではなく、関連する要素をひとまとまりのコンテンツとして扱うために使用します。CSSでは、このまとまり全体に背景色や余白、枠線などを設定できるため、レイアウトを作成するときにもよく利用されます。
divタグの特徴をまとめると、次のとおりです。
・前後で改行される
・要素をひとまとまりとして扱える
・レイアウトやデザインを適用する範囲を作りやすい
つまり、spanタグが「文章の一部分」を扱うのに対し、divタグは「要素やコンテンツのまとまり」を扱うという違いがあります。
この違いを理解しておくと、どちらのタグを使うべきか判断しやすくなります。
spanタグやdivタグを使わないほうがよいケース
spanタグ と divタグ は、HTML要素 をグループ化したり、CSS や JavaScript を適用する範囲を作ったりするために便利なタグです。
しかし、どのような場面でも spanタグ や divタグ を使えばよいわけではありません。
HTML には、見出し・文章・リストなど、それぞれの役割を表すための専用タグが用意されています。
そのため、内容に合った意味を持つ HTMLタグ がある場合は、spanタグ や divタグ ではなく、適切なタグを優先して使用します。
意味を持つHTMLタグがある場合
例えば、ページ内の見出しを表示する場合、divタグ で囲むこともできます。
<div>
spanタグとdivタグの違い
</div>しかし、この内容は見出しを表しているため、h2タグ を使用するほうが適切です。
<h2> spanタグとdivタグの違い </h2>h2タグ を使うことで、検索エンジンやブラウザ、支援技術などに「これは見出しである」と正しく伝えられます。
同じように、文章の場合は spanタグ ではなく、段落を表すpタグを使用します。
<p> HTMLの説明文です。 </p>また、リストを表す場合は ul や ol、ナビゲーション部分には nav など、内容に適した HTMLタグ を選択します。
spanタグやdivタグは「意味を持たない汎用タグ」
spanタグ と divタグ は便利なタグですが、それ自体に特別な意味はありません。
主な役割は、
・CSSを適用する範囲を作る
・JavaScriptで操作する対象を指定する
・要素をグループ化する
ことです。
そのため、HTML上 で意味を表現できるタグがある場合は、spanタグ や divタグ ではなく、目的に合ったタグを使用します。
例えば、ページの見出しを作る場合は h1〜h6タグ、文章を表す場合は pタグ、箇条書きを表す場合は ul や olタグ を使用します。
見た目だけを CSS で整えることはできますが、適切な HTMLタグ を使うことで、検索エンジンやブラウザ、支援技術にもページ構造が正しく伝わります。
spanタグとdivタグはどっちを使う？使い分け方判断基準
spanタグ と divタグ のどちらを使えばよいか迷った場合は、「何をどの範囲で指定したいのか」を基準に判断します。
ただし、最初に確認したいのは、spanタグ や divタグ を使う必要が本当にあるかという点です。
HTML には、見出しを表す h1〜h6、文章を表す p、リストを表す ul や ol など、それぞれの役割に合わせたタグがあります。
そのため、HTML上の意味を表現できる専用タグがある場合は、まずそちらを使用します。
そのうえで、CSS や JavaScript の適用範囲を作りたい場合に spanタグ や divタグ を使用します。
判断基準を整理すると、以下のようになります。
・HTML上の意味を表したい → 専用のHTMLタグを使う
・意味はないが、装飾や操作の対象を作りたい→ spanタグを使う
・複数の要素やコンテンツをひとまとまりとして扱いたい → divタグを使う
つまり、spanタグ や divタグ は「何でも囲むためのタグ」ではありません。
適切な意味を持つ HTMLタグ を使ったうえで、必要な範囲だけを指定するために使用するタグと考えると、正しい HTML構造 を作りやすくなります。
