HTMLのheader・main・section・articleの違いと使い分け

header・main・section・article は、ページのどの部分が「何の役割か」をブラウザや読み上げソフト、検索エンジンに伝えるためのHTMLタグです。 header は導入部分、main はそのページの主な内容、article はそれだけで完結する内容、section は見出しを持つひとまとまり、という違いがあります。見た目は div と同じですが、伝わる意味が変わります。こうした「意味を表すタグ」を使った書き方は、セマンティックなマークアップと呼ばれます。

この記事では、どのタグを使うかを質問に答えるだけで決められる判断フローと、nav・aside・footer・div を加えた8タグの早見表を用意しました。さらに、ブログ記事・トップページ・商品一覧のページ全体のマークアップをコピペできる形で載せ、それぞれが支援技術にどう伝わるかを Chromium 141 のアクセシビリティツリーで確かめた結果も添えています。

header・main・section・articleなど8タグの早見表

「対応するランドマークロール」は、読み上げソフトなどがページ内を移動する目印として使う役割の名前です。今回 Chromium 141.0.7390.37 で実際に取り出した結果を載せています。

どのタグを使うか決める判断フロー

上から順に質問に答えていくと、使うタグが決まります。

flowchart TD
  Q1{"そのページの主な内容全体か"} -->|はい| MAIN["main"]
  Q1 -->|いいえ| Q2{"主要なナビゲーションの<br>リンクのまとまりか"}
  Q2 -->|はい| NAV["nav"]
  Q2 -->|いいえ| Q3{"それだけ切り出しても<br>内容が成り立つか"}
  Q3 -->|はい| ARTICLE["article"]
  Q3 -->|いいえ| Q4{"本筋から外しても<br>読める補足か"}
  Q4 -->|はい| ASIDE["aside"]
  Q4 -->|いいえ| Q5{"ページやまとまりの<br>導入部分か"}
  Q5 -->|はい| HEADER["header"]
  Q5 -->|いいえ| Q6{"ページやまとまりの<br>末尾の情報か"}
  Q6 -->|はい| FOOTER["footer"]
  Q6 -->|いいえ| Q7{"見出しを付けられる<br>テーマのまとまりか"}
  Q7 -->|はい| SECTION["section"]
  Q7 -->|いいえ| DIV["div"]

同じ内容を表にしたものです。Mermaid が表示されない環境ではこちらを使ってください。

迷ったときの目安は「見出しを付けられるか」と「切り出しても成り立つか」の2つです。見出しを付けられないなら div、付けられるなら section、さらに切り出しても成り立つなら article、と考えると整理できます。

article と section で迷ったとき

article の中に section で章を作る形も、section の中に article を並べる形も、どちらも正しい書き方です。「記事の中の章」は article の中の section、「新着記事の一覧」は section の中の article、と覚えると使い分けやすくなります。

各タグの意味と使いどころ

各タグの定義は、HTML 仕様（WHATWG HTML Standard の Sections の章と Grouping content の章）を今回開いて確認した内容にもとづいています。

header：導入部分をまとめる

header は、導入やナビゲーションの手助けになる内容をまとめるタグです。ページの上部にあるロゴとメニューだけでなく、記事のタイトルと日付をまとめる用途でも使えます。1ページに何回書いてもかまいません。

<!-- ページ全体の header -->
<header>
  <a href="/">みどりノート</a>
  <nav aria-label="メインメニュー">…</nav>
</header>

<!-- 記事の header -->
<article>
  <header>
    <h1>観葉植物の水やりの基本</h1>
    <p><time datetime="2026-10-03">2026年10月3日</time> 公開</p>
  </header>
  …
</article>

仕様上、header の中に別の header や footer を入れることはできません。

nav：主要なナビゲーション

nav は、ほかのページやページ内の位置へのリンクをまとめた、主要なナビゲーションのためのタグです。リンクが並んでいれば何でも nav、というわけではありません。仕様でも、フッターに並ぶ規約などの短いリンク集は footer だけで十分な場合がある、と説明されています。

nav を複数置くときは、aria-label で名前を付けると、読み上げソフトで「メインメニュー」「パンくずリスト」と区別して案内されます。

<nav aria-label="メインメニュー">…</nav>
<nav aria-label="パンくずリスト">…</nav>

main：そのページの主な内容

main は、そのページの主要な内容を表します。表示される main は1ページに1つで、article・aside・footer・header・nav・section の中には入れられません。どのページにも共通するヘッダー、メニュー、フッターは main の外に置きます。

article：それだけで完結する内容

article は、それだけで独立して配布・再利用できる内容を表します。ブログ記事やニュースのほか、商品カード、コメント、レビューのように一覧の中で繰り返される1件にも使えます。

section：見出しを持つまとまり

section は、テーマでまとめた内容のひとかたまりで、通常は見出しを伴います。仕様では、スタイルを当てるためだけの入れ物として使うのは適切でなく、その場合は div を使うよう案内されています。

aside：本筋から切り離せる補足

aside は、周りの内容と関連はあるものの、切り離しても本筋が成り立つ内容です。サイドバー、関連記事、補足のメモ、広告枠などが当てはまります。本文の流れの一部である注釈（かっこ書きのような補足）には使いません。

footer：末尾の情報

footer は、直近のまとまり（article や section、なければページ全体）についての末尾の情報です。著者、関連リンク、著作権表示などを入れます。header と同じく、記事ごとの footer も書けます。

div：意味を持たない入れ物

div は意味を持たない入れ物です。レイアウトや装飾のために囲むだけなら div が正解で、セマンティックなタグを使うことと div を使うことは両立します。

headerとfooterは置き場所で役割が変わる

header と footer は、置き場所によって支援技術に伝わる役割が変わります。次の HTML を Chromium 141 で開き、Playwright 1.56.0 の ariaSnapshot() でアクセシビリティツリーを取り出しました。

<section><h2>名前なしsection</h2></section>
<section aria-label="料金"><p>aria-label付きsection</p></section>
<section aria-labelledby="h"><h2 id="h">よくある質問</h2></section>
<main>
  <header><p>main内header</p></header>
  <footer><p>main内footer</p></footer>
  <section><header><p>section内header</p></header></section>
  <article>
    <aside><p>article内aside 名前なし</p></aside>
    <aside aria-label="補足"><p>article内aside 名前あり</p></aside>
  </article>
  <aside><p>main直下aside</p></aside>
</main>
<div>
  <header><p>div内header</p></header>
  <footer><p>div内footer</p></footer>
</div>

実行結果です。

- heading "名前なしsection" [level=2]
- region "料金":
  - paragraph: aria-label付きsection
- region "よくある質問":
  - heading "よくある質問" [level=2]
- main:
  - paragraph: main内header
  - paragraph: main内footer
  - paragraph: section内header
  - article:
    - complementary:
      - paragraph: article内aside 名前なし
    - complementary "補足":
      - paragraph: article内aside 名前あり
  - complementary:
    - paragraph: main直下aside
- banner:
  - paragraph: div内header
- contentinfo:
  - paragraph: div内footer

ポイントは2つあります。

• 記事の中に header や footer を書いても、ページ全体のヘッダー・フッターとは別物として扱われます。 そのため、1ページに header を複数書いても、banner は1つのままです
• section は、名前を付けたときだけランドマークになります。 名前のない section は、支援技術にとっては div と同じ伝わり方です。それでも、見出しとセットで章のまとまりを示せるので、ソースの読みやすさと構造の明確さの面で役に立ちます

なお、WAI-ARIA の対応表（HTML-AAM）を今回開いて確認したところ、article などの中にある aside は「名前があれば complementary、なければ役割なし」とされていました。Chromium 141 では名前のない aside も complementary として出力されており、ブラウザによって扱いに差がある部分です。

ブログ記事ページのマークアップ

記事ページは「main の中に article が1つ、その中を section で章に分ける」形が基本です。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>観葉植物の水やりの基本 | みどりノート</title>
</head>
<body>
  <header>
    <a href="/">みどりノート</a>
    <nav aria-label="メインメニュー">
      <ul>
        <li><a href="/articles/">記事一覧</a></li>
        <li><a href="/about/">このサイトについて</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <article>
      <header>
        <h1>観葉植物の水やりの基本</h1>
        <p><time datetime="2026-10-03">2026年10月3日</time> 公開</p>
      </header>

      <section>
        <h2>水やりのタイミング</h2>
        <p>土の表面が乾いてから与えます。</p>
      </section>

      <section>
        <h2>季節ごとの回数</h2>
        <p>夏は回数を増やし、冬は控えめにします。</p>
        <aside>
          <p>メモ：受け皿にたまった水は捨てておきます。</p>
        </aside>
      </section>

      <footer>
        <p>書いた人：みどりノート編集部</p>
      </footer>
    </article>
  </main>

  <aside aria-label="関連情報">
    <section>
      <h2>新着記事</h2>
      <ul>
        <li><a href="/articles/soil/">土の選び方</a></li>
        <li><a href="/articles/light/">置き場所と日当たり</a></li>
      </ul>
    </section>
  </aside>

  <footer>
    <nav aria-label="フッターメニュー">
      <ul>
        <li><a href="/privacy/">プライバシーポリシー</a></li>
        <li><a href="/contact/">お問い合わせ</a></li>
      </ul>
    </nav>
    <p><small>&copy; 2026 みどりノート</small></p>
  </footer>
</body>
</html>

Chromium 141 で取り出したアクセシビリティツリー（リンクの一覧など一部を省略）です。

- banner:
  - link "みどりノート"
  - navigation "メインメニュー":
    …
- main:
  - article:
    - heading "観葉植物の水やりの基本" [level=1]
    - paragraph:
      - time: 2026年10月3日
      - text: 公開
    - heading "水やりのタイミング" [level=2]
    - paragraph: 土の表面が乾いてから与えます。
    - heading "季節ごとの回数" [level=2]
    - paragraph: 夏は回数を増やし、冬は控えめにします。
    - complementary:
      - paragraph: メモ：受け皿にたまった水は捨てておきます。
    - paragraph: 書いた人：みどりノート編集部
- complementary "関連情報":
  - heading "新着記事" [level=2]
  …
- contentinfo:
  - navigation "フッターメニュー":
    …
  - paragraph: © 2026 みどりノート

ランドマークの数は、banner 1、navigation 2、main 1、complementary 2、contentinfo 1 でした。header を2回（ページ全体と記事）、footer を2回書いていますが、banner と contentinfo は1つずつになっています。検証ツール（Nu Html Checker）のメッセージは0件です。

トップページのマークアップ

トップページは「main の中に section を並べ、それぞれに見出しを付ける」形が基本です。 section に aria-labelledby で見出しを結び付けると、名前つきの領域（region）として伝わります。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>みどりノート | 観葉植物の育て方</title>
</head>
<body>
  <header>
    <h1>みどりノート</h1>
    <nav aria-label="メインメニュー">
      <ul>
        <li><a href="/articles/">記事一覧</a></li>
        <li><a href="/items/">商品一覧</a></li>
        <li><a href="/about/">このサイトについて</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <section aria-labelledby="intro-heading">
      <h2 id="intro-heading">みどりノートとは</h2>
      <p>観葉植物の育て方をやさしく紹介するサイトです。</p>
    </section>

    <section aria-labelledby="new-heading">
      <h2 id="new-heading">新着記事</h2>
      <article>
        <h3><a href="/articles/water/">観葉植物の水やりの基本</a></h3>
        <p>土の表面が乾いてから与えます。</p>
      </article>
      <article>
        <h3><a href="/articles/soil/">土の選び方</a></h3>
        <p>水はけのよい土を選びます。</p>
      </article>
    </section>

    <section aria-labelledby="news-heading">
      <h2 id="news-heading">お知らせ</h2>
      <ul>
        <li><time datetime="2026-10-01">2026年10月1日</time> 秋の特集を公開しました</li>
      </ul>
    </section>
  </main>

  <footer>
    <p><small>&copy; 2026 みどりノート</small></p>
  </footer>
</body>
</html>

アクセシビリティツリー（一部を省略）です。

- banner:
  - heading "みどりノート" [level=1]
  - navigation "メインメニュー":
    …
- main:
  - region "みどりノートとは":
    - heading "みどりノートとは" [level=2]
    - paragraph: 観葉植物の育て方をやさしく紹介するサイトです。
  - region "新着記事":
    - heading "新着記事" [level=2]
    - article:
      - heading "観葉植物の水やりの基本" [level=3]:
        - link "観葉植物の水やりの基本"
      - paragraph: 土の表面が乾いてから与えます。
    - article:
      - heading "土の選び方" [level=3]:
        - link "土の選び方"
      - paragraph: 水はけのよい土を選びます。
  - region "お知らせ":
    - heading "お知らせ" [level=2]
    …
- contentinfo:
  - paragraph: © 2026 みどりノート

ランドマークの数は、banner 1、navigation 1、main 1、region 3、contentinfo 1、article は 2 でした。トップページではサイト名を h1 にし、各 section の見出しを h2、その中の記事タイトルを h3 にしています。見出しのレベルを入れ子の深さに合わせると、見出しだけを拾い読みしてもページの構成が伝わります。

region は便利ですが、数が多すぎると目印としての役割が薄れます。ページの中で特に行き来したい大きなまとまりに絞って名前を付けるのがおすすめです。

商品一覧ページのマークアップ

一覧ページは「1件ずつを article にし、リストで並べる」形が扱いやすいです。 パンくずリストとページ送りは nav、絞り込みは aside にしています。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>商品一覧 | みどりノート</title>
</head>
<body>
  <header>
    <a href="/">みどりノート</a>
    <nav aria-label="メインメニュー">
      <ul>
        <li><a href="/articles/">記事一覧</a></li>
        <li><a href="/items/" aria-current="page">商品一覧</a></li>
      </ul>
    </nav>
  </header>

  <nav aria-label="パンくずリスト">
    <ol>
      <li><a href="/">ホーム</a></li>
      <li><a href="/items/" aria-current="page">商品一覧</a></li>
    </ol>
  </nav>

  <main>
    <h1>商品一覧</h1>

    <aside aria-label="絞り込み">
      <h2>絞り込み</h2>
      <ul>
        <li><a href="/items/?size=s">小さめ</a></li>
        <li><a href="/items/?size=l">大きめ</a></li>
      </ul>
    </aside>

    <section aria-labelledby="list-heading">
      <h2 id="list-heading">観葉植物（3件）</h2>
      <ul>
        <li>
          <article>
            <h3><a href="/items/pothos/">ポトス</a></h3>
            <p>育てやすい定番の植物です。</p>
            <p>1,200円</p>
          </article>
        </li>
        <li>
          <article>
            <h3><a href="/items/monstera/">モンステラ</a></h3>
            <p>切れ込みのある大きな葉が特徴です。</p>
            <p>2,800円</p>
          </article>
        </li>
        <li>
          <article>
            <h3><a href="/items/sansevieria/">サンスベリア</a></h3>
            <p>乾燥に強い植物です。</p>
            <p>1,800円</p>
          </article>
        </li>
      </ul>
    </section>

    <nav aria-label="ページ送り">
      <ul>
        <li><a href="/items/?page=1" aria-current="page">1</a></li>
        <li><a href="/items/?page=2">2</a></li>
      </ul>
    </nav>
  </main>

  <footer>
    <p><small>&copy; 2026 みどりノート</small></p>
  </footer>
</body>
</html>

アクセシビリティツリーの骨組み（各リンクと2件目以降の商品を省略）です。

- banner:
  - link "みどりノート"
  - navigation "メインメニュー":
    …
- navigation "パンくずリスト":
  …
- main:
  - heading "商品一覧" [level=1]
  - complementary "絞り込み":
    - heading "絞り込み" [level=2]
    …
  - region "観葉植物（3件）":
    - heading "観葉植物（3件）" [level=2]
    - list:
      - listitem:
        - article:
          - heading "ポトス" [level=3]:
            - link "ポトス"
          - paragraph: 育てやすい定番の植物です。
          - paragraph: 1,200円
      …
  - navigation "ページ送り":
    …
- contentinfo:
  - paragraph: © 2026 みどりノート

ランドマークの数は、banner 1、navigation 3、main 1、complementary 1、region 1、contentinfo 1、article は 3 でした。nav が3つあっても、それぞれに名前が付いているので区別できます。 3種類のページはいずれも、検証ツールのメッセージが0件でした。

3種類のページの骨組みの比較

divだけのページを書き直すビフォーアフター

直す前

class 名で役割を表している、div だけのページです。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>土の選び方 | みどりノート</title>
</head>
<body>
  <div class="header">
    <div class="logo"><a href="/">みどりノート</a></div>
    <div class="menu">
      <a href="/articles/">記事一覧</a>
      <a href="/about/">このサイトについて</a>
    </div>
  </div>
  <div class="content">
    <div class="post">
      <div class="title">土の選び方</div>
      <div class="block">
        <div class="subtitle">水はけを確かめる</div>
        <p>水はけのよい土を選びます。</p>
      </div>
    </div>
    <div class="sidebar">
      <div class="subtitle">新着記事</div>
      <a href="/articles/water/">観葉植物の水やりの基本</a>
    </div>
  </div>
  <div class="footer">
    <p>&copy; 2026 みどりノート</p>
  </div>
</body>
</html>

アクセシビリティツリーは次のようになりました。

- link "みどりノート":
  - /url: /
- link "記事一覧":
  - /url: /articles/
- link "このサイトについて":
  - /url: /about/
- text: 土の選び方 水はけを確かめる
- paragraph: 水はけのよい土を選びます。
- text: 新着記事
- link "観葉植物の水やりの基本":
  - /url: /articles/water/
- paragraph: © 2026 みどりノート

class 名は支援技術には伝わらないため、リンクと文字が平らに並んだ状態になります。タイトルの「土の選び方」と小見出しの「水はけを確かめる」も、区別のないひと続きの文字として出ています。ランドマークと見出しはどちらも0個です。

直した後

class 名はそのままに、タグだけを置き換えます。CSS を class で指定していれば、見た目への影響を小さく抑えながら書き直せます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>土の選び方 | みどりノート</title>
</head>
<body>
  <header class="header">
    <p class="logo"><a href="/">みどりノート</a></p>
    <nav class="menu" aria-label="メインメニュー">
      <a href="/articles/">記事一覧</a>
      <a href="/about/">このサイトについて</a>
    </nav>
  </header>
  <div class="content">
    <main>
      <article class="post">
        <h1 class="title">土の選び方</h1>
        <section class="block">
          <h2 class="subtitle">水はけを確かめる</h2>
          <p>水はけのよい土を選びます。</p>
        </section>
      </article>
    </main>
    <aside class="sidebar" aria-label="関連情報">
      <h2 class="subtitle">新着記事</h2>
      <a href="/articles/water/">観葉植物の水やりの基本</a>
    </aside>
  </div>
  <footer class="footer">
    <p><small>&copy; 2026 みどりノート</small></p>
  </footer>
</body>
</html>

- banner:
  - paragraph:
    - link "みどりノート":
      - /url: /
  - navigation "メインメニュー":
    - link "記事一覧":
      - /url: /articles/
    - link "このサイトについて":
      - /url: /about/
- main:
  - article:
    - heading "土の選び方" [level=1]
    - heading "水はけを確かめる" [level=2]
    - paragraph: 水はけのよい土を選びます。
- complementary "関連情報":
  - heading "新着記事" [level=2]
  - link "観葉植物の水やりの基本":
    - /url: /articles/water/
- contentinfo:
  - paragraph: © 2026 みどりノート

変えたところの対応表

レイアウト用の div class="content" は div のまま残している点にも注目してください。すべてを置き換えるのではなく、意味のある部分だけを置き換えます。

よくある誤用と直し方

つまずきやすい書き方を1つのファイルにまとめ、検証ツールにかけました。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>よくある書き方の確認</title>
</head>
<body>
  <header>
    <header><p>ロゴ</p></header>
    <nav><a href="/">ホーム</a></nav>
    <nav><a href="/a/">A</a></nav>
  </header>
  <main>
    <h1>見出し</h1>
    <section>
      <p>見出しのないsectionです。</p>
    </section>
    <article>
      <p>見出しのないarticleです。</p>
      <main><p>articleの中のmainです。</p></main>
    </article>
  </main>
  <main>
    <p>2つ目のmainです。</p>
  </main>
  <footer>
    <footer><p>入れ子のfooter</p></footer>
  </footer>
</body>
</html>

Nu Html Checker（vnu.jar 26.10.2）の実行結果です。

"bad.html":9.5-9.12: error: The element “header” must not appear as a descendant of the “header” element.
"bad.html":15.5-15.13: info warning: Section lacks heading. Consider using “h2”-“h6” elements to add identifying headings to all sections, or else use a “div” element instead for any cases where no heading is needed.
"bad.html":20.7-20.12: error: The “main” element must not appear as a descendant of the “article” element.
"bad.html":20.7-20.12: error: The “main” element must not appear as a descendant of the “main” element.
"bad.html":20.7-20.12: error: A document must not include more than one visible “main” element.
"bad.html":18.5-18.13: info warning: Article lacks heading. Consider using “h2”-“h6” elements to add identifying headings to all articles.
"bad.html":23.3-23.8: error: A document must not include more than one visible “main” element.
"bad.html":27.5-27.12: error: The element “footer” must not appear as a descendant of the “footer” element.

このファイルのアクセシビリティツリーでは、banner が2つ、main が3つ、contentinfo が2つと数えられました。目印が重複すると、「主な内容へ移動する」操作の行き先が1つに定まらなくなります。

そのほか、検証ツールでは見つけにくいものも挙げておきます。

検索とアクセシビリティへの効果

セマンティックなタグを使う利点を整理します。

検索順位への直接の効果について、「このタグを使えば順位が上がる」と公式に示された情報は今回確認できていません（検索エンジン側の公式ページは今回開いていません）。タグを置き換えること自体よりも、見出しと構造が整って内容が伝わりやすくなることが価値だと考えるのが、実態に近い捉え方です。

自分のページの構造を確かめる方法

検証ツールにかける

npm install vnu-jar
java -jar node_modules/vnu-jar/build/dist/vnu.jar --stdout index.html

何も表示されなければメッセージ0件です（Java が必要です。今回は OpenJDK 21 を使いました）。

アクセシビリティツリーを取り出す

Chrome の開発者ツールでは、要素を選んで「アクセシビリティ」のパネルを開くと役割を確認できます。まとめて文字で出力したい場合は、次のスクリプトが使えます（Node.js 22、Playwright 1.56.0）。

// node landmarks.js ./index.html
const { chromium } = require('playwright');
const path = require('path');

(async () => {
  const browser = await chromium.launch();
  const page = await browser.newPage();
  await page.goto('file://' + path.resolve(process.argv[2]));
  // アクセシビリティツリー（支援技術に伝わる構造）を文字で出力
  console.log(await page.locator('body').ariaSnapshot());
  // ランドマークの数を数える
  const roles = ['banner', 'navigation', 'main', 'complementary', 'contentinfo', 'region', 'article'];
  for (const role of roles) {
    console.log(role, await page.getByRole(role).count());
  }
  await browser.close();
})();

「直した後」のページに対する実行結果の末尾です。

banner 1
navigation 1
main 1
complementary 1
contentinfo 1
region 0
article 1

公開前のチェックリスト

よくある質問

Q. section と div はどう使い分けますか？ A. 見出しを付けられるテーマのまとまりなら section、レイアウトや装飾のために囲むだけなら div です。見出しのない section は検証ツールで警告になり、今回の実測でも、名前のない section は支援技術には役割なしとして伝わっていました。

Q. header は1ページに1つだけですか？ A. 何回でも使えます。body 直下の header はページ全体のヘッダー（banner）として、article や section の中の header はそのまとまりの導入部分として扱われます。今回のブログ記事の例では header を2回書いていますが、banner は1つでした。

Q. article の中に section、section の中に article、どちらが正しいですか？ A. どちらも正しい書き方です。記事の中を章に分けるなら article の中に section、新着記事の一覧のように区画の中に複数の記事を並べるなら section の中に article を置きます。

Q. セマンティックなタグを使うと検索順位は上がりますか？ A. タグを置き換えるだけで順位が上がる、という公式の情報は今回確認できていません。見出しの階層や主な内容の範囲が明確になり、読み上げソフトでの移動もしやすくなるので、読者にとって使いやすいページにする目的で取り入れるのがおすすめです。

まとめ

• main は主な内容で1ページに1つ、header と footer は導入と末尾、nav は主要なナビゲーション
• article は切り出しても成り立つ内容、section は見出しを持つまとまり。どちらでもなければ div
• 判断の目安は「見出しを付けられるか」「切り出しても成り立つか」の2つ
• header・footer は置き場所で役割が変わる。body 直下なら banner・contentinfo、article や main の中では役割なし（Chromium 141 で実測）
• section は名前を付けたときだけ region になる。nav や aside を複数置くときも aria-label で名前を付ける
• div だけのページをタグだけ置き換えると、ランドマークが0個から5個に、見出しが0個から3個に増えた
• 検証ツールとアクセシビリティツリーで確かめると、main の重複や見出しのない section に早く気づける

株式会社RJCでは、headerやmain、section、articleといったHTMLの構造化を仲間と学び合っています。こうした知識を共有しながら、日々技術を磨いています。

株式会社RJC ― SI事業・SES事業・AI駆動開発。RJCは一緒に成長を楽しめる会社です。