article・section・navはどう違う？セマンティックHTMLの使い分けと実装例

2026年8月13日

article・section・navの違いが分かるセマンティックHTML入門

HTMLでページを組むとき、article・section・navは見た目ではなく、中身の役割で使い分けます。

迷ったら、次の3問で判断できます。

その内容だけを切り出しても成立するか → article
見出しを付けて話題を区切れるか → section
ページ移動やページ内移動のための主要なリンク群か → nav
どれにも当てはまらず、装飾やレイアウトのためにまとめたいだけか → div

この記事では、ブログ記事と商品一覧を例に、基本の書き方、入れ子の考え方、よくある間違い、アクセシビリティ上の注意点まで整理します。

ここがポイント: タグの名前を見た目に合わせるのではなく、その部分を「独立したコンテンツ」「話題の区切り」「ナビゲーション」のどれとして伝えたいかで選びます。

前提環境とセマンティックHTMLの基本

セマンティックHTMLとは、内容の意味に合うHTML要素を使う書き方です。 特別なライブラリやビルドツールは必要ありません。

この記事の前提は次のとおりです。

対象: HTML Living Standard
確認時点: 2026年7月
実行環境: 一般的なモダンブラウザー
必要な知識: HTMLタグと属性の基礎

article・section・navはいずれも、文書を構成する「セクショニングコンテンツ」です。ブラウザー上では単なる四角い領域に見えることもありますが、要素名は支援技術や開発者にページ構造を伝える手掛かりになります。

ただし、セマンティックなタグへ置き換えるだけで、文字色や余白が目的どおりになるわけではありません。見た目はCSS、内容の意味はHTMLが担当します。

<section class="features">
  <h2>主な機能</h2>
  <p>請求書をPDFで出力できます。</p>
</section>

.features {
  padding: 24px;
  background: #f5f7fa;
}

この例では、sectionが「主な機能」という話題のまとまりを表し、CSSが余白と背景色を指定しています。

articleは単独でも意味が通る内容に使う

articleを選ぶ基準は、その内容をページから切り離して配信・再利用できるかどうかです。 名前に「記事」とありますが、ニュースやブログだけの要素ではありません。

代表的な用途には次があります。

ブログ記事やニュース記事
フォーラムの投稿
ユーザーレビューやコメント
商品一覧に並ぶ個別の商品カード
それぞれが完結したウィジェット

最小の書き方

articleには、その内容を識別できる見出しを置くのが基本です。

<article>
  <h2>雨の日でも歩きやすい靴</h2>
  <p>防水素材を使った軽量モデルです。</p>
  <a href="/products/rain-shoes">商品を見る</a>
</article>

この商品情報は一覧ページから切り出しても、何について説明しているか分かります。そのため、単なるレイアウト用のdivよりarticleが適しています。

商品一覧なら、独立した各商品を複数のarticleで表せます。

<section aria-labelledby="new-products-heading">
  <h2 id="new-products-heading">新着商品</h2>

  <article>
    <h3>軽量バックパック</h3>
    <p>容量20リットルの日帰り用モデルです。</p>
  </article>

  <article>
    <h3>折りたたみボトル</h3>
    <p>使用後は小さく丸めて収納できます。</p>
  </article>
</section>

外側のsectionは「新着商品」という話題をまとめ、内側のarticleは個別に完結する商品情報を表しています。

articleの中にsectionを置いてよい

一つの記事が複数の話題で構成されるなら、articleの中をsectionで分けられます。

<article>
  <h1>コーヒー豆の選び方</h1>

  <section>
    <h2>焙煎度で選ぶ</h2>
    <p>浅煎りは酸味を感じやすく、深煎りは苦味が強くなります。</p>
  </section>

  <section>
    <h2>抽出方法で選ぶ</h2>
    <p>使う器具に合った挽き目を確認します。</p>
  </section>
</article>

反対に、ブログ記事へ付いた各コメントを独立したarticleとして、親のarticle内に入れる構成も可能です。入れ子にした内側のarticleは、外側の内容に関連する独立コンテンツを表します。

sectionは見出しを付けられる話題のまとまりに使う

sectionは、文書内の一つのテーマや機能をまとめる汎用的な区切りです。 「この領域にはどんな見出しが付くか」を考えると判断しやすくなります。

<section>
  <h2>料金プラン</h2>
  <p>月額プランと年額プランを用意しています。</p>
</section>

<section>
  <h2>よくある質問</h2>
  <p>契約前によく寄せられる質問を紹介します。</p>
</section>

この2つはページから単独配信するコンテンツというより、ページを構成する「料金プラン」と「よくある質問」という話題です。したがってsectionが適しています。

sectionには原則として見出しを置く

MDNは、少数の例外を除き、sectionには見出しを設けることを勧めています。見出しが思い浮かばない場合、そのまとまりはsectionではなく、レイアウト用のdivかもしれません。

<!-- 改善前: 何の区切りか分からない -->
<section class="card-grid">
  <!-- カード一覧 -->
</section>

<!-- 改善案1: 話題として区切る -->
<section class="card-grid" aria-labelledby="recommended-heading">
  <h2 id="recommended-heading">おすすめ商品</h2>
  <!-- カード一覧 -->
</section>

<!-- 改善案2: レイアウト目的ならdivにする -->
<div class="card-grid">
  <!-- カード一覧 -->
</div>

sectionに見出しを置くだけで、必ずアクセシビリティ上のランドマークになるとは限りません。重要な領域を支援技術から識別できるようにする場合は、見出しとaria-labelledbyを関連付ける方法があります。

<section aria-labelledby="support-heading">
  <h2 id="support-heading">導入サポート</h2>
  <p>初期設定をオンラインで支援します。</p>
</section>

ただし、すべての小さな区切りをランドマークにすると、かえって移動候補が増えて使いにくくなります。ページの主要部分に絞ることが大切です。

navは主要な移動リンクをまとめる

navは、現在の文書内または別ページへ移動するための主要なリンク群に使います。 サイトのグローバルメニューだけでなく、目次やパンくずリストも対象になります。

<nav aria-label="メインナビゲーション">
  <ul>
    <li><a href="/">ホーム</a></li>
    <li><a href="/products">商品一覧</a></li>
    <li><a href="/support">サポート</a></li>
  </ul>
</nav>

navにはnavigationという暗黙のARIAロールがあるため、通常はrole="navigation"を重ねて書く必要はありません。ネイティブHTMLで表せる役割は、まず対応するHTML要素を使います。

ページ内目次にも使える

リンク先が別ページでなくても、ページ内の主要な移動手段ならnavを使えます。

<nav aria-labelledby="toc-heading">
  <h2 id="toc-heading">このページの目次</h2>
  <ol>
    <li><a href="#features">主な機能</a></li>
    <li><a href="#pricing">料金</a></li>
    <li><a href="#faq">よくある質問</a></li>
  </ol>
</nav>

すべてのリンクをnavで囲まない

本文中の参考リンクや、フッターに並ぶ少数の補助リンクまで、すべてnavに入れる必要はありません。navはページ内の主要なナビゲーションブロックに使います。

<p>
  詳細は<a href="/terms">利用規約</a>をご確認ください。
</p>

このリンクは文章の一部であり、独立したナビゲーション領域ではないため、navで囲みません。

navが複数ある場合は名前を付ける

一つのページに複数のnavを置くこと自体は問題ありません。ただし、支援技術の利用者が区別できるよう、それぞれに短く具体的な名前を付けます。

<nav aria-label="メインナビゲーション">
  <!-- サイト主要ページへのリンク -->
</nav>

<nav aria-label="記事内目次">
  <!-- ページ内リンク -->
</nav>

<nav aria-label="パンくずリスト">
  <!-- 現在位置までのリンク -->
</nav>

画面上に見出しがある場合は、aria-labelで同じ内容を別途書くより、aria-labelledbyでその見出しを参照すると管理しやすくなります。

3要素を組み合わせたページ例

実際のページでは、要素を一つだけ選ぶのではなく、親子関係を考えて組み合わせます。 以下は、商品レビュー記事を想定した最小例です。

<!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>
    <p><a href="/">アウトドア用品ガイド</a></p>
  </header>

  <nav aria-label="メインナビゲーション">
    <ul>
      <li><a href="/reviews">レビュー</a></li>
      <li><a href="/guides">選び方</a></li>
    </ul>
  </nav>

  <main>
    <article>
      <h1>軽量バックパックのレビュー</h1>
      <p>日帰り用途で確認したい仕様を整理します。</p>

      <nav aria-labelledby="toc-heading">
        <h2 id="toc-heading">目次</h2>
        <ol>
          <li><a href="#spec">主な仕様</a></li>
          <li><a href="#checkpoints">選ぶときの注意点</a></li>
        </ol>
      </nav>

      <section id="spec">
        <h2>主な仕様</h2>
        <p>容量、重量、ポケット数を確認します。</p>
      </section>

      <section id="checkpoints">
        <h2>選ぶときの注意点</h2>
        <p>荷物の量と背面サイズが用途に合うか確認します。</p>
      </section>
    </article>
  </main>
</body>
</html>

このコードの役割分担は明確です。

nav: サイト内や記事内を移動するリンク群
article: 単独で成立するレビュー記事
section: 記事内の「主な仕様」「選ぶときの注意点」という話題
main: ページ固有の主要コンテンツ
header: サイトや記事の導入情報

ブラウザーで開くと、見出し、文章、リンクが上から順に表示されます。CSSを加えていないため見た目は簡素ですが、文書の役割はHTMLだけで読み取れます。

よくある失敗と直し方

初心者がつまずきやすい原因は、タグを見た目や名前の印象だけで選ぶことです。 次の例を確認すると、判断基準を整理できます。

失敗1：すべての箱をsectionにする

<section class="button-area">
  <button type="submit">保存</button>
</section>

単にボタンの位置や背景を調整する箱なら、divのほうが自然です。

<div class="button-area">
  <button type="submit">保存</button>
</div>

一方、「保存方法」という見出しと説明をまとめるならsectionを選べます。判断するのはクラス名ではなく、中身の役割です。

失敗2：記事内の各章をarticleにする

<article>
  <h2>必要な道具</h2>
  <p>ドライバーとレンチを用意します。</p>
</article>

この章だけでは記事全体から独立したコンテンツとは言いにくいため、通常はsectionが適しています。

<section>
  <h2>必要な道具</h2>
  <p>ドライバーとレンチを用意します。</p>
</section>

失敗3：リンクが一つあるだけでnavを使う

navはリンクを置くための万能な箱ではありません。購入ボタンや本文中の一つのリンクなら、a要素だけで十分です。

失敗4：見出しレベルを要素の入れ子任せにする

sectionやarticleの中なら、毎回h1を使ってよいという古い説明には注意が必要です。現在は、ページ全体を説明するh1を原則一つにし、h2、h3と階層を飛ばさずに使う方法が分かりやすく堅実です。

<h1>サービス紹介</h1>

<section>
  <h2>主な機能</h2>

  <section>
    <h3>CSV出力</h3>
  </section>
</section>

HTML要素の入れ子と見出しレベルは関連しますが、ブラウザーが自動的に理想の見出し階層を作ってくれると考えず、コード上で明示します。

失敗5：SEO効果だけを目的に置き換える

セマンティックHTMLは、ページ構造を機械や人に伝えやすくするものです。しかし、divをarticleやsectionへ置き換えただけで検索順位が上がる、と断定できるものではありません。

まず優先すべきなのは、次の状態です。

見出しだけを読んでも内容の順序が分かる
独立したコンテンツの範囲が明確である
主要なナビゲーションを識別できる
CSSを外してもソース順が自然である

divやほかの要素との使い分け

意味に合う専用要素がなければ、無理にセマンティックなタグを当てずdivを使います。 divは間違った要素ではなく、意味を追加しない汎用コンテナーです。

使い分けを短く整理すると、次のようになります。

ページ固有の主要部分 → main
単独でも成立する投稿やカード → article
見出しを持つ話題の区切り → section
主要な移動リンク群 → nav
本筋を補足する関連情報 → aside
導入情報や見出しのまとまり → header
著者情報や関連リンクなど末尾の情報 → footer
意味を持たない配置・装飾用の箱 → div

articleとsectionで迷ったときは、次の順に確認してください。

その内容をRSS、一覧カード、別ページなどへ単独で移しても成立するか
成立するならarticleを検討する
単独では成立しないが、見出し付きの話題として区切れるならsectionを検討する
どちらでもなく、CSSやJavaScriptの都合で囲むだけならdivを使う

実装後の確認チェックリスト

正解をタグ名だけで判定せず、見出し・ソース順・支援技術から見た区別まで確認します。 最初は次のチェックで十分です。

articleの内容は単独で読んでも意味が通るか
sectionには内容を説明する見出しがあるか
navには主要な移動リンクがまとまっているか
複数のnavに区別できる名前が付いているか
見出しがh1からh3へ突然飛んでいないか
レイアウト目的だけの箱にdivを使えているか
CSSを無効にしても、本文を自然な順序で読めるか
ブラウザーの開発者ツールでアクセシビリティツリーを確認したか

最初からすべてのdivを置き換える必要はありません。まず、独立したコンテンツ、見出し付きの主要な区切り、主要ナビゲーションの3か所を見つけてください。そのうえでarticle・section・navを割り当てると、意味のないタグ置換を避けながらページ構造を改善できます。

参照リンク

よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！