HTML を“なんとなく”書いていると、知らないうちに 「絶対に親子にしてはいけない関係」 を作ってしまうことがあります。
代表例は、<table> 直下に <div> を置くパターン。今回は 「入れ子にできないタグ」の代表例と、なぜダメなのか／どう直すべきか をまとめました。
そもそも何が起きるのか？
| 症状 | 内容 |
|---|---|
| レンダリングずれ | ブラウザが強制的にタグを閉じたり自動補完するため、意図しない位置に要素が移動する。 |
| アクセシビリティ低下 | スクリーンリーダーが正しいツリーを前提に読み上げるため、意味が崩れると情報が飛ぶ。 |
| CSS／JS バグ | セレクタが想定の DOM 構造を前提にしていると、スタイル・スクリプトが効かない。 |
| SEO への影響 | クローラも DOM を解析する。構造が壊れると重要な情報が抜け落ちる可能性。 |
| バリデータ警告・エラー | W3C Markup Validation Service 等でエラーが出て公開前の自動チェックでエラーになることも。 |
代表的な「親子禁止」リストと理由
| 親タグ | 許可される 直接 子要素 | NG 例 | ダメな理由 |
|---|---|---|---|
table | caption, colgroup, thead, tbody, tfoot, tr | <div>, <p> | 仕様外。ブラウザは勝手に <tbody> を挿入→要素を外側へ追い出す。 |
tr | th, td, template | <div>, テキストノード | セルとみなされず、行が崩れる。 |
ul / ol | li, script, template | <div>, <p> | リストマーカーが付かない／自動的に要素を囲むため意図しないマークアップに。 |
select | option, optgroup, script, template | <div> | 一部ブラウザで完全に無視→選択肢が表示されない。 |
dl | dt, dd, script, template | <p>, <div> | 定義リストが壊れ、正しく対を認識できない。 |
p | Phrasing content（インライン系） | <div>, h1 などブロック要素 | ブラウザが自動で <p> を閉じ、予期せぬタグ分割が発生。 |
a | フローコンテンツ（ただし別の a や button は不可） | <a> ネスト | インタラクティブ要素の重複禁止。リンクが分割され挙動があいまいに。 |
button | フレージング（a, button, input, select, textarea などインタラクティブ要素は不可） | <button> ネスト | フォーム API が混乱し、スクリーンリーダーで誤認識。 |
label | フレージング（label は不可） | <label> ネスト | 対象フォーム要素が特定できず、クリックでフォーカスが移動しない。 |
空 (void) 要素img, br, hr, input, meta… | 子要素を持てない | 子タグを追加 | 完全に無視されるか、ブラウザが自動的に切り離す。 |
💡 ポイント
「許可される 直接 子要素」 を覚えると安全。ネスト可否は 孫世代 ではなく 親子関係が対象 になるため、<ul><li><div> のように一段挟めば OK になる場合もあります。
正しいマークアップ例
NG 例（テーブルに 直書き）
<table class="price">
<div class="attention">※価格は税込</div>
<tr><th>商品</th><td>1,000円</td></tr>
</table>
OK 例（キャプションまたは外側へ移動）
<table class="price">
<caption class="attention">※価格は税込</caption>
<tr><th>商品</th><td>1,000円</td></tr>
</table>
もしくは
<div class="attention">※価格は税込</div>
<table class="price">
<tr><th>商品</th><td>1,000円</td></tr>
</table>
なぜ“仕様準拠”が大切なのか
- 長期保守コストの削減
適切な DOM 構造は CSS リファクタリングや JS 置き換え時のバグを激減させます。
- アクセシビリティ & 法規制対応
日本でも JIS X 8341-3（WCAG 準拠）への配慮が求められるケースが増加。
- SEO
検索エンジンは「文書の意味」を解析して順位を決めます。だから文書構造化が大切
- 将来のフロントエンド刷新に強い
React／Vue などへ置き換える際、HTML が正しいとマイグレーションが楽。
事故を防ぐチェックリスト
タイミング 施策 コーディング中 エディタ拡張（VS Code HTML Hint, Emmet lint 等）でリアルタイム警告を出す。 CI/CD GitHub Actions で html-validate や nuxt build --fail-on-warnings などを実行。 リリース前 Lighthouse／axe DevTools でアクセシビリティ監査。 運用 定期的に W3C バリデータにかけ、ブログ担当者全員で結果を共有。
まとめ
HTML は「文書の構造」を表す言語。構造が壊れると、見えないところで UX と信頼を下げます。
- 「直接子要素ルール」を把握
- ツールで自動検出
- エラーは 放置せず すぐ修正
これだけで、保守性・アクセシビリティ・SEO の三拍子がそろったサイト運営になります。
次に記事を公開する前に一度バリデータを走らせてみてください。誤った入れ子がゼロになれば、エンジニアチームからも「わかってるね！」と喝采が上がるはずです
AI活用をもっと学びたい方へ
「AIって便利そうだけど、使いこなせるか不安…」
「他の業務にもAIを活用してみたいけど、何から始めればいいかわからない」
そんな方のために、
あなたの業務やスキルレベルに合わせた【無料の個別相談】を実施しています。
あなたの作業に合ったAIツールの選定、ChatGPTやGeminiの具体的な使い方サポート、業務効率アップのためのプロンプトテンプレート提供
まずは気軽にご相談ください！
<table class="price">
<div class="attention">※価格は税込</div>
<tr><th>商品</th><td>1,000円</td></tr>
</table>
OK 例（キャプションまたは外側へ移動）
<table class="price">
<caption class="attention">※価格は税込</caption>
<tr><th>商品</th><td>1,000円</td></tr>
</table>
もしくは
<div class="attention">※価格は税込</div>
<table class="price">
<tr><th>商品</th><td>1,000円</td></tr>
</table>
なぜ“仕様準拠”が大切なのか
- 長期保守コストの削減
適切な DOM 構造は CSS リファクタリングや JS 置き換え時のバグを激減させます。 - アクセシビリティ & 法規制対応
日本でも JIS X 8341-3（WCAG 準拠）への配慮が求められるケースが増加。 - SEO
検索エンジンは「文書の意味」を解析して順位を決めます。だから文書構造化が大切 - 将来のフロントエンド刷新に強い
React／Vue などへ置き換える際、HTML が正しいとマイグレーションが楽。
事故を防ぐチェックリスト
| タイミング | 施策 |
|---|---|
| コーディング中 | エディタ拡張（VS Code HTML Hint, Emmet lint 等）でリアルタイム警告を出す。 |
| CI/CD | GitHub Actions で html-validate や nuxt build --fail-on-warnings などを実行。 |
| リリース前 | Lighthouse／axe DevTools でアクセシビリティ監査。 |
| 運用 | 定期的に W3C バリデータにかけ、ブログ担当者全員で結果を共有。 |
まとめ
HTML は「文書の構造」を表す言語。構造が壊れると、見えないところで UX と信頼を下げます。
- 「直接子要素ルール」を把握
- ツールで自動検出
- エラーは 放置せず すぐ修正
これだけで、保守性・アクセシビリティ・SEO の三拍子がそろったサイト運営になります。
次に記事を公開する前に一度バリデータを走らせてみてください。誤った入れ子がゼロになれば、エンジニアチームからも「わかってるね！」と喝采が上がるはずです
AI活用をもっと学びたい方へ
「AIって便利そうだけど、使いこなせるか不安…」 「他の業務にもAIを活用してみたいけど、何から始めればいいかわからない」 そんな方のために、 あなたの業務やスキルレベルに合わせた【無料の個別相談】を実施しています。
あなたの作業に合ったAIツールの選定、ChatGPTやGeminiの具体的な使い方サポート、業務効率アップのためのプロンプトテンプレート提供
まずは気軽にご相談ください！