MENU
プログラムとツールの使い方を、実務目線で分かりやすく整理
  1. ホーム
  2. プログラム
  3. HTMLの基本構造を理解する｜header・main・footerの役割と使い方

HTMLの基本構造を理解する｜header・main・footerの役割と使い方

プログラム

HTMLの基本構造を理解する｜header・main・footerの役割と使い方

HTMLのページを組むとき、まず押さえたい基本は 「ページのどこが案内部分で、どこが本文で、どこが補足情報か」をタグで明確に分けること です。header は導入やナビゲーション、main はそのページの主役になる内容、footer は著作権表記や関連リンクなどの締めを担当します。

この3つを正しく使うと、コードの見通しが良くなるだけでなく、あとから保守しやすくなります。複数人で触る案件や、CMSでテンプレートを分ける場面でも役立ちます。

  • header: サイト名、ロゴ、グローバルナビ、ページ見出しなどを置く
  • main: そのページで一番読みたい本文や機能を置く
  • footer: コピーライト、問い合わせ先、関連リンク、補足情報を置く
  • 実務上の要点: 見た目の位置ではなく、役割でタグを選ぶ

ここがポイント: main は「そのページの中心内容」を示すタグです。見た目の中央にあるかどうかではなく、読者にとって主役かどうかで判断します。

目次

まず理解したい全体像

最初に、最小構成の例を見たほうが早いです。基本形は次のようになります。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>サンプルページ</title>
</head>
<body>
  <header>
    <h1>サイト名</h1>
    <nav>
      <ul>
        <li><a href="/">ホーム</a></li>
        <li><a href="/blog/">ブログ</a></li>
        <li><a href="/contact/">お問い合わせ</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <article>
      <h2>記事タイトル</h2>
      <p>ここに記事本文が入ります。</p>
    </article>
  </main>

  <footer>
    <p>&copy; 2026 Example Inc.</p>
  </footer>
</body>
</html>

この形にしておくと、HTMLを開いた人が「どこからどこまでが本文なのか」をすぐ判断できます。CSSやJavaScriptを後から追加するときも、対象を絞りやすくなります。

header は、ページやセクションの入り口になる情報をまとめる場所です。実務では、サイト全体の共通ヘッダーとして使うケースと、記事やカードの先頭に置くケースがあります。

ページ全体の header

ページ上部にある共通ヘッダーでは、次のような要素を置くことが多いです。

  • ロゴ
  • サイト名
  • グローバルナビゲーション
  • 検索フォーム
  • ログイン導線

例:

<header>
  <a href="/" class="logo">HowTech</a>
  <nav>
    <ul>
      <li><a href="/html/">HTML</a></li>
      <li><a href="/css/">CSS</a></li>
      <li><a href="/javascript/">JavaScript</a></li>
    </ul>
  </nav>
</header>

ここで重要なのは、header が「ただ上にある箱」ではないことです。上にあっても広告バナーなら header とは限りません。逆に、ページ上部にある導入や案内なら header として自然です。

記事やセクション内の header

header はページ全体に1回しか使えない、と思われがちですが、それは誤解です。記事やセクションの導入にも使えます。

<article>
  <header>
    <h2>HTML入門</h2>
    <p>更新日: 2026-04-22</p>
  </header>
  <p>HTMLの基本を解説します。</p>
</article>

この使い方をすると、記事タイトルとメタ情報のまとまりがはっきりします。ブログ一覧、商品カード、FAQの各項目などでも有効です。

header でよくある勘違い

  • header と <head> は別物
  • <head> はメタ情報用で、画面に見える内容は基本的に置かない
  • header は画面に見える導入部分

この2つを混同すると、HTMLの理解が一気に崩れます。ファイル先頭の <head> は、タイトルやCSS読込などの設定場所です。読者が実際に見るページ上部は header です。

main の役割と使い方

main は、そのページの中心になる内容を入れるためのタグです。記事ページなら本文、サービスページなら主要な説明や申込導線、業務画面なら主機能エリアがここに入ります。

このタグが一番重要です。 ページの中で「何を読ませたいか」「何を操作させたいか」を明示できるからです。

main に入れるもの

  • 記事本文
  • 商品説明
  • フォーム本体
  • ダッシュボードの主画面
  • 一覧ページの主要リスト

例:

<main>
  <h1>HTMLの基本構造</h1>
  <p>このページでは、header・main・footerの使い分けを解説します。</p>

  <section>
    <h2>基本の考え方</h2>
    <p>意味に合わせてタグを選ぶことが大切です。</p>
  </section>
</main>

main に入れないほうがよいもの

  • サイト共通のヘッダー
  • サイト共通のフッター
  • サイドバーの補助リンクだけの領域
  • 全ページ共通のメニューだけの領域

実務で迷ったら、「このページで読者が一番見に来た内容か」で判断すると整理しやすいです。

main は原則1つで考える

MDNでは、通常の文書では hidden が付いていない main を複数置かないよう説明しています。つまり、1ページに主役は1つ、という考え方です。

このルールを守ると、テンプレート設計が安定します。WordPressでも、header.php、本文テンプレート、footer.php の役割分担が見えやすくなります。

footer は、ページやセクションの締めに置く補足情報のまとまりです。単なる「一番下の箱」ではなく、末尾に置く意味のある情報を入れるためのタグです。

よく入る内容

  • コピーライト
  • 運営者情報
  • 関連リンク
  • 利用規約やプライバシーポリシーへのリンク
  • 記事の著者情報

例:

<footer>
  <p>&copy; 2026 HowTech</p>
  <ul>
    <li><a href="/about/">運営情報</a></li>
    <li><a href="/privacy/">プライバシーポリシー</a></li>
  </ul>
</footer>

footer も header と同じく、ページ全体だけでなく article の中で使えます。

<article>
  <h2>記事タイトル</h2>
  <p>本文...</p>
  <footer>
    <p>カテゴリ: HTML</p>
    <p>タグ: セマンティックHTML</p>
  </footer>
</article>

記事末尾の著者情報やタグ一覧をまとめたいときに便利です。コンポーネント単位で意味を分けられるので、再利用しやすくなります。

実務でよく使う基本レイアウト

実際の制作では、3タグだけで終わることは少なく、nav、article、section、aside と組み合わせます。

例: コーポレートサイトの基本形

<body>
  <header>
    <h1>会社名</h1>
    <nav>...</nav>
  </header>

  <main>
    <section>
      <h2>サービス紹介</h2>
      <p>主要サービスの説明</p>
    </section>

    <section>
      <h2>導入事例</h2>
      <p>事例の要約</p>
    </section>
  </main>

  <footer>
    <p>&copy; 2026 Company</p>
  </footer>
</body>

例: ブログ記事ページ

<body>
  <header>
    <a href="/">ブログ名</a>
    <nav>...</nav>
  </header>

  <main>
    <article>
      <header>
        <h1>記事タイトル</h1>
        <p>公開日: 2026-04-22</p>
      </header>

      <p>本文...</p>

      <footer>
        <p>著者: 編集部</p>
      </footer>
    </article>
  </main>

  <footer>
    <p>&copy; 2026 Blog</p>
  </footer>
</body>

この形にしておくと、ページ全体の header / footer と、記事単位の header / footer を切り分けて考えられます。

入力例と出力イメージ

タグの役割が分かっても、完成形が想像しにくいことがあります。そこで、簡単な入力例と画面イメージを対応させます。

入力例

<header>
  <h1>料理メモ</h1>
</header>

<main>
  <article>
    <h2>カレーの作り方</h2>
    <p>玉ねぎを炒めてから煮込みます。</p>
  </article>
</main>

<footer>
  <p>© 2026 Recipe Notes</p>
</footer>

出力イメージ

  • 上部: サイト名「料理メモ」
  • 中央: 記事タイトル「カレーの作り方」と本文
  • 下部: コピーライト表記

見た目はCSS次第で変えられますが、HTMLの時点で役割分担ができているため、レイアウト変更にも耐えやすくなります。

よくある失敗と改善例

初心者がつまずきやすいポイントは、見た目だけでタグを選んでしまうことです。

NG例1: 上にあるから何でも header

<header>
  <div class="ad-banner">セール開催中</div>
</header>

広告だけをまとめた箱なら、必ずしも header である必要はありません。導入や案内の役割が薄いなら、div のほうが自然な場合もあります。

改善例

<header>
  <h1>ショップ名</h1>
  <nav>...</nav>
</header>
<div class="ad-banner">セール開催中</div>

NG例2: main を複数置く

<main>記事一覧</main>
<main>サイドコンテンツ</main>

これはページの主役が2つある状態です。主内容は1つにまとめ、補助情報は aside や別の要素で分けたほうが整理できます。

改善例

<main>
  <section>記事一覧</section>
</main>
<aside>
  サイドコンテンツ
</aside>

<footer>
  <h2>製品紹介</h2>
  <p>この製品の主な特徴は...</p>
</footer>

製品紹介がそのページの中心なら、main 側に置くべきです。footer は補足情報向けです。

CSSやJavaScriptを書くときの利点

この構造は、見た目だけでなく開発効率にも影響します。

CSSで狙いやすい

header {
  background: #f5f5f5;
}

main {
  max-width: 800px;
  margin: 0 auto;
}

footer {
  border-top: 1px solid #ddd;
}

意味ごとに要素が分かれていると、クラス名がなくても基本の調整がしやすくなります。

JavaScriptで取得しやすい

const main = document.querySelector('main');
console.log(main.textContent);

管理画面やフロントエンドで「本文領域だけ取得したい」といった処理でも、構造が明快だとコードが単純になります。

div とどう使い分けるべきか

ここも実務でよく出る疑問です。結論から言うと、意味があるまとまりには header main footer を使い、意味づけしにくいレイアウト用の箱に div を使う のが基本です。

div が向いている場面

  • デザイン調整だけのラッパー
  • カード内部の細かい横並び
  • JavaScriptのフック用コンテナ

セマンティック要素が向いている場面

  • ページ冒頭の導入
  • ページ本文の中心領域
  • セクション末尾の補足情報

全部を div で組んでも表示はできます。ただ、あとから読む人にとっては役割が見えません。保守性を優先するなら、使い分けたほうが有利です。

どんな場面で役立つか

この基本構造は、学習用サンプルだけでなく、実務でもそのまま使えます。

  • WordPressテーマのテンプレート作成
  • LPやコーポレートサイトのマークアップ
  • ブログ記事ページの構造整理
  • 管理画面や業務ツールのレイアウト設計
  • HTMLメール以外の通常Webページ制作

特に、デザイナー・コーダー・エンジニアが分業する現場では、HTMLの意味が揃っているだけで会話が速くなります。main の中を差し替える、記事の footer をコンポーネント化する、といった指示が通りやすくなるためです。

迷ったときの判断基準

最後に、タグ選びで迷ったときの短い基準を置いておきます。

  • その部分はページやセクションの導入か: header
  • その部分はページで一番伝えたい内容か: main
  • その部分は末尾の補足情報か: footer
  • 意味よりレイアウト都合が強いか: div

HTMLの基本構造は単純ですが、ここが曖昧なまま進むと、ページが増えたときに崩れます。新しいページを書くたびに、まず「主役はどこか」を決めて main を置く。この習慣があるだけで、マークアップの質はかなり安定します。

参照リンク

プログラム
footer header HTML main Web制作 セマンティックHTML マークアップ 初心者向け
よかったらシェアしてね！
  • URLをコピーしました！
  • URLをコピーしました！
目次