【HTML】ページの区切り方｜header・nav・main・aside・footerとarticle・sectionの使い分け、divとの違い

HTMLでページを作るとき、画面の配置に合わせて div だけで区切ることもできます。ただ、今のHTMLには、「ここはメニュー」「ここは本文」といった意味を持った区切りのタグがあります。意味に合ったタグを使うことを、「セマンティックなマークアップ」といいます。

この記事では、ページを区切るタグの使い分けと、div との違い、迷ったときの選び方をまとめます。

ページ全体を区切るタグ

ページのいちばん外側の大きな区切りには、次の5つのタグを使います。よくある2カラムのページなら、タグの入れ子はだいたい次のようになります（main と aside が左右に並びます）。

body
├─ header …… ページのいちばん上（サイト名）
│   └─ nav …… メニュー
├─ main …… 本文（左側）
│   └─ article …… 記事
│       ├─ section …… 章
│       └─ section …… 章
├─ aside …… サイドバー（右側）
└─ footer …… ページのいちばん下（コピーライト）

body
├─ header …… ページのいちばん上（サイト名）
│   └─ nav …… メニュー
├─ main …… 本文（左側）
│   └─ article …… 記事
│       ├─ section …… 章
│       └─ section …… 章
├─ aside …… サイドバー（右側）
└─ footer …… ページのいちばん下（コピーライト）

補足しておくところです。

• header と footer はページに1つとは限らない：
  ページ全体の頭とおしりのほかに、article の中で「その記事の頭とおしり」として使えます
• nav は主なリンクだけ：
  ページの中のリンクをすべて nav で囲む必要はありません
• main には共通部分を入れない：
  どのページにもあるヘッダー、サイドバー、フッターは main の外に置きます

本文の中を区切るタグ

main の中をさらに区切るときは、中身に合わせて次のタグを使います。

article：それだけでまとまった内容

その部分だけを取り出しても意味が通じる内容に使います。ブログの1記事、ニュースの1本、口コミの1件などです。記事の一覧ページでは、並んだ記事のカードをそれぞれ article にすることもあります。

section：見出しが付くまとまり

章や節のように、同じテーマの内容のまとまりに使います。そのまとまりに見出し（h2 など）を付けられるかどうかが、使うかどうかの目安です。見た目を整えるためだけに囲みたいときは、section ではなく div を使います。

段落の間の区切りは hr

段落と段落の間で話題が変わるところには hr を使います。ブラウザでは横線になりますが、線を引くためのタグではなく「話題の切れ目」という意味のタグです。詳しくは「hrタグとbrタグの使い分け」で紹介しています。

2カラムのページの例

ヘッダー、メニュー、本文、サイドバー、フッターのある2カラムのページをHTMLで書くと、次のようになります。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>ページの区切り方サンプル（2カラム）</title>
</head>
<body>

  <header>
    <h1>サイトのタイトル</h1>
    <nav>
      <ul>
        <li><a href="#">メニュー1</a></li>
        <li><a href="#">メニュー2</a></li>
        <li><a href="#">メニュー3</a></li>
      </ul>
    </nav>
  </header>

  <div class="container">

    <main>
      <article>
        <section>
          <h2>セクションタイトル 1</h2>
          <p>ここにメイン記事の文章が入ります。</p>
        </section>

        <section>
          <h2>セクションタイトル 2</h2>
          <p>ここにメイン記事の文章が入ります。</p>
        </section>
      </article>
    </main>

    <aside>
      <h2>サイドバー見出し</h2>
      <ul>
        <li><a href="#">おすすめ記事1</a></li>
        <li><a href="#">おすすめ記事2</a></li>
        <li><a href="#">カテゴリー一覧</a></li>
      </ul>
    </aside>

  </div>

  <footer>
    <p>© 2026 備忘録ブログ</p>
  </footer>

</body>
</html>

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>ページの区切り方サンプル（2カラム）</title>
</head>
<body>

  <header>
    <h1>サイトのタイトル</h1>
    <nav>
      <ul>
        <li><a href="#">メニュー1</a></li>
        <li><a href="#">メニュー2</a></li>
        <li><a href="#">メニュー3</a></li>
      </ul>
    </nav>
  </header>

  <div class="container">

    <main>
      <article>
        <section>
          <h2>セクションタイトル 1</h2>
          <p>ここにメイン記事の文章が入ります。</p>
        </section>

        <section>
          <h2>セクションタイトル 2</h2>
          <p>ここにメイン記事の文章が入ります。</p>
        </section>
      </article>
    </main>

    <aside>
      <h2>サイドバー見出し</h2>
      <ul>
        <li><a href="#">おすすめ記事1</a></li>
        <li><a href="#">おすすめ記事2</a></li>
        <li><a href="#">カテゴリー一覧</a></li>
      </ul>
    </aside>

  </div>

  <footer>
    <p>© 2026 備忘録ブログ</p>
  </footer>

</body>
</html>

main と aside を囲んでいる div class="container" は、CSSで本文とサイドバーを横に並べるための箱です。このように、意味のない「配置のための箱」には div を使います。

div だけで区切らない理由

div 自体には意味がありません（「pタグとdivタグの違い」）。すべてを div で区切っても画面の見た目は同じにできますが、意味のあるタグを使うと次のような違いがあります。

• 画面読み上げソフトで移動しやすい：
  header・nav・main などは「ランドマーク」として扱われ、メニューを飛ばして本文に移るような操作ができます
• ページのどこが本文かが伝わりやすい：
  ブラウザのリーダー表示や検索エンジンなど、ページを読み取る仕組みが、本文とそれ以外を見分けやすくなります（それだけで検索の順位が上がるわけではありません）
• あとで読んだときに分かりやすい：
  div がいくつも重なっているより、どこからどこまでが何の部分かがすぐ分かります

迷ったときの選び方

Q1. ページ全体の頭・おしり、メニュー、本文、サイドバーのどれか？
 ┣ ［はい］ ➡ header / footer / nav / main / aside
 ┗ ［いいえ］
     ↓
Q2. その部分だけ取り出しても意味が通じる、まとまった内容？
 ┣ ［はい］ ➡ article
 ┗ ［いいえ］
     ↓
Q3. そのまとまりに、内容を表す見出しを付けられる？
 ┣ ［はい］ ➡ section
 ┗ ［いいえ］
     ↓
見た目や配置のために囲みたいだけ ➡ div

Q1. ページ全体の頭・おしり、メニュー、本文、サイドバーのどれか？
 ┣ ［はい］ ➡ header / footer / nav / main / aside
 ┗ ［いいえ］
     ↓
Q2. その部分だけ取り出しても意味が通じる、まとまった内容？
 ┣ ［はい］ ➡ article
 ┗ ［いいえ］
     ↓
Q3. そのまとまりに、内容を表す見出しを付けられる？
 ┣ ［はい］ ➡ section
 ┗ ［いいえ］
     ↓
見た目や配置のために囲みたいだけ ➡ div

WordPressでは

WordPressでは、header・main・footer・aside などページ全体の区切りは、テーマが出しています。自分のブログがどうなっているかは、記事のページで右クリックして「検証」（Chromeの場合）を開くと確かめられます。

記事の中で自分で区切りたいときは、「グループ」ブロックを使います。グループブロックは初めは div ですが、右側の設定の「高度な設定」→「HTML要素」で、section や aside などに変えられます。

HTML全体の基本は「HTMLの基本｜タグの書き方とよく使う5つのタグ」、見出しの階層は「hタグ（見出し）の基本」で紹介しています。

まとめ

• ページ全体は header・nav・main・aside・footer で区切る。main は1ページに1つ
• 本文の中は、まとまった内容なら article、見出しが付くまとまりなら section
• 意味のない配置のための箱には div
• 意味のあるタグを使うと、読み上げソフトで移動しやすく、どこが本文かが伝わりやすくなる
• WordPressではページ全体はテーマが出し、記事の中はグループブロックの「HTML要素」で選べる