なぜその「pタグ」に「div」を入れるのか？HTMLの構造とブラウザの深層心理
フロントエンドの現場でコードレビューをしていると、時折見かけるのが「p要素の中にdiv要素やリスト要素が鎮座している」という光景です。
「いや、見た目はCSSでどうにでもなるし、ブラウザでもちゃんと表示されてるから問題ないでしょ？」
そう思うかもしれません。しかし、これは単なる好みの問題ではなく、HTMLという言語が持つ「文法」と、ブラウザという「優秀すぎる通訳」が裏で何をやっているかを理解していないことで起こる、少し危険な罠なのです。今日は、HTML5以降の仕様に立ち返り、なぜ`
`の中にブロック要素を入れてはいけないのか、そしてブラウザが裏でどんな「忖度」をしているのかを紐解いていきましょう。
1. 仕様が語る「包含関係」の正体
HTML5において、`
`要素は「フレージング・コンテンツ（Phrasing Content）」のみを子要素に持つことができます。
簡単に言えば、「文章の一部として扱えるもの（``, ``, ``, ``など）」だけが、`
`の中に居場所を与えられているのです。一方で、`
- `、`
`といった「フロー・コンテンツ（Flow Content）」は、文書構造を作るための大きな箱。これをわざわざ小さな`
`という箱の中に押し込もうとすること自体が、構造的な矛盾なのです。
2. ブラウザの「お節介」という名のDOM改変
ここで面白いのが、ブラウザの挙動です。もしあなたが誤って以下のようなHTMLを書いたとしましょう。
ここは段落のつもり。
ChromeやFirefoxの検証ツール（DevTools）を開いて、DOMツリーを見てみてください。あなたが書いたはずのコードとは違う構造になっているはずです。
ブラウザは「`
`の中にブロック要素は入っちゃいけない」という仕様を知っているため、勝手にHTMLを解釈し直します。具体的には、`
`は終了だな」と判断し、強制的に`
`を閉じ、その後に`
`を閉じるという「自動補完」を行います。
結果として、DOM上では以下のようになります。
ここは段落のつもり。
この「勝手な補完」が、CSSのセレクタ（`:last-child`などが意図せず効かなくなる等）や、JavaScriptでのDOM操作に予期せぬバグを生み出す原因になります。ブラウザを信じすぎると、後で痛い目を見るのは我々エンジニアです。
3. 実務で役立つ「正しい構造化」のサンプル
では、どう書くのがベストプラクティスなのか。基本は「大きな箱の中に小さなパーツを入れる」という原則を守ることです。
もし「段落の一部を強調したい」「特定のエリアでレイアウトを組みたい」という場合は、`
こちらは通常の段落テキストです。ここには文章を書き込みます。
このように、ブロック全体をdivで囲んでスタイルを当てるのが正解です。
最後に：エンジニアとしての「美学」
「動けばいい」という考え方は、個人のプロジェクトなら許されるかもしれません。しかし、チーム開発において、仕様に準拠したクリーンなHTMLを書くことは、「後からこのコードを読む同僚への最大の敬意」です。
ブラウザの自動補完に甘えず、自分自身でDOMの構造をコントロールする。この一手間が、結果としてメンテナンス性の高い、堅牢なアプリケーションを作るための最短ルートになります。
次回のコーディングでは、ぜひ「このタグは本当にこの親に入れられるのか？」と、一度立ち止まって考えてみてください。その小さな積み重ねが、あなたのフロントエンドエンジニアとしての価値を確実に高めてくれます。
コメント