タグで階層構造を理解する

HTMLの階層構造って何？

HTMLは、要素を入れ子にして階層構造を作ります。これは家族の関係に似ています¹。

• 親要素: 他の要素を包んでいる要素
• 子要素: 親要素の中にある要素
• 兄弟要素: 同じ親を持つ要素同士

a

HTMLの階層は、まるでマトリョーシカ！外側から内側へ（左から右へ）、どんどん小さくなっていくよ。

なぜ階層構造が重要？

階層構造を正しく理解すると:

• 整理された文書: 内容が論理的に整理される
• 読みやすいコード: 他の人が理解しやすい
• CSSが書きやすい: スタイルを効率的に適用できる
• 保守性向上: 後で修正がしやすい

親子関係と兄弟関係を見てみよう

実際の例で親子関係と兄弟関係を確認してみましょう:

a

実践: 階層構造を意識して書いてみよう

以下のコメントを参考に、HTMLの階層構造を作ってみてください:

a

解答例を見る

<main>
  <section>
  <h2>好きな本のジャンル</h2>
  <p>私は冒険小説が大好きです。</p>
  <p>特にファンタジー要素があるものに惹かれます。</p>
  </section>

  <section>
  <h2>最近読んだ本</h2>
  <p>『魔法の図書館』という本を読みました。</p>
  </section>
</main>

階層関係:

main (親)
├── section (子、mainの)
│   ├── h2 (子、sectionの)
│   ├── p (子、sectionの)
│   └── p (子、sectionの)
└── section (子、mainの)
  ├── h2 (子、sectionの)
  └── p (子、sectionの)

divとspanの使い分け

HTMLには「意味のないタグ」も存在します。これらはグループ化やスタイリングのために使います¹。

div要素（ブロック要素）

<div> は、複数の要素をグループ化するためのコンテナです。

a

実践: divでグループ化してみよう

以下のコメントを参考に、関連する内容をdivでグループ化してみてください:

a

解答例を見る

<div>
  <h2>朝の時間</h2>
  <p>朝食にトーストとコーヒーを飲みました。</p>
  <p>新聞を読みながらゆっくり過ごしました。</p>
</div>

<div>
  <h2>夜の時間</h2>
  <p>夕食後は読書をしました。</p>
  <p>お気に入りの音楽を聴きながらリラックスしました。</p>
</div>

div要素の役割:

• 関連するコンテンツをグループ化
• CSSでまとめてスタイルを適用する際に便利
• セマンティック要素で表現できない場合の汎用コンテナ

span要素（インライン要素）

<span> は、文章の一部分をグループ化するために使います。

a

実践: spanで文章の一部を強調してみよう

以下のコメントを参考に、span要素を使って文章の特定の部分をマークしてみてください:

a

解答例を見る

<p>今日は<span>駅前の新しいカフェ</span>に行きました。コーヒーの値段は<span>400円</span>で、とても美味しかったです。</p>

<p>店内は<span>木のぬくもり</span>を感じる内装で、<span>2時間</span>ほどゆっくり過ごしました。</p>

span要素のポイント:

• 文章の途中で改行されない（インライン要素）
• 見た目は変わらないが、後でCSSでスタイルを適用できる
• 文章の意味的な区切りというより、装飾のための区切り

ヒント: span要素で囲んだ部分は、後からCSSで色を変えたり、フォントを変更したりできます。重要な情報や数値などをマークするのに使いましょう。

セマンティック要素 vs div/span

適切なタグの選び方:

選択の基準:

• 意味がある場合 → セマンティック要素（header、main、article など）
• 意味がない場合 → div または span
• ブロック要素が必要 → div
• インライン要素が必要 → span

a

リスト要素で情報を整理する

情報をリスト形式で整理すると、読みやすく分かりやすくなります¹。

順序なしリスト（ul）

関連する項目を順序なく並べる場合に使います:

a

実践: 順序なしリストを作ってみよう

以下のコメントを参考に、あなたの好きなものや持ち物をリストにしてみてください:

a

解答例を見る

<h2>好きな本のジャンル</h2>
<ul>
  <li>ミステリー小説</li>
  <li>ファンタジー</li>
  <li>エッセイ</li>
</ul>

<h2>趣味</h2>
<ul>
  <li>読書</li>
  <li>散歩</li>
  <li>音楽鑑賞</li>
</ul>

順序なしリスト（ul）の特徴:

• 項目の順序に特別な意味がない
• 通常は黒い点（•）で表示される
• <ul> の直接の子要素は <li> のみ

順序ありリスト（ol）

手順や順序が重要な項目を並べる場合に使います:

a

実践: 順序ありリストを作ってみよう

以下のコメントを参考に、手順や順序が大切な内容をリストにしてみてください:

a

解答例を見る

<h2>朝のルーティン</h2>
<ol>
  <li>起床</li>
  <li>歯磨き・洗顔</li>
  <li>朝食</li>
  <li>準備</li>
</ol>

<h2>勉強の手順</h2>
<ol>
  <li>机を片付ける</li>
  <li>必要な教材を準備する</li>
  <li>計画を立てる</li>
  <li>実際に勉強する</li>
  <li>復習する</li>
</ol>

順序ありリスト（ol）の特徴:

• 項目の順序に意味がある（手順、ランキングなど）
• 自動的に番号が振られる（1, 2, 3…）
• <ol> の直接の子要素は <li> のみ

ヒント: 料理のレシピ、作業手順、時系列など、順番が重要な情報には <ol> を使いましょう。

リストの入れ子構造

リストの中にさらにリストを作ることもできます:

a

実践: 入れ子リストを作ってみよう

以下の図を参考に、階層のある情報を入れ子リストで整理してみてください:

なんか同じ図が 2 つ出ているんだけど、これはバグです。ごめんね。

a

解答例を見る

<ol>
  <li>午前中の学習
  <ul>
    <li>数学の復習</li>
    <li>英単語の暗記</li>
    <li>読書</li>
  </ul>
  </li>
  <li>午後の活動
  <ul>
    <li>散歩</li>
    <li>友達と会う</li>
    <li>趣味の時間</li>
  </ul>
  </li>
  <li>夜の時間
  <ul>
    <li>日記を書く</li>
    <li>明日の準備</li>
    <li>リラックス</li>
  </ul>
  </li>
</ol>

入れ子リストのポイント:

• 外側は順序ありリスト（<ol>）で時系列を表現
• 内側は順序なしリスト（<ul>）で関連項目をグループ化
• リストの中にリストを作ることで、情報の階層を表現できる

ヒント: 複雑な情報は図式化してから HTMLコードに落とし込むと分かりやすくなります。上の mermaid 図のような構造をHTMLで表現してみてください。

セマンティック要素を組み合わせて文書構造を作る

これまで学んだ要素を全て組み合わせて、完成度の高い文書構造を作ってみましょう:

a

ヒント

階層の深さに注意 — 階層が深くなりすぎると読みにくくなります。適度な深さを心がけましょう。一般的には3-4階層程度が読みやすいとされています。

構造を整理するためのチェックリスト

よい文書構造を作るためのポイント:

構造チェックリスト:

• ✅ 親子関係が論理的に正しい
• ✅ 兄弟要素は同じレベルの内容
• ✅ セマンティック要素を優先的に使用
• ✅ div/spanは意味がない場合のみ使用
• ✅ リストは適切なタイプ（ul/ol）を選択
• ✅ 階層が深くなりすぎない（3-4階層程度）

HTML要素の入れ子ルール MDNで詳しく学ぶ

チェックポイント！

• HTMLの親子関係と兄弟関係を理解した
• divとspanの適切な使い分けができる
• 順序なしリスト（ul）と順序ありリスト（ol）の使い分けを理解した
• リストの入れ子構造を作ることができる
• セマンティック要素を組み合わせて文書構造を作ることができる

Footnotes

1. HTMLの要素を表すタグ ↗ - esa#1040 ↩ ↩² ↩³