長くウェブプログミングを行っている人でも、DIVとSPANの違いは?と聞くと, “DIVはブロックエレメントでSPANはインラインエレメント”と返ってくるが、実際にどう使い分ける?と聞くとボロックエレメントが必要な場合はDIVで、インラインエレメントが必要なときはSPAN” と返ってくる。

実際、その答えは間違ってはいない。ただ、状況によってはSPANを使ってわざわざスタイルシートで display:block; を指定すことがある。CSSをメインで行ってないプログラマーにとっては、”なぜ?わざわざ一行増やすの?”となる。

正しいDIVとSPANの使い分け方の答えは、CSSの元々のフィロソフィーにある。
いつも忘れては行けないのが、CSSの本来の役割は、ウェブサイトのコンテンツであるテキストとデザイン用のコードを分けながら、正しいマークアップを行うことにある。

例えば、本文の題名をdivで囲むことは、正しいマークアップではないことはみなさんわかりますね?!

<!-- 正しくないマークアップ例 -->
<div>本文の題名は、DIVで囲む?</div>

<!-- 正しいマークアップ例 -->
<h1>本文の題名用のタグを使う</h1>

では、DIVはある区分を囲む為にあるのもわかりますね?!
例えば下のように筆者の紹介用のブロックがあるとしたら、必然的にすべてをDIVで囲み一つの意味のあるセクションとにします。

<!-- 正しいマークアップ例 -->
<div>
    筆者名
    <p>紹介文</p>
</div>

じゃ、最終的に”筆者名”にスタイリングする必要があり、スタイリングにブロックエレメントが必要だとして、
divかspanタグしか使えない状況だとしたら、あなたらSPANかDIVどっちらを使いますか?
…. わかりますね? 正しいマークアップを使うことがHTML/CSSでは、一番重要だということです。 

<!-- css style でボロックエレメントが必要な為にDIVを使用した例 -->
<div>
  <div id="author">筆者名</div>
  <p>紹介文</p>
</div>

<!-- 正しいマークアップ例 -->
<div>
    <span id="author">筆者名</span>
 <p>紹介文</p>
</div>