HTMLのdivとspanはタグ自体には意味を持たないタグです。
そもそもHTMLのタグは、タグでマークアップしたコンテンツがどのような意味を持つ要素なのか目印を付けて示しやすくするためにあります。
たとえばhタグなら見出しとしての意味を持ち、pタグなら段落を意味するなど、それぞれの意味で役割を果たします。
- HTMLのタグで意味を持つタグ
- HTMLのタグで意味を持たないタグ
HTMLタグの中でもdivとspanは意味を持たないタグに分類されます。意味を持つタグと比べると、使用するときの違いが把握しづらいと感じる方も多いのではないでしょうか。
今回は、そんなdivとspanの違いを理解しながら考えてみようと思います。
divとspanの違いを用語から理解する
HTMLでマークアップするときに使うdivとspanの違いを理解したい場合には、まずdivとspanの用語の意味から考え始めると分かりやすくなります。
divとspanという用語自体の意味が理解できれば、それを手がかりにdivとspanの書き方や使い方の違いが理解しやすくなるだろうと思い実践した理解方法です。
divという用語の意味をヒントにする
divは「division(ディヴィジョン)」の略でdivisionという用語が持つ意味はいくつかあります。
「divisionの意味」
分割、分配、(分割された)区分、部分、仕切り
調べると他にもたくさんあるのですが、上記のdivisionの意味の中でもHTMLのdivと繋がる意味は「分割」「分配」「区分」あたりが該当します。
divisionの意味をHTMLのdivと繋げるとspanとの違いのヒントになります。
divは一つのかたまりのブロックを形成します。そして形成したブロック一つ一つを「分配」したり、divボックスの中でさらにボックスを「分割」したりすることができるようになり、divはマークアップする要素を「区分」することができる。のように意味を含めてdivが理解できます。
現時点では、HTMLのdivを使用することで分配や分割して区分できるということを、ぼんやりとで良いので頭に入れておいていただきたいです。
spanの用語の意味から違いのヒントを得る
一方でspanの意味は「長さ、距離、期間、時間、端から端までの長さ」などいくつかの意味があります。
spanはdivとは違い、略した用語ではないのでここで一つdivとspanの違いを述べるとしたら、略しているか略していないかの違いがあります。
spanの用語の意味の中の「端から端までの長さ」という意味をHTMLにおけるspanの意味と繋げると、divとの違いのヒントを得ることができます。
spanは文章内の一部分の文章だけの「端から端までの長さ」だけを作る要素としての意味を持たせることができます。
文章内の一部分というのはdivがブロックボックスを作るのに対して、spanはインラインのボックスを形成するという違いがあるため意味を持たないタグという共通のタグだとしても、同じインラインに組み込むならspanが適しているのです。
divとspanの違いを書き方から理解する
次はdivとspanの書き方の違いを理解して、さらに違いを考え深めて行きます。
HTMLでdivとspanをそれぞれマークアップしながらcssも使用すると理解しやすくなります。
divが縦に並ぶ書き方
<div>divのボックス</div>
<div>divのボックス</div>
HTMLのdivでマークアップした2つの要素を作成すると、div要素は改行されて縦に並びます。
div{
display: block
}
これはHTMLのdivにCSSでblockのプロパティ指定をしなくても初期値でdisplay: blockが適用されている状態で、一つのかたまりのブロックを形成する性質を持っているからです。
ここでは上記画像のようにdivをHTMLでマークアップするときは改行する。ということを理解しながら、次にspan要素がdivとは違う別のボックスを形成することを知ることでdivとspanの違いが理解できます。
spanが横並びになる書き方
<span class="span-box">span要素1</span>
<span class="span-box">span要素2</span>
<span class="span-box">span要素3</span>
spanでマークアップした要素を3つ作成してブラウザで確認すると、改行されるdivとは違い「span要素は横並び」になります。
これはspanタグにCSSで何も指定しない初期値の場合display: inlineが適用されているからです。
つまりHTMLのspanがインラインの横並びに対して、divは改行されて縦に並ぶというタグの性質の違いが理解できます。
<p>文章内に<span class="span-box">span要素</span>をマークアップ</p>
spanが横並びになるため使い道はさまざまですが、上記HTMLコードのように文章の中の一部の文章だけをスタイルしたいときに適しているのがspanタグです。
divとspanの違いを使い方で理解する
HTMLのdivとspanの違いを用語と書き方の2つの視点から理解して考えてきましたが、次はそれらを基礎として、divとspanの違いを「使い方」で理解を深めようと思います。
divの使い方の次にspanの使い方を説明して違いがわかるようにしています。
divをブロック要素とした使い方
まずはdivの視点からの使い方の違いです。
先述していますが、divは使用することで分配や分割して区分できるということ。そしてdiv要素は改行されて縦に並ぶということ。
これらを考えた場合、divはHTML内の要素を囲んでそれぞれのコンテンツを分配しCSSでスタイルを整える役割としての使い方ができます。
たとえばHTML5から追加されたheaderタグやnavタグなどは、divの意味を持たないタグとは違い、マークアップした要素の意味を示すことができます。
そしてheaderやnavタグは、スタイルあてのために使用すべきではないため、代わりにdiv要素でスタイルをあてるような使い方をします。divはdisplay: blockでブロック要素になるので、大きなブロックから小さなブロックまで柔軟な使い方ができるからです。
divが柔軟な使い方ができるため、ときにはspam要素をdiv要素に含めることもあります。
divにspanを入れるのは入れ子ルールでは問題ありません。逆にspanにdivを含めることは入れ子ルールに反しています。
spanをインライン要素とした使い方
spanはインラインなのでp要素の中で強調したい文章にするためにスタイルを部分的に適用する使い方ができます。
divのように大きなブロックの区分に使用できるのとは違い、コンテンツの細かい部分のスタイルを適用したいなどに向いています。
たとえば、文章の中で強調したい単語にマーカーを引きたいというときには、目的の単語を<span class=”marker”></span>でマークアップして指定したcssを使い回すという使い方ができます。
そしてspanはdivのブロック要素とは違い、初期値がインラインなのでCSSでwidth(幅)とheight(高さ)の指定をしても反映されません。そのため文章がインラインなのに対して同じインラインのspanでスタイルするのに向いているのです。
それでもspanをdivと同じくwidthとheightを適用する使い方があります。
spanの初期値のdisplay: inlineをdisplay: blockに変更すると、divと同じブロック要素にできます。
span要素を3つくらい作成してwidthの指定をしても適用されないのを確認したら、display: blockを加えるとdivのようにspan要素が改行され縦並びになるので、違いを視覚的に理解してみると良いかもしれません。
まとめ
HTMLのdivとspanの違いを理解するために「用語」「書き方」「使い方」3つの視点で理解できるように考えてみました。
なんだかんだ内容がわちゃわちゃした感じがするので最後にdivとspanの違いをまとめると以下のようになります。
- そもそもタグ名の意味が違う
- 略語と略語ではない違い
- 縦に並ぶか横に並ぶかの違い
- displayの値がblockかinlineの違い(でも指定変更可)
- スタイリングのために使うことは共通でも使い分けの違いがでる
1と2は「説明されなくてもわかりますよレベル」の違いですが、divとspanの違いには代わりないので、ゴリ押し感出して含めてみました。
何か一つでもヒントになることがあればと思います。
