HTMLの学習が進んでくると、あなたのコードはこんな風になっていませんか？
<div class="header">...</div>
<div class="main">...</div>
<div class="footer">...</div>画面上では問題なく表示されますし、デザインも崩れません。
しかし、プロのエンジニアがこれを見るとこう言います。
「もったいない！ これじゃGoogleに中身が伝わらないよ！」
今回は、何でも `div` を使う「divだらけの状態」から卒業し、意味のあるタグ（セマンティックHTML）を使って、コードの品質を劇的に高める方法を解説します。
なぜ div だけじゃダメなの？
div は「意味を持たない透明な箱」でしたね。
これを引っ越しの「ダンボール」に例えてみましょう。
- divだらけのサイト：
部屋中が「無地のダンボール」で埋め尽くされている状態です。
どこに食器があって、どこに服があるのか、開けてみるまで分かりません。 - セマンティックなサイト：
ダンボールに「台所用品」「寝具」「重要書類」とマジックで書いてある状態です。
これなら、引っ越し業者（Googleの検索ロボット）も、どこに何を運べばいいか一瞬で分かりますよね。
つまり、専用のタグを使うことは、「検索エンジンにサイトの内容を正しく伝える（SEO対策）」ための最強の手段なのです。
今日から使える！「divの代わり」になる5つのタグ
難しいことはありません。今まで `div` と書いていた場所を、以下のタグに書き換えるだけです。
1. <header>（ヘッダー）
サイトの「一番上の部分」に使います。ロゴやメニューが入る場所です。
<!-- × 今までの書き方 -->
<div class="header">...</div>
<!-- ◎ プロの書き方 -->
<header>...</header>2. <footer>（フッター）
サイトの「一番下の部分」に使います。コピーライト（©）やリンク集が入る場所です。
3. <main>（メイン）
ページの中で「一番言いたいこと（本文）」が入る場所です。
1ページにつき1回しか使えません。Googleに「ここが一番重要！」と伝えるタグです。
4. <nav>（ナビ）
Navigation（ナビゲーション）の略です。メニューバーや目次など、リンクが集まっている場所に使います。
5. <section>（セクション）
文章の「まとまり」や「章」を表します。
見出し（h2など）が登場するごとの区切りとして使うのが一般的です。
ビフォーアフターで比較！
では、以前作った「自己紹介ページ」の構成を、プロ仕様にリフォームしてみましょう。
Before：divだらけの状態
<body>
<div class="header">
<h1>私のサイト</h1>
</div>
<div class="content">
<div class="intro">
<h2>自己紹介</h2>
<p>こんにちは...</p>
</div>
</div>
<div class="footer">
<p>© 2024 My Name</p>
</div>
</body>After：セマンティックな状態
<body>
<!-- ここはヘッダーだ！と明確にする -->
<header>
<h1>私のサイト</h1>
</header>
<!-- ここがメインコンテンツだ！と伝える -->
<main>
<!-- ひとつの章（セクション）としてまとめる -->
<section class="intro">
<h2>自己紹介</h2>
<p>こんにちは...</p>
</section>
</main>
<!-- ここはフッターだ！と明確にする -->
<footer>
<p>© 2024 My Name</p>
</footer>
</body>じゃあ div はもう使っちゃダメなの？
いいえ、そんなことはありません！
div は今でも現役で大活躍します。
「特に意味はないけど、デザインのためにグループ化したい（CSSを当てたい）」
という時は、これまで通り div を使ってください。
「意味がある場所」には専用のタグを。「デザイン調整の箱」には div を。この使い分けができると完璧です。
まとめ：タグに意味を持たせよう
- 上の帯は
<header> - 下の帯は
<footer> - 本文は
<main> - 章区切りは
<section>
これを使うだけで、見た目は変わらなくても、あなたのコードは「検索エンジンに好かれる、アクセシビリティ（誰にでも優しい）の高いコード」に生まれ変わります。
次のサイト制作からは、ぜひ div の代わりにこれらのタグを使ってみてください！