見出しタグの「禁忌」を知る：h1-h6のコンテンツモデルと現場のリアル

「見出しタグの中にリンクを置くのはアリか？」

フロントエンドを数年やっていると、一度は頭を抱える問題ですよね。SEOを意識して見出し全体をリンクで囲いたいとき、ふと「これ、仕様的に大丈夫だっけ？」と手が止まる。

公式のMDNを読めば「フレージングコンテンツのみ」という無機質な記述がありますが、現場の実務では「で、結局どう書くのが一番安全で、かつアクセシブルなのか？」という判断が求められます。今回は、h1-h6タグのコンテンツモデルという、一見地味ですがWebの構造を左右する重要なルールについて、プロの視点で深掘りしていきます。

—

見出しタグの「コンテンツモデル」という境界線

HTMLの仕様において、`h1`から`h6`までの見出し要素は「フレージングコンテンツ（Phrasing Content）」を子要素に持つことができます。

これは言い換えると、「テキストや、リンク（a）、強調（em, strong）、画像（img）、spanなど、インラインレベルで流れる要素」しか置いてはいけない、ということです。

逆に言えば、以下の要素は「絶対NG」です。

• セクショニングコンテンツ（divやsectionなど、構造を作る要素）
• 見出し自体を内包する（h1の中にh2を入れるなど）
• ブロックレベルの要素（pやul, tableなど）

これを破るとどうなるか？ ブラウザのレンダリングエンジンは「おっと、これは仕様違反だな」と判断し、DOMツリーを無理やり補完しようとします。その結果、意図しないレイアウト崩れや、スクリーンリーダーが構造を正しく解釈できないという、致命的なアクセシビリティの欠落を招くことになります。

—

なぜ「hタグの中にブロック要素」がダメなのか

たまに`

タイトル

`のようなコードを見かけますが、これはブラウザが解釈する際にDOM構造を「切断」してしまうリスクがあります。

ブラウザのパーサーは、不正なネストを検知すると、見出しを閉じてからdivを配置し、その後ろに空の見出しを置くといった「自動修正」を試みることがあります。これが原因で、CSSのセレクタが効かなかったり、特定のブラウザだけで見た目がズレるという「再現性の低いバグ」を生む温床になります。

「見出しはあくまでテキストの入れ物。構造は外側に任せる」

これが、大規模サイトを堅牢に保つための鉄則です。

—

実践：現場で使える「綺麗なコード」の書き方

では、見出しにリンクを貼りたい場合や、装飾を加えたい場合はどうすればいいのか。実務でそのまま使える、アクセシブルかつクリーンな実装例を紹介します。

革新的なフロントエンド開発の未来

タイトル

🚀 最新の技術トレンド

プロからの補足：CSSでの制御

見出しのリンクを全体に広げたい場合、`a`タグに `display: block;` を当てて見出しの範囲を埋めるのが一般的ですが、その際は親要素である`h1-h6`に余計なpaddingをつけすぎないよう注意してください。クリック判定範囲が広がりすぎて、意図しない挙動になることがあります。

—

まとめ：仕様を守ることは、未来の自分を守ること

見出しタグのコンテンツモデルを意識することは、単なる「仕様の暗記」ではありません。

• HTMLの構造が正しくなる ＝ スクリーンリーダーが正確に情報を伝えてくれる（アクセシビリティ向上）
• DOMがクリーンになる ＝ ブラウザのレンダリングが安定し、謎のバグが減る（保守性向上）
• セマンティクスが担保される ＝ SEO上の評価も適正に行われる

「動けばいい」というコードは、チームの技術的負債になります。今回解説したような基本中の基本こそ、徹底して守る。それが、中級から一歩上の「シニアエンジニア」へ成長するための分かれ道です。

次にコーディングする際は、ぜひ「このタグの中に何を置くか？」という意識を、少しだけ研ぎ澄ませてみてください。その小さな積み重ねが、半年後のあなた自身を助けることになります。