<div> で「まとめる箱」を覚えました。でも <div> は意味を持たない箱でしたね。じつはページの大きなパーツ——上のヘッダー、メニュー、本文、下のフッター——には、それぞれ意味を持つ専用の箱があります。<div> の“意味つき版”だと思ってください。
ページは4つの部屋でできている
多くのページは、大きく見るとこの4つの部屋でできています。
| タグ | 役割（どの部屋か） |
|---|---|
<header> | ページの上。ロゴやサイト名を置く |
<nav> | メニュー。他のページへのリンクを並べる |
<main> | 本文。そのページの主役の中身 |
<footer> | ページの下。コピーライトや連絡先など |
組み立てると、こんな骨組みになります。
<body>
<header>
しまちゃん
<nav>
<a href="#about">じこしょうかい</a>
<a href="#likes">すきなもの</a>
<a href="#contact">れんらく</a>
</nav>
</header>
<main>
<h2>じこしょうかい</h2>
<p>おえかきとラーメンがすきなしまです。</p>
</main>
<footer>
<p>© 2026 しまちゃん</p>
</footer>
</body><div> で全部囲んでも、見た目はまったく同じです。でも役割の名前がついているぶん、この骨組みのほうがずっと読みやすいですよね。
もっと細かく区切るsectionとarticle
<main> の中身をさらに区切りたいときは、<section>（意味のあるひとかたまり）や <article>（それ単体で完結する記事）も使えます。
<main>
<section id="likes">
<h2>すきなもの</h2>
<ul>
<li>おえかき</li>
<li>ラーメン</li>
</ul>
</section>
</main>今は「本文の中も、意味のかたまりで区切れる」とだけ知っておけば十分です。
CSSFlexboxで横に並べるこの4つの部屋を「横に並べる」「真ん中に寄せる」——思いどおりに配置するのは、ずっと先のCSSのレイアウトのお仕事ですこのレッスンのまとめ
<header>・<nav>・<main>・<footer>はページを役割ごとに分ける“意味のある箱”<main>は1ページに1つ。本文の中は<section>でさらに区切れる- 見た目はdivと同じでも、検索エンジンや読み上げソフトにやさしい