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

HTMLの要素の種類

HTMLの要素には、大きく分けてブロックレベル要素とインライン要素の2種類があります。

ブロックレベル要素

行を占有し、横に並ばない要素です。
div, h1〜h6, p, pre, ul, ol, dl, dt, dd, body など

インライン要素

同一行内で横に並ぶ要素です。途中で折り返す場合もあります。
span, strong, em, big, small, b, i, a, img など

div要素とspan要素

div要素とspan要素は、それぞれブロックレベル要素とインライン要素の無色透明な(注:比喩)要素です。 例えば、div要素は h1 のように字が大きくなったり太字になったりしません。 その要素がブロックレベル要素であることだけを主張します。 通常、div要素やspan要素は自分の定義したスタイルを持つ要素をつくりたいときに用います。

例

XML文書の場合

XML文書の場合、ブラウザはどの要素がブロックレベルなのかを知りません。 スタイルシートとして CSS を使う場合、何も指定しないとすべての要素はインライン要素となります。 ブロックレベル要素としたい場合には、次のようにdisplay属性を明示的に指定します。