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

`は自動的に閉じられます。結果として、ブラウザは以下のように認識を強制変換します。

この自動修正の結果、CSSのセレクタが効かなかったり、予期せぬ余白が生まれたりします。ブラウザの「気を利かせた修正」に依存したコードを書くのは、砂の上に城を建てるようなものです。

実務で使えるベストプラクティス：正しいマークアップ

では、段落の中にリストやブロック要素を配置したい場合はどうすればいいのでしょうか。答えは簡単です。`

`の使用を諦め、適切なコンテナで囲むか、CSSでレイアウトを制御することです。

以下に、現場でそのまま使える、セマンティックで堅牢なコード例を提示します。

以下のリストが重要なポイントです。

• ポイント1
• ポイント2

まとめ：HTMLは「設計図」である

プロフェッショナルなフロントエンドエンジニアは、動くコードではなく「壊れないコード」を書きます。

HTMLの構造を正しく保つことは、ブラウザのパース負荷を減らすだけでなく、スクリーンリーダーなどのアクセシビリティツールに対しても正しい情報を伝達するための最低限の礼儀です。

「`

`の中に何かを入れたくなったら、一度立ち止まる」。

この小さな習慣が、あなたのコードを、そしてあなたのエンジニアとしての信頼を確実に底上げします。明日からのコーディングで、ぜひ意識してみてください。現場からは以上です！