長くウェブプログミングを行っている人でも、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>
