例えば、下みたいに <strong> にスタイルを適用した例を考えてみよう。

<style type="text/css">
<!--
  strong { color : #993333 ; }
-->
</style>

<strong> 文字は赤くなるけど、太字にもなる </strong>

多くのブラウザでは、<strong> は、中の文章を太字にするから、文字も自動的に太字になる。スタイル指定で <strong> で括られた部分の文字を太字に「しない」こともできるけど、いちいちそんな指定をするのは面倒だし、スタイルシートを無効にしてたり未対応のブラウザではそんな指定も消えるじゃん。

こんな風に、HTMLのほとんどの要素は、それぞれ独自のスタイルをデフォルトで持ってるから、純粋にスタイルシートで指定したスタイルだけを適用したいときに、それがジャマになることがある。そんな時に役に立つのが、spanとdiv要素だぜ。

span要素とdiv要素が何で役に立つかってと、spanもdivも、適用範囲しか指示しないからさ。他の要素みたいに、太字にしたり斜体にしたり、上下に余白が出来たりとか、そういったそれぞれの要素独自のスタイルを持ってない。

<style type="text/css">
<!--
  div.class1 { color : blue ; }
  span.class1 { color : red ; }
-->
</style>

だから、上みたいなスタイル指定をしたら、そのスタイル指定だけを、サンプル画像みたいに適用してくれる。便利だろ。

『にしてもさぁ、ただ範囲を示すだけだったら、要素２つもいらねぇんじゃん？』って思うかもしれないな。でも、違いがあるんだぜ。

div要素

ブロック要素で、<div> 〜 </div> で括った範囲の前後は改行される。
中には、他のブロック要素やインライン要素、文章などを入れられる。

span要素

インライン要素で、<span> 〜 </span> で括った範囲の前後は改行されない。
中には、他のインライン要素や文章を入れられる。