ul、ol要素をネスト（入れ子）にするとき、やってはいけない書き方

今まで間違って書いていたんですが…

このようなネストされたリストを作るとき、

• 1つ目
• 2つ目
  • 2つ目(あ)
  • 2つ目(い)
• 3つ目

こう書いたら間違いなんですね。

<ul>
    <li>1つ目</li>
    <li>2つ目</li>
    <ul>  <!-- 外側の<ul>の直接の子要素になっている -->
        <li>2つ目(あ)</li>
        <li>2つ目(い)</li>
    </ul>
    <li>3つ目</li>
</ul>

（これでもなぜか通用してしまう。）

• 1つ目
• 2つ目
• 2つ目(あ)
• 2つ目(い)
• 3つ目

このように、本来はul要素の内容はli要素しか許可されていません。

developer.mozilla.org

許可された内容　　0 個以上の <li> 要素。※li 要素の子孫要素としてさらに <ol> 要素や <ul> 要素を配置することも可能

正しくはこうです。

<ul>
    <li>1つ目</li>
    <li>2つ目  <!-- <li>を閉じない -->
    <ul>
        <li>2つ目(あ)</li>
        <li>2つ目(い)</li>
    </ul>
    </li>  <!-- ここで閉じる -->
    <li>3つ目</li>
</ul>

<ul>もリストアイテムのうちということですね。

問題は、CSSにおいて、間違った書き方(ul ul)と正しい書き方(ul li ul)とでスタイルが揃わないことがあるということです。これはli要素にスタイルを適用している場合に生じます。この問題は両方を併記することで対処できました。

.entry-content ul ul,
.entry-content ol ol {
    /* 間違った書き方用のスタイル */
}
.entry-content ul li ul,
.entry-content ol li ol {
    /* 正しい書き方用のスタイル */
}

.entry-content ul li ul、.entry-content ol li olの方が詳細度（以下の記事参照）が高いため、間違った書き方用のスタイルを適切にキャンセルすれば両方の書き方に対応できるようになります。

yaritakunai.hatenablog.com

やっぱり本を読んで一通り勉強しないとダメですね。

いちばんよくわかるHTML5&CSS3デザインきちんと入門 (Design&IDEA)