セマンティックHTMLタグの使い分け

✅ 回答

全部divでも「見た目」は同じになります。でも「意味」が伝わらない。セマンティックタグは「このHTMLが何の役割か」を機械に伝えるためのものです。

なぜdivだけではダメなのか

• スクリーンリーダー — 視覚障害のある人が使うソフト。<nav>があれば「ナビゲーション」と読み上げてくれる
• 検索エンジン — <main>の中身を「このページの本題」と判断する
• 開発者 — コードを読んだとき、<article>なら「ここが記事本文だな」とすぐわかる

タグの使い分け早見表

タグ	役割	使う場所
<header>	ヘッダー（導入部分）	ページ上部、記事の冒頭
<nav>	ナビゲーション	メニュー、パンくずリスト
<main>	メインコンテンツ	ページに1つだけ
<article>	独立した記事	ブログ記事、ニュース、カード
<section>	テーマごとのまとまり	章、セクション
<footer>	フッター（補足情報）	著作権表示、連絡先

具体例：学園祭サイト

<header>
  <h1>○○高校 学園祭2026</h1>
  <nav>
    <a href="/">ホーム</a>
    <a href="/events/">出し物一覧</a>
    <a href="/access/">アクセス</a>
  </nav>
</header>

<main>
  <article>
    <h2>お化け屋敷 — 2年A組</h2>
    <p>今年のテーマは「廃病院」...</p>
  </article>
</main>

<footer>
  <p>&copy; 2026 ○○高校実行委員会</p>
</footer>

❌ 全部divで書くとこうなる

<!-- ❌ 全部divで書いた場合 -->
<div class="header">
  <div class="title">○○高校 学園祭2026</div>
  <div class="nav">...</div>
</div>
<div class="main">
  <div class="article">...</div>
</div>
<div class="footer">...</div>

見た目は同じでも、機械には「ただのdivの塊」にしか見えません。

迷ったときの判断基準

• 「この部分だけ切り出しても意味が通じる？」→ Yes なら <article>
• 「見出しをつけられるまとまり？」→ Yes なら <section>
• 「どれにも当てはまらない、ただのレイアウト用」→ <div> でOK