header・main・footer の構造的な役割とは？初心者向けにわかりやすく解説

HTML5 では、Webページの意味（セマンティクス）をわかりやすく表すために
header・main・footer という構造タグが導入されました。

これらはページ全体の“骨組み”を作る重要なタグで、正しく使うことで SEO・アクセシビリティ・コードの読みやすさ が大きく向上します。

この記事では、header / main / footer の役割・書き方・使い所・注意点 を
初心者向けに解説します。

HTML5構造タグとは？
header の役割
1. 基本の書き方
2. header のポイント
main の役割
1. main の重要ポイント
footer の役割
1. footer のポイント
3つのタグの関係性（図解）
よくある間違い
実際のレイアウト例（html構造例）
まとめ

HTML5構造タグとは？

構造タグ（セマンティックタグ） とは、
「その部分が何の役割を持つか」を示すためのタグです。

例：

<header>：ヘッダー
<main>：主内容
<footer>：フッター

これらを使うことで、

✔ コードが論理的に伝わる
✔ 検索エンジンが内容を理解しやすい
✔ 読み上げソフト（アクセシビリティ）が正しく案内できる

というメリットがあります。

header の役割

ページやセクションの “導入・最上部” を表す領域。

主に以下を含みます：

ロゴ
サイトタイトル
ナビゲーション（メニュー）
ページタイトル
キービジュアル（場合による）

基本の書き方

<header>
  <h1>KEN-BLOG</h1>
  <nav>…ナビ…</nav>
</header>

header のポイント

ページに複数置ける（セクション用 header）
ただし「ページ全体の最上部」は 1つだけが望ましい
メニュー（nav）とセットで使われることが多い

main の役割

ページの主要コンテンツ（本文部分）を表すタグ。

例：ブログの記事本文、講座ページの内容など。

<main>
  <article>
    <h2>HTML講座</h2>
    <p>本文…</p>
  </article>
</main>

main の重要ポイント

ページに1つだけ
サイドバー・ヘッダー・フッターは含めない
Google も main を主要内容として理解する

→ SEOにおいて、main 内のコンテンツが最も重視されます。

footer の役割

ページの最下部（締め部分）を表す領域。

主に以下を含む：

コピーライト
サイトマップ
運営者情報
プライバシーポリシー・利用規約リンク
SNSリンク

<footer>
  <p>&copy; 2025 KEN-BLOG</p>
</footer>

footer のポイント

ページ下部のまとめ・補足情報
ページ内セクションごとにも使える（記事末の footer など）

3つのタグの関係性（図解）

ページ全体の構造は、以下のように考えると理解が早いです。

+------------------------------------+
| <header>                           |
|  サイト名 / ナビゲーション          |
+------------------------------------+

+------------------------------------+
| <main>                             |
|  記事内容 / メインコンテンツ         |
+------------------------------------+

+------------------------------------+
| <footer>                           |
|  コピーライト / 運営情報            |
+------------------------------------+

✔ 3つでページの“骨組み”を表す
✔ WordPressテーマでもこの構成が基本

よくある間違い

main の中に header を入れる

→ main は「本文」なのでヘッダーを入れてはいけない

main を複数使う

→ main はページに1つだけ

footer の中にメイン記事を入れる

→ footer は締め／補足用

デザイン目的で header や footer を乱用

→ 意味タグなので本質を意識する必要あり

実際のレイアウト例（html構造例）

<body>

  <header>
    <h1>KEN-BLOG</h1>
    <nav> … </nav>
  </header>

  <main>
    <article>
      <h2>HTML講座</h2>
      <p>ここに本文が入ります。</p>
    </article>
  </main>

  <footer>
    <p>&copy; 2025 KEN-BLOG</p>
  </footer>

</body>

→ WordPressテーマでもほぼ同じ構造です。