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

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

Posted at July 28,2005 11:58 PM
Tag:[WebStandards, XHTML]

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

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 等は「内容モデル(ある要素の子要素になることができる要素)」として扱われるだけで、どちらの要素にも該当しません *誤解がありましたらご指摘ください

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

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

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

関連記事
zenback
人気エントリー
トラックバックURL


コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)