HTML入門 - header・main・footer は見た目ではなく役割を分ける
見た目が同じでも、タグは役割の手掛かりになる
「見た目」「読み上げ」「検索エンジン」を切り替え、div と header・main・footer の違いを比べます。
- CSS 未指定のこの例では、3つのタグに置き替えても配置は同じ
- main を div に戻すと、header と footer は残るが、本文へ移る目印と主な内容を示す手掛かりが1つ減る
1 / 3
中身を消さず、3つの外箱へ移す
既存の中身を削らず3領域へ移し、旧「リンク」の h2 だけ外します。
<header><h1>山田 太郎</h1><p>Web エンジニアを目指しています</p></header>
<header>名前と肩書き<main><!-- 自己紹介・趣味・経歴を移す --></main>
<main>自己紹介・趣味・経歴<footer>
<footer>著作権とリンク <p>© 2026 山田 太郎</p>
<ul><!-- 既存のリンク2件を移す --></ul>
</footer>
<header><h1>山田 太郎</h1><p>Web エンジニアを目指しています</p></header>
名前と肩書き
<main><!-- 自己紹介・趣味・経歴を移す --></main>
自己紹介・趣味・経歴
<footer>
著作権とリンク
<p>© 2026 山田 太郎</p>
<ul><!-- 既存のリンク2件を移す --></ul>
</footer>
body 直下は header → main → footer。自己紹介の div / span は中身ごと残します。
2 / 3
考えてみよう外しても進めます
「名前と肩書き」「自己紹介・趣味・経歴」「著作権表示とリンクのリスト」は、body の上からどのタグへ順に入れますか。
選ぶと、この枚の中で答えと理由を確かめられます。
3 / 3