意味のあるタグを使う — header・main・footer の使いどころ

HTMLには、見た目がまったく同じなのに名前だけが違うタグがあります。div と section、div と header。どれを使っても表示は変わりません。では、なぜ使い分けるのでしょうか。

ページを読むのは人間だけではない

あなたの作ったページは、次のようなものにも読まれます。

• 読み上げソフト … 目の見えない人が使う。「ここからがメインの内容」と分かると、飛ばして読める
• 検索エンジン … どこが本文でどこがメニューかを判断して、検索結果に反映する
• ブラウザの読み上げ・リーダーモード … 本文だけを抜き出して表示する

全部が div だと、これらは「どこが本文か」を推測するしかありません。名前の付いたタグを使えば、はっきり伝わります。書く手間は同じなので、使わない理由がありません。

まず覚える5つ

• header … ページやセクションの上部。ロゴやサイト名を入れる
• nav … メニュー。サイト内を移動するリンクのまとまり
• main … そのページの主役となる内容。1ページに1つだけ
• footer … 下部。コピーライトや補足リンク
• article / section … 内容のまとまり。独立して意味が通るなら article、ページ内の区切りなら section

<body>
  <header>
    <p>わたしのサイト</p>
    <nav>
      <a href="/">ホーム</a>
      <a href="/about.html">わたしについて</a>
    </nav>
  </header>

  <main>
    <h1>ページのタイトル</h1>
    <p>ここが主役の内容です。</p>
  </main>

  <footer>
    <p>© 2026 わたしのサイト</p>
  </footer>
</body>

この形をテンプレートとして覚えてしまえば、あとは main の中身を書くだけになります。

section と div の分かれ目

迷ったときの基準は「見出しが付くかどうか」です。見出しを持つひとかたまりなら section、単にCSSのために囲みたいだけなら div。これだけで9割は判断できます。

やってしまいがちな間違い

• main を2つ置く … 主役が2つあることになる。1ページに1つだけ
• すべてを section で囲む … 見出しの無い section は意味がない。div でよい
• nav をページ内の全リンクに使う … サイト内移動の主要メニューに限る
• header をページの上部だけのものと思う … article の中にも header は置ける

まとめ

意味のあるタグを使うのは、誰かに親切にするためというより、自分が後で読み返すときに構造が分かるからでもあります。3か月後の自分は他人です。名前が付いていれば、その他人にも伝わります。