ul 要素の直下に ul は入れない、p 要素に ul は入れない

たまに見かけるので ul 要素の扱いについてありがちな誤りを実例付きで紹介します。 W3C などでも改善例が示されていますから、その程度には誤って使う人が多いのでしょう。

ul 要素の直下に ul 要素は入れない

時折見かけますが、ul 要素を ul 要素の直下に入れることはできません。 ul 要素は1つ以上の li 要素を含み li 要素のみを入れることができます。したがって次の構造は誤りです。

<ul>
    <ul>
    <li> Text </li>
    </ul>
</ul>

正しくは次のようになります。

<ul>
<li>
    <ul>
    <li> Text </li>
    </ul>
</li>
</ul>

p 要素の直下に ul 要素を入れることはできません。したがって次の構造は誤りです。

<p>
For example,
<ul>
<li>List1</li>
<li>List2</li>
</ul>
like this.
</p>

W3C は次のような改善例を示しています。

<p>For example,</p>
<ul>
<li>List1</li>
<li>List2</li>
</ul>
<p>like this.</p>

この構造は誤りではありません。しかしながらこのような例では、2 つの p 要素を 1 つの段落として扱いたいと思うでしょう。これについても、W3C は改善例を示しています。

<div>For example,
<ul>
<li>List1</li>
<li>List2</li>
</ul>
like this.
</div>

残念ながら段落、つまり p 要素としては 1 つにまとめることができません。また次のように div 要素を p 要素に入れることもできません。

p 要素のコンテンツモデルはフレージングコンテンツです。 div 要素はフローコンテンツですから、p 要素の直下に、div 要素を含めることはできません。

<p>
<div>For example,
<ul>
<li>List1</li>
<li>List2</li>
</ul>
like this.
</div>
</p>