TopHTML(X)HTML > 2005年7月
2005年7月28日

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

July 28,2005 11:58 PM
Tag:[, ]
Permalink

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

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 プロパティでブロックレベル要素として表示することも可能です

Comments [0] | Trackbacks [0]
Now loading...
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

AMN
Categories
Monthly Archives
2020年
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3