本当にいまさらなネタですが、最近になって TABLE タグで組まれた HTML などを見る機会が多かったので、自分への復習の意味も含めてまとめてみました。
正しいか自信がないので、間違っていたら突っ込み入れてもらえると今後のためにも助かります。
まずはブロックレベル要素とインラインレベル要素を分けてみます。
ブロックレベル要素
address blockquote, center, div, dl, fieldset, form, h1, h2, h3, h4, h5, h6, hr, noframes, noscript, ol, p, pre, table, ul
インラインレベル要素
a, abbr, acronym, b, basefont, bdo, big, br, cite, code, dfn, em, font, i, img, input, kbd, label, q, s, samp, select, small, span, strike, strong, sub, sup, textarea, tt, u, var
次に主要なブロックレベル要素への入れ子についてまとめておきます。
div
基本的に何を入れても大丈夫なので、div の中に div と言うのもアリ。
h1, h2, h3, h4, h5, h6
インラインレベル要素のみ利用可能。
そのため、h3 の中に div とかはマナー違反。
p
インラインレベル要素のみ利用可能。
そのため、p の中に div とかはマナー違反。
li
基本的に何を入れても大丈夫なので、li の中にさらに ul → li と言うのもアリ。
dt
インラインレベル要素のみ利用可能。
dd
基本的に何を入れても大丈夫。
blockquote
ブロックレベル要素のみ利用可能。
上記のようなルールはありますが、基本的にはブロックレベル要素の中には、ブロックレベル要素やインライン要素を配置することができ、インライン要素の中には、文字データや他のインライン要素を配置することができます。
このルールを守りながら組むことで構造的にもきれいな HTML を書くことが出来ます。
普段利用することの多いタグをメインにまとめてみましたが、他のタグについても正確に把握したいところです！