html - HTML の見出しとリストのレンダリング

Question

次のような XHTML コードがあります。

<h2><ul>
 <li>thing one</li>
 <li>thing two</li>
 <li>thing three</li>
</ul></h2>

検証はしませんが、私がテストしたすべてのブラウザーで問題なく動作します。次のようにレンダリングされます。

• 事1
• 事 2
• 事 3

これをこれに変更すると (これは有効です)、同じようにレンダリングされません:

<ul>
 <li><h2>thing one</h2></li>
 <li><h2>thing two</h2></li>
 <li><h2>thing three</h2></li>
</ul>

次のようにレンダリングされます。

• 事1

• 事 2

• 事 3

最初のスニペットと同じレンダリングを生成する有効な XHTML を作成するにはどうすればよいですか?

Answer 1

それは<h2>要素の目的ではありません。順序なしリストのスタイルを設定したい場合は、クラスを与えます:

<ul class="big">
   <li>thing one</li>
   <li>thing two</li>
   <li>thing three</li>
</ul>

次に、いくつかの CSS を追加します。

.big {
    font-weight: bold;
    font-size: 1.5em;
    display: block;
}

デモ: http://jsfiddle.net/jQ8Qj/

Answer 2

ブロックレベルの要素をインライン要素でネストするのは好きではありません。クラスを使用して、リスト項目のスタイルを設定します。

<ul class="myclass">
 <li>thing one</li>
 <li>thing two</li>
 <li>thing three</li>
</ul>