目次
📌 HTMLの入れ子構造（ネスト構造）とは？
HTML では、タグの中に別のタグを入れることができます。これを 「入れ子構造（ネスト）」 と呼びます。
正しい入れ子構造を作ることで、ページの意味や構造を明確にできます。
🔹 1. 入れ子構造の基本ルール
✅ ルール1：開始タグと終了タグを適切に配置
正しい例:
<p><strong>重要なテキスト</strong> です。</p>
✅ <p> の中に <strong> が正しく入れ子になっている。
間違った例:
<p><strong>重要なテキスト</p></strong>
❌ タグが正しく閉じられていない。
✅ ルール2：適切な階層構造を維持
HTML は 親要素・子要素の階層 を作ります。
例：<div> の中に要素を入れる
<div>
<h1>タイトル</h1>
<p>これは段落です。</p>
</div>
✅ <div> は「親要素」、<h1> と <p> はその「子要素」。
✅ ルール3：特定のタグは入れ子にできない
一部のタグは入れ子にできません。
❌ ブロック要素の中にインライン要素だけを入れるべき
<p><div>これはNGです。</div></p> <!-- p の中に div は不適切 -->
✅ 修正（適切なブロック要素を使う）
<div>
<p>この中に文章を入れるのが正しい。</p>
</div>
🔹 2. よくある入れ子構造の例
(1) 見出し + 段落
<section>
<h2>記事のタイトル</h2>
<p>ここに本文が入ります。</p>
</section>
(2) ナビゲーションメニュー
<nav>
<ul>
<li><a href="#">ホーム</a></li>
<li><a href="#">ブログ</a></li>
<li><a href="#">お問い合わせ</a></li>
</ul>
</nav>
✅ <nav> の中に <ul>（リスト）、その中に <li>（リスト項目）、さらに <a>（リンク）が入る。
(3) フォーム
<form action="submit.php" method="post">
<label for="name">名前：</label>
<input type="text" id="name" name="name">
<button type="submit">送信</button>
</form>
✅ <form> の中に <label>、<input>、<button> を適切に入れ子にする。
🔹 3. 正しい入れ子構造を作るポイント
✅ 開始タグと終了タグを必ずセットで書く
✅ 親要素と子要素の関係を意識する
✅ 適切なタグを使う（ブロック要素とインライン要素の区別）
HTML の入れ子構造を理解すれば、読みやすく、管理しやすいコード が書けるようになります！ 🚀
