ブロックレベル要素とインライン要素

HTMLでは多くの要素タイプが定義されていますが、そのうちbody要素の中で使われるものは、大きく「ブロックレベル要素」と「インライン要素」に分けることができます。

ブロックレベル要素

ブロックレベル要素は見出し、段落など文書を構成する基本要素となるものです。ブロックレベル要素の内容モデルには、別のブロック要素やインライン要素を含むことができますが、逆にインライン要素の中にブロックレベル要素を置くことはできません。

*ブロックレベルに属する要素タイプでも、p要素タイプのように内容モデルにはインライン要素しか持てないもの、pre要素タイプのようにさらに内容が限定されるもの、hr要素タイプのように内容を持たないものもあります。

ブロックレベル要素は、ブラウザでの表示に際してもひとつの「ブロック(通常改行を伴う表示上のまとまり)」として扱われます。ブロックの間に空行を置くかどうかは、仕様書には定められておらず、ブラウザやスタイルシートの設定に依存します。

ブロックレベル要素の例としては、見出し要素段落要素リスト要素ブロック引用要素アドレス要素hr要素整形済み要素テーブル要素div要素などがあります。

インライン要素

インライン要素は、主としてブロックレベル要素の内容として用いられるもので、文書の構造を構成するというより、ブロックレベル要素内の特定の部分になんらかの役割や機能を持たせる要素です。たとえば、ある語句に対してハイパーリンク機能を与える アンカー要素、 特定の語句を強調する要素などです。

インライン要素は、その内容に文字データあるいは他のインライン要素を持つことができますが、ブロックレベル要素を含むことはできません。

その他のインライン要素としては img要素br要素span要素などがあります。

〔補足〕

要素タイプの内容を限定する「内容モデル」でインライン要素という場合は、通常、上記の要素タイプ以外に単なる文字列も含みます。たとえば“p要素タイプの内容モデルはインライン要素に限る”というときは、パラグラフの中に強調要素やアンカーだけでなく、直接文字列を記述することもできます。

〔以上補足〕

厳しい話

HTML 4では、従来の要素との互換性を考慮したTransitionalDTDのほかに、HTMLからレイアウト要素を取り除いた厳しいDTDであるStrictがあります。名前の通り、Transitionalは過渡期のものという位置づけで、本来はStrictに基づいたHTMLを書くことが望ましいわけです(レイアウトはスタイルシートで行います)。

StrictのHTMLの場合、ブロックレベルとインラインの区別は厳密で、body要素の直接の子要素としてインライン要素を使うことはできなくなっています。次に示すのは、strict.dtdにおけるbody要素の定義です。

<!ELEMENT BODY O O (%block;|SCRIPT)+ +(INS|DEL) -- document body -->

この定義が示すように、body要素の内容はブロックレベル要素、scriptもしくは挿入・削除を示すins, del要素タイプしか認められていません。従って、バナー画像などを直接bodyの子要素にした

(HTML4 Strictとしては正しくない例)
<body>
<img src="logo.png" alt="Kanzaki Inc." />

という書き方は誤りで、p要素などのブロックレベルの子要素として

(Strictでも正しい例)
<body>
<p><img src="logo.png" alt="Kanzaki Inc." /></p>

などの書き方をしなければなりません。厳しいんです。

ins要素とdel要素

上で示したbody要素タイプの定義でもins要素タイプとdel要素タイプの2つが特別扱いされていますが、これらはインラインでもブロックレベルでもどちらにもなり得るという特殊な要素です。要素自身の役割が、文書中のある部分を追加したり削除したりしたことを示すというものですから、その追加・削除した内容がインラインかブロックレベルかに応じて、ins, delは立場を変えるというわけです。