正しいHTML構造（ネスト規則）

📝 問題の再掲

Q49: 正しいHTML構造はどれですか？

選択肢:

• A: <p><div>テキスト</div></p>
• B: <ul><li>項目</li></ul>（正答）
• C: <a><a>リンク</a></a>
• D: <tr><table><td>データ</td></table></tr>

⚠️ よくある間違い

HTMLはエラーが出ずにブラウザが表示してくれるため、間違った構造でも「動いている」と思いがちです。しかしブラウザが内部で自動修正しており、意図しない表示になることがあります。

📖 段階的な説明

ルール1：インライン要素の中にブロック要素は入れられない

<p> はインライン的な扱いで、中に <div>（ブロック要素）は入れられません。

<!-- ❌ p の中に div -->
<p><div>テキスト</div></p>

<!-- ✅ div の中に p -->
<div><p>テキスト</p></div>

ルール2：インタラクティブ要素の入れ子は不可

<a> の中に <a>、<button> の中に <button> は入れられません。

ルール3：テーブル構造には正しい順序がある

<table> → <tr> → <td> の順番を守る必要があります。

ルール4：ul/ol の直下は li のみ

<ul> の直下に置けるのは <li> だけです。

💻 コード例

<!-- ✅ 正しい構造 -->
<ul><li>項目</li></ul>
<table><tr><td>データ</td></tr></table>
<div><p>テキスト</p></div>

<!-- ❌ 間違った構造 -->
<p><div>テキスト</div></p>
<a href="#"><a href="#">リンク</a></a>
<tr><table><td>データ</td></table></tr>

🔗 関連知識

• 開発者ツールの Elements タブで、ブラウザが自動修正した結果を確認できます
• W3C Validator（validator.w3.org）でHTMLの正しさをチェックできます

✅ 確認問題

Q: 以下のうち正しいHTML構造はどれ？

A: <p><h2>見出し</h2></p> / B: <div><h2>見出し</h2><p>本文</p></div>