なぜ` `の中に` `を入れてはいけないのか？―DOMの「暗黙の修正」という名の爆弾
フロントエンド開発の現場で、ふとコードレビューをしていると時折見かける光景があります。`
`タグの中に、つい安易に`
- `を突っ込んでしまうミスです。「ブラウザで確認したら見た目はなんとなく崩れていないから大丈夫」――そう思っていませんか？
- 許可されるもの: ``, ``, ``, ``, `
`, `
`, `` など。 - 禁止されているもの: `
`, ` `, `- `, `
- `, `
`, `
` など。 これらは「フロー・コンテンツ」と呼ばれ、ブロックレベルとしての性格が強い要素です。これらを`p`タグの中に詰め込むと、HTMLの構造上のルール違反となります。
---
ブラウザの「お節介」が引き起こす隠れたバグ
ここで、「ルール違反だけど、ブラウザは表示してくれるよ」という声が聞こえてきそうです。確かに、Google Chromeなどのモダンブラウザは、HTMLが多少壊れていても、「パースエラーを補完する（Error Handling）」という処理を裏側で行います。
例えば、`
テキスト`と書くと、ブラウザのパーサーは裏側で以下のようなDOMツリーに「強制的に」組み替えます。
1. `
`を閉じる（`
`を自動挿入）
2. ``を配置する
3. 残ったテキストを別の``で囲うか、独立させる
つまり、開発者が意図した「`
`という箱の中に`
`がある」状態ではなく、「勝手にタグが分割され、予期せぬDOM構造が生成されている」のです。これがなぜヤバいのか。以下の二点が現場でのトラブルの種になります。
1. CSSのセレクタが効かない: `p > div` というCSSを書いても、ブラウザがDOMを書き換えた後では、その親子関係は成立していません。
2. JavaScriptのDOM操作が狂う: `parentElement` で親要素を取得した際、意図せぬ階層構造になっており、スクリプトがエラーを吐く。あるいは予期せぬノードが大量生成されていてレイアウトが崩れる。---
実践：正しい「フレージング・コンテンツ」の扱い方
では、どう書くのがベストプラクティスなのか。CSSでデザインを整える前提であれば、`
`にはテキストのみを配置し、ブロックが必要な場合は要素を分離するのが鉄則です。
以下に、現場ですぐに使える「正しく美しいマークアップ」のサンプルを置いておきます。
---
まとめ：プロフェッショナルなマークアップを目指して
HTMLは、ただの「見た目を作るための指示書」ではありません。「ドキュメントの構造を意味付けるための論理的な設計図」です。
ブラウザの「お節介な修正機能」に依存したコーディングは、一見楽に見えますが、それは技術的負債を先送りしているに過ぎません。中級レベルからさらに上へ行くためには、「なぜそのタグを使うのか」「ブラウザはこのコードをどう解釈するのか」を常に自問自答すること。
もし、どうしてもデザインの都合で「段落の中にブロックを入れたい」という強い要求がある場合は、そのデザイン自体を見直すか、`display: inline-block` や `display: contents` など、CSSの現代的な手法で解決できないか検討してみてください。
「動くコード」ではなく「正しいコード」を書くこと。それが、チームから信頼されるエンジニアへの最短ルートです。
タイトルとURLをコピーしました
- `, `
- `, `
実務レベルでコードを書くなら、私たちは「ブラウザが表示してくれるからOK」という受動的な態度を卒業しなければなりません。今日は、HTMLの仕様レベルで厳密に定められている「`
`要素内のネスト制限」について、なぜそれが重要なのか、そしてブラウザが裏側で何をやらかしているのかを深掘りします。
—
` `要素は「フレージング・コンテンツ」の器である
HTMLの仕様（HTML Living Standard）において、`
`要素の中には「フレージング・コンテンツ（Phrasing content）」しか配置できないというルールがあります。
ざっくりと言えば、「テキストや、そのテキストを装飾・強調するためのインライン要素」しか入れられないということです。
コメント