小粋空間  -  a cheap joke and a play on words site

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

ウェブスタンダードなエントリーを書くための基礎知識です。タイトルについて、他に詳しく書かれたサイトが色々ありますが、当サイトでもまとめて記しておきたいと思います。

HTML要素の構造

HTML文書は一つのhtml要素からなります。さらに html要素は head 要素と body 要素からなります。そして、body 要素の中で使える要素（タグ）は大きく「ブロックレベル要素」と「インライン要素」の二つに分類することができます。

ブロックレベル要素

「ブロックレベル要素」とは、見出し（h1?h6）・段落（p）・リスト（ul/ol ）・テーブル（table）など、文書の基本的な構造を示すものです。その名の通り「ブロック（矩形）」として、要素の前後に改行を伴った表示がされます。
ブロックレベル要素の主なタグは次の通りです。

p / h1?h6 / ul / ol / dir / pre / dl / div / noscript / blockquote / form / hr / table /fieldset / adress

インライン要素

「インライン要素」は強調文字（strong）・リンク（a）といったテキストに装飾をしたり機能をもたせる、あるいは改行（br）のようにテキスト内のある部分に対して何らかの意味づけをしたりする機能を持たせるものです。インライン要素の前後には改行は含まれません。*1
インライン要素の主なタグは次の通りです。

i / b / u / s / em / strong / code / a / img / object / font / br / span / iframe / input / select / textarea / label / button / layer

なお単なるテキストもインライン要素に含まれます。

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

ブロックレベル要素とインライン要素を記述するにあたって、次のような関係（制約）があります。エントリーの記述にあたって気をつけなければならないものを挙げておきます。

• ブロックレベル要素の内容に、他のブロック要素やインライン要素を含むことができます（例外あり）
• インライン要素の中にブロックレベル要素を含むことはできません
• p 要素はブロックレベル要素ですが、子要素としてインライン要素しかもつことができません
• div 要素・blockquote 要素は子要素としてブロックレベル要素しかもつことができません

その他

• ul / ol / dl / hr / table の各要素の内容モデルは決まっています（例えば ul は li ）
• HTML4.0/XHTML1.0 Strict の場合、body要素の直接の子要素としてインライン要素を記述することはできません（Transitional はOK）
• li / dt / dd / td / tr 等は「内容モデル（ある要素の子要素になることができる要素）」として扱われるだけで、どちらの要素にも該当しません *誤解がありましたらご指摘ください

主な参考サイトは下記です。ありがとうございました。

• NEXTindex：HTML 文書とはなんだろうか
• The Web KANZAKI：ブロックレベル要素とインライン要素
• ぴよぴよ実験室：HTMLメモ（for 自分）
• とほほのWWW入門：HTMLのタグと要素

以上です。この続編として、Movable Type でウェブスタンダードなエントリーを書くためのカスタマイズ方法について記していきたいと思います。

*1：CSSの display プロパティでブロックレベル要素として表示することも可能です