2009年5月8日金曜日

タグの中にはやなどのブロック要素は入れられない


<p class="hoge">
<dl>
<dt>aiueo</dt>
<dd>kakikukeko</dd>
</dl>
</p>

こういうのHTML構造で、CSS側は
.hoge dt {
font-size:14px;
}

という具合にしたのですが、どうしてもdtにスタイルの指定が効きません。
firebugで見てみたら、

<p class="hoge"></p>
<dl>
<dt>aiueo</dt>
<dd>kakikukeko</dd>
</dl>

という具合で、<dl>以下が<p>の外に出ていました。
これはおかしいぞ、と思い調べてみたら「<p>~</p>の間にはインライン要素しか含めることができない」ということが分かりました。
http://www.tohoho-web.com/html/p.htm

http://www.tohoho-web.com/html/memo/elem.htm
<address> や <blockquote> のように、ブラウザ表示時に前後に改行がはいるものがブロック要素、<big> や <strong> のように、前後に改行がはいらないものがインライン要素と覚えておくと覚え易いでしょう。

とのこと。確かに覚えやすいです。

長いことhtmlを書いてますが、こういうルールがあったとは初めて知りました。

自分もまだまだですね。

1 件のコメント: