HTMLの「インライン」という幻想を捨てろ：フレージングコンテンツとネストの深淵
フロントエンド開発の現場で、ふとした瞬間に「これ、HTMLの仕様的に正しいんだっけ？」と手が止まること、ありますよね。特に、``タグの中にまた``を入れてしまったり、``の中に無造作にブロックレベル要素を突っ込んだりして、ブラウザのデベロッパーツールでDOMの壊れ方を見て青ざめる……というのは、誰もが通る道です。
今日は、かつての「インライン要素」という概念を捨て、「フレージングコンテンツ（Phrasing content）」という現代的な仕様の正体を暴いていきましょう。
1. なぜ「インライン要素」という呼び方を卒業すべきなのか
HTML4.01世代のエンジニアなら馴染み深い「インライン要素」と「ブロックレベル要素」という分類。しかし、HTML5以降、仕様書からその言葉は消え去りました。代わりに登場したのが「カテゴリー」という概念です。
中でも、今回フォーカスする「フレージングコンテンツ」は、テキストや、そのテキストを装飾・マークアップするための要素（``, ``, ``, ``, ``, `
重要なのは、「フレージングコンテンツは、他のフレージングコンテンツを内包できる」という原則です。しかし、そこには「これだけはやってはいけない」という残酷なルールがいくつか存在します。
2. ブラウザが裏側でやっている「DOMの修復」という名の悪夢
よくある間違いが、``タグの中にインタラクティブな要素（もう一つの``や`
もしあなたが：
というマークアップを書いた場合、ブラウザのパーサーはどう反応するか。実は、多くのモダンブラウザは「``が閉じられる前に次の``が来た」と判断し、勝手にDOMを強制終了させ、構造を歪めて再構築します。
結果として、DOMツリーは：
といった具合に分断されます。このとき、CSSのスタイル適用が期待通りにいかなかったり、クリックイベントが意図しない挙動を見せたりするのは、当然の帰結です。ブラウザは「間違ったHTMLを何とか動かそうとする」という慈悲深い設計ですが、それに甘えてはいけません。
3. 実践的ベストプラクティス：正しいネストとセマンティクス
では、現場でどう書くのが正解か。特に``や`
【重要】 HTML5の仕様を正しく理解する
<a>タグの入れ子は絶対禁止。
アクセシビリティの観点からも、構造はフラットかつ論理的に。
ここがポイント：
- ``の中身: ``や``はフレージングコンテンツなのでOKです。しかし、`
`や`
`を入れようとしてはいけません。
- ` 単なるテキストではなく、`datetime`属性を付与することで、ブラウザやクローラーに「これは日時情報である」と明示します。これがSEOとアクセシビリティの第一歩です。
- `
`の役割:技術ブログなどでコードの一部を表示する際、単にスタイルを当てるだけでなく、役割を明示するセマンティクスとして``を使いましょう。4. 現場のシニアとしてのアドバイス
「とりあえず動くからいいや」という妥協は、後々CSSのセレクタが効かない、JavaScriptで特定のDOMが取得できないといった、デバッグが極めて困難なバグを誘発します。
HTMLを書くことは、ブラウザという強力なレンダリングエンジンに対して「この構造を正しく解釈せよ」と指示を送るプログラミング行為です。「入れ子にしていいのは、それ自体がフレージングコンテンツであり、かつ仕様で禁止されていないものだけ」。この原則さえ守れば、あなたのマークアップは劇的に堅牢になります。
次は、ぜひご自身のプロジェクトで、ブラウザの「DOM修復機能」に頼らず、美しいツリー構造を構築してみてください。コードは嘘をつきませんし、正しいセマンティクスは、必ずあなたのフロントエンド開発を楽にしてくれるはずです。
コメント