今までは，<H1>（見出し），<EM>（強調）といった文書中である役割をもつ要素にスタイルを指定した。ここでは“スタイルを適用する範囲”を示し，ほかの役割を持たない HTML の要素を導入する。
<DIV> と <SPAN> は文書中での役割をもたない，ただ“範囲を指定する”だけの要素である。したがって，いずれも“ここから〜ここまで”の形で使われる。
ここで“文書中での役割をもたない”というのは，たとえば <UL> はくくった範囲に“箇条書きである”という“役割”を与えるが，<DIV> と <SPAN> は決まった役割を与えない。
<DIV> と <SPAN> は，スタイルシートの範囲指定のほかに，ある範囲が“何語で書かれているか”を示すのにも用いられる。
<DIV> と <SPAN> は，ほかの要素と同じく STYLE 属性を持ち，スタイルを範囲に適用する。
使い方は，“範囲指定”しか表さないことをのぞけばほかの要素とまったく同様である。
<P>指定された範囲に<SPAN STYLE="color: red; font-size: larger;">スタイル</SPAN>を適用します。</P>
指定された範囲にスタイルを適用します。
“範囲指定”の <DIV> と <SPAN> の使い分けは，HTML 文書の記述に使われる要素が，大きく 2 つの種類に分けられることによる。
HTML を書いていると，タグで“ここから〜ここまで”を指定し，要素を作ったときに
の 2 種類があることに気づくはずである。前者はブロック要素（前後を改行して“かたまり”をつくる），後者はインライン要素（行中にそのまま続いていく）という。
おもな要素をブロック要素とインライン要素に分けてみよう。
| ブロック要素 | インライン要素 | ||
|---|---|---|---|
| 段落 | <P> | 太字 | <B> |
| 見出し | <Hn> | 斜体 | <I> |
| 順序なし箇条書き | <UL> | 強調 | <EM> |
| 順序あり箇条書き | <OL> | 強い強調 | <STRONG> |
| 引用 | <BLOCKQUOTE> | 文中での引用 | <Q> |
| 水平線 | <HR> | 画像 | <IMG> |
どんなはたらきをする要素かを思い出しながら，ブロック要素とインライン要素の違いをつかもう。
また，CSS を書いていく上で作用させる範囲がブロックかインラインかが重要な意味を持つことがある。厳密なところはともかく，ブロック要素とインライン要素，その違いをおよそでも知っておこう。
そこで，<DIV> と <SPAN> の違いであるが，前者はブロックで，後者はインラインで，スタイルの適用範囲を定める。すなわち，
である。使い方の違いを確認してみよう。
<P>行中に<SPAN STYLE="color: maroon;">スタイルを適用</SPAN>します。</P>
<DIV STYLE="color: navy;">
<P>段落といった改行を前後に伴う要素にスタイルを指定します。</P>
<P>ブロックレベルのスタイル。</P>
</DIV>
行中にスタイルを適用します。
段落といった改行を前後に伴う要素にスタイルを指定します。
ブロックレベルのスタイル。
ひじょうに簡単にいってしまえば，<DIV> と <SPAN> の違いは，前後に改行を伴うか，伴わないかである。
厳密には，ある種類の要素が前後に改行をともなって出力されるかどうかも，CSS での指定による。しかし，HTML での <DIV> および <SPAN> の定義，ならびに実用の観点から，上記のように理解されて支障はなかろう。