【実務・中級編】li要素内のコンテンツモデル – HTML実践ガイド

` `の中に何を詰め込む？フロントエンド中級者がハマる「コンテンツモデル」の正解

現場でコードレビューをしていると、未だに「`

  • `の中にブロック要素を入れていいのか？」という質問を耳にします。結論から言えば、HTML5以降、`
  • `の中身は「フローコンテンツ」そのもの。つまり、段落（`

    `）だろうが、見出し（`

    `）だろうが、あるいは別のリスト（` `）だろうが、自由自在に詰め込めるのが今の標準です。 しかし、仕様上「できる」ことと、メンテナンス性の高い「美しいコードを書く」ことは別物。今日は、現場で後輩に伝えている「リストの作法」について、少し深掘りして解説します。 — ブラウザはどう解釈しているのか？

    ブラウザの内部処理において、`

  • `は「リストアイテム」という特別な役割を持っていますが、DOMツリー上では非常に寛容なコンテナです。

    かつてXHTMLの時代には、「インライン要素しか入れちゃダメ」という厳しい制約がありましたが、HTML5の登場でこの制約は取り払われました。ブラウザは`

  • `を見つけると、その中の子要素をそのままレンダリングツリーへ流し込みます。

    ただし、「構造の正しさ」を担保するのはブラウザではなく、我々開発者の責務です。例えば、`

  • `の中に`
    `を入れ子にするのは文法上はOKですが、CSS設計が複雑になりがちで、アクセシビリティの観点からも「なぜその構造にしたのか？」を自問自答する必要があります。

    —

    実践：メンテナンス性の高いリスト構造

    現場で私が推奨しているのは、「`

  • `の中は、意味の塊である『セクション』として扱う」という考え方です。単なるテキストの羅列ではなく、カードUIのように見出しと説明文をセットにするケースを想定したサンプルコードを見てみましょう。

    • 高速なレンダリング

      仮想DOMの最適化により、初期表示のパフォーマンスを最大化。ユーザーの離脱を防ぎます。

      詳細を見る

    • 強力な型安全性

      TypeScriptを採用し、開発中からバグを検知。保守コストを劇的に削減します。

      詳細を見る

    このコードが「プロ仕様」である理由

    1. 意味論的（セマンティック）な構造: `

  • `の中に`

    `を配置することで、文書のアウトラインが正しく生成されます。スクリーンリーダーを使用しているユーザーにも、リストの構造が正しく伝わります。 2. CSSの適用が容易: ` `をフレックスコンテナ（`display: flex;`）にするだけで、中の要素の配置を簡単に制御できます。 3. 拡張性: 将来的にアイコン画像や日付タグを追加したくなっても、` `の中に要素を追加するだけで済むため、HTMLの構造を大きく壊す必要がありません。 — 避けるべき「アンチパターン」

    逆に、現場で見ていて「これは修正した方がいいな」と思うのが、`

  • `を単なるレイアウトのための箱として使いすぎているケースです。