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

HTMLやXHTMLでは要素を使って文書を組み立てますが、使用される要素は大きく分けると「ブロックレベル要素」「インライン要素」「その他の要素」に分けることができます。

まず要素の違いについて簡単に確認しておきます。

ブロックレベル要素

ブロックレベルに含まれる要素は、文書の中で文字通りブロックを作る為の要素です。例えば段落を表すp要素やテーブルを表すtable要素などがブロックレベル要素です。

通常ブロックレベルの要素には別のブロックレベル要素やインライン要素、テキストなどを含むことができます。ただしどの要素を含むことができるのかは要素毎に異なります。

多くのブラウザではブロックレベル要素が記述された場合、表示する際には前後に改行を行って表示します。

p要素を例に実際に確認してみます。

<p>
今日はハイキングに出かけました。目的地は
電車で2時間程度の高原です。
</p>

<p>
朝9時ごろに駅前に待ち合わせを行い出発で
す。平日ということもあり電車は空いていま
した。
</p>

ブラウザで表示してみると次のようになります。

このようにブロックレベル要素が使われると要素の前後に改行が行われて表示されます。

インライン要素

インライン要素は主にブロックレベル要素の中で使われる要素です。文章の中でリンクを設定するa要素や強調を表すem要素やstrong要素などがインライン要素です。主にブロックレベル要素の中で何らかの特徴や役割を与えるために使われる要素で。その為、インライン要素の前後で改行されることはありません。

インラインの要素にはブロックレベル要素を含むことは出来ません。テキストや他のインライン要素などを含むことができますがどの要素を含むことができるのかは要素毎に異なります。

strong要素を例に実際に確認してみます。

<p>
今日は<strong>ハイキング</strong>に出かけました。目的地は
電車で2時間程度の高原です。
</p>

<p>
朝9時ごろに駅前に待ち合わせを行い出発で
す。平日ということもあり電車は空いていま
した。
</p>

ブラウザで表示してみると次のようになります。

strong要素でマークアップされたテキストが強調表示されています。このようにインライン要素が現れた場合でも改行などは通常行われません。

その他の要素

ブロック要素にもインライン要素にも含めないものがその他の要素です。役割的にはどちらかの要素に近いものであっても使われる場所などが特別なものなどが含まれます。例えばHTML文書の基本構造であるhtml要素やbody要素などや、table要素の中でのみ使われるtr要素やtd要素などがその他の要素に該当します。

では次のページからブロック要素やインライン要素に含まれる要素の種類を確認していきます。