コンテンツをまとめるdivとspan要素の役割と違い【HTML】

コンテンツをまとめる役割のあるdiv（ディヴィジョン）とspan（スパン）要素。

これらのタグ自体には特別な意味はないですけど、意味づけするためによく使う要素です。

divとspanの役割

最初に言った通り、divとspanの役割はコンテンツをまとめたり、意味づけをすることです。

タグ自体に意味がないとも言いましたが、たとえば他のタグは、pタグは段落を表していたり、h1タグは見出しを表していたり、タグ自体に意味があるんです。

しかし、divとspanには特定の意味はありません。

divとspanは基本的にclassやidなどをつけて、そのセレクタを対象にスタイルをつけるためにあります。

divとspanの違い

一言で言ってしまえば、divはblock要素なのに対して、spanはinline要素であるというのが大きな違いです。

詳しくは別の記事でまとめますが、CSSにブロックボックスとインラインボックスという考え方があります。

divのようなブロックボックスは長方形のアウトラインをつくり上から下へと配置されるフローコンテンツとよばれるもので、spanのような段落の中で使うインラインボックスは左から右へ配置されるフレージングコンテンツとよばれています。

上のコードを見てもらうと少しイメージしやすいかもしれないですが、まず、「こんにちは。山田です。今日は暑いですね。」と「こんにちは。田中です。今日は寒いですね。」という文章をdiv（box1とbox2）で2つのかたまりに分けています。

そして、「暑い」と「寒い」という語句に対して、span要素を使って意味づけをして色を変えています。

このようにdivは大きなまとまり（高さと幅を指定できる箱）をつくるのに使い、spanはdivのように高さや幅は指定できないですけど、文章の一部分にスタイルをつけたいときなどに便利です。

ただし、divの階層の中にspanを入れることはできますが、逆にspanの階層の中にdivを入れることはできません。

これもブロックボックスやインラインボックスの特徴によるものです。