どっちのブロックレベルSHOW?!

| コメント(2)

正しくCSSを使う前に、正しいXHTMLを覚える方が先だよね!ってことで、個人的にブロックレベル要素に含めていいものを整理したかったんで、一覧表にしてみました。

ブロックレベル要素と含むことの出来る要素
ブロックレベル要素 含むことの出来る要素
インライン要素、テキスト
p インライン要素、テキスト
address インライン要素、テキスト
blockquote blockquote以外のブロック要素(pなど)、script
pre インラインレベル、テキスト
ul li
ol li
dl dt、dd
table caption、col、colgroup、thead、tfoot、tbody、tr
div ブロックレベル要素、インライン要素、テキスト
hr なし
form form以外のブロックレベル要素、script
fieldset ブロックレベル要素、インライン要素、テキスト、legend
noscript ブロックレベル要素(文章型strict以外ではインライン要素、テキストも可)
noframe body(文章型framesetのみ)、ブロックレベル要素、インライン要素、テキスト

ここでひとつの問題が発生!ブロックレベル要素なの?インライン要素なの?みたいな要素が出てきました。

  1. 「dt」「dd」「li」といったリストの子要素
  2. 「tr」「th」「td」「thead」「tfoot」「tbody」といったtableの子要素

これらはサイト・ブログによって見解がマチマチなんですよね。「ブロックレベル要素」と言い切っているところもあれば、「どちらでもない(その他)」といった意見。さらには「ブロックレベル要素とみなされる」といった玉虫色決着に至るまで見解はバラバラ。ちょっと各サイト・ブログの見解を(勝手に)まとめてみました。

dt、dd、li、tr、th、td、thead、tfoot、tbodyは「ブロックレベル要素」
WebDesignGroupさん HTML 4.0ブロックレベル要素
dt、dd、liは「ブロックレベル要素」
Web標準のためのCSSテクニック 中村享介(ロクナナ)さんプレゼン資料より
dt、dd、li、tr、th、tdは「ブロックレベル要素」
STOPN' LISTENさん 【HTMLタグ】これってなんの略?タグが何の略なのか調べてみた
dt、dd、li、tr、th、td、thead、tfoot、tbodyは「その他の要素」
bnoteさん HTML4.01 Strictリファレンス
駄的HTML改善計画さん ブロック要素とインライン要素の違い
猫式HTML研究室さん ブロック要素・インライン要素
dd、liは「ブロックレベル要素」dt、tr、th、td、thead、tfoot、tbodyは「その他の要素」
ストリクトなHTMLの基礎講座さん HTML概説リファレンス
dtは「インライン要素」dd、liは「ブロックレベル要素」
Web標準の教科書 益子貴寛さん著作

念のために書きますが、このようにまとめたのは各サイト・ブログのアラを探しているからではありません。アラを探すなら自分ののブログを探せば、きっとたくさん出てくると思いますし。ただ、調べていくうちに、見解が分かれていて「どっちなんだろう?」と疑問に思っただけですのでご理解いただければと思います。

これらの要素はブロックレベル要素?インライン要素?どっちでもない?さぁ~、DOTCH???

※「center」「dir」「menu」「isindex」はブロックレベル要素ですが、HTML4.01 Strictで非推奨になっているので今回一覧表からは省きました。

コメント(2)

tableタグの中でしか使えないのですから、tr、th、td、thead、tfoot、tbodyなどは『ブロック要素でもインライン要素でもどちらでもない』というのが仕様上,正しいのではないでしょうか?
すべてのタグが、どちらかに分類される必要はないのですから…

あ、bodyに背景色を指定したほうが見やすいですよ。
http://kikky.net/pc/bgcolor.html

プロフィール

林大輔 写真
林 大輔
旅を売るWebデザイナー / ジャム男子
楽天トラベルでWebデザイナーとして働いています。ごくたまに個人でもWebサイト作ってます。趣味ではジャムをつくる自称・ジャム男子。
著書「FireworksレッスンブックCS6対応」「ガレリアCSS

詳しいプロフィールを見る

最新のエントリー