Appendix C : ブロック要素とインライン要素
本文 Section 4 で，HTML の要素にはブロック要素とインライン要素があることを触れた。ここでは，それについてもう少し詳しく解説する。
HTML の構造モデル
HTML では，ひとつの文書ファイル，とりわけ <BODY>...</BODY> でくくられる“本文”をどのようにとらえるのだろうか？
右図に示したように，HTML の本文はブロック要素から構成される。“ブロック要素”という文書を構成するときの“まとまり”を並べて文書を組み立てていくのである。たとえば，“パラグラフ：文のひとまとまり”“箇条書き”“見出し”“水平線”などを並べて HTML の本文を構築する。
そういったブロック要素の中には，“ここから〜ここまで”でくくられた範囲に文字を含めたインライン要素を書くことができるものがある。たとえば，パラグラフ <P> はそのもっともオーソドックスなものである。
一般に，HTML は本文中にブロック要素が並べられ，その中にインライン要素を記述するという構造を持っている。したがって，ブロック要素はインライン要素をまとめるより大きな単位であるということができる。
HTML の要素の中には，ブロック要素のなかにさらにブロック要素を書くことができるものもある。たとえば <DIV> がそれにあたる。これは，<DIV> がインライン要素を記述するほかに，ブロック要素をまとめるという役割を持っているということである。いっぽう，<P> はその中にブロック要素を含んではいけない。<P> はあくまで文を書くためのブロック要素であり，たとえば，<P>...</P> の中に，<Hn> で見出しを作ったり，<HR> で水平線を引いてはいけないのである。
また，ブロック要素には，その中に直接インライン要素を書かず，その中にいくつかの要素を書いて，そこにインライン要素を書くというものもある。箇条書き <UL> や <OL> は直接その中に箇条書きの項目を書くのではなく，<LI> を使ってその中に初めてインライン要素を書くことができる（<LI> は，<DIV> のようにブロック要素を含んでもよい）。
逆に，ブロック要素はインライン要素をまとめるものであるから，インライン要素の中にブロック要素を書くことはほとんどない。これが許されるのは，<MAP> や <OBJECT> など，きわめて特殊な構造を表現するための要素で，しかもその多くがそれが何らかの理由で利用できないときの代替措置としてである。
CSS における要素の分類
CSS はその適用範囲としてボックスを描くが，その形状がブロック要素とインライン要素とで決定的に異なることは前に述べた。だが，ここで，もう少し細かい CSS における要素の分類をしておく必要がある。
■ 置換要素
HTML は基本的にテキストで，すなわち文字のデータしか含まないのであるが，<IMG>，<OBJECT> を使って画像や Java アプレットなどを貼り込むことができる。これは，あたかも要素が非テキストのデータに置換されたかのように見えるため，これらは置換要素と呼ばれる。
置換要素は <IMG> のようなインライン要素のものと，<TEXTAREA> ようなブロック要素のものとの両方があり得る。置換要素は特にインライン要素の場合ボックスの扱いが微妙に異なり，適用される属性も通常の要素と違いがある。
IE3/4/5 インライン要素には通常マージンは指定できないが，置換されたインライン要素には指定が可能である。
■ 回り込み要素
たとえばテキストの流れの中になく，表示領域の左または右に独立して表示され，テキストがよけるように配置される要素は回り込み要素という。テキストの流れの中に島のように浮いている要素のように見ることもできよう。
回り込み要素もインライン要素，ブロック要素両方の場合がある。回り込み要素のボックスはブロック要素のように“かたまり”として扱われるが，回り込みのかかったブロック要素の場合でもつねに表示領域いっぱいの幅を持っているわけではなく，要素固有の幅を持っている。また，整形のされ方，たとえばマージンのとられ方は回り込みを指定していない要素と違う点がある。
ここでのこれ以上の細かい論議は避けるが，CSS が HTML の要素と密接に結びついて複雑なレイアウト処理を行っているということが垣間見られたと思う。こういったことは簡単なデザインのうちにはあまり気にしなくてもどうにかなってしまう部分であるが，やがて複雑なレイアウトなどを行うとなると避けて通れない話題である。これは，CSS が HTML 要素をどう扱うかというひじょうに基本的であるが難しい問題（フォーマッティングモデル）に関わっている。
細かい点は後でじっくり理解すればよいことだし，ここでは“CSS が HTML の要素と密接に結びついて複雑なレイアウト処理を行っている”という事実と，置換要素，回り込み要素がおよそどんなものであるかをつかんでおいていただければそれでよい。