この内容は古いバージョンです。最新バージョンを表示するには、戻るボタンを押してください。
バージョン:8
ページ更新者:atom
更新日時:2026-06-11 07:12:00

タイトル: セクション
SEOタイトル: HTML5 セクショニング要素完全ガイド（header / nav / main / article / section / aside / footer）

この記事の要点
  • セクショニング要素: <header> / <nav> / <main> / <section> / <article> / <aside> / <footer>
  • <div> の代わりに使うことで SEO / アクセシビリティ / 読みやすさが向上
  • <article> は独立して成立する単位（記事 / コメント / カード）
  • <section> はテーマでまとまった範囲。直下に <h1>～<h6> を置く
  • <main> はページに 1 つだけ、ページ固有メインコンテンツ
  • 補足: <figure> / <figcaption> / <address>、ARIA: role="banner" / "navigation"

HTML5 セクショニング要素一覧

要素用途使う場所
<header>導入部・見出し群ページ冒頭、article/section の冒頭
<nav>主要ナビゲーショングローバルナビ / サイドメニュー
<main>ページのメインコンテンツページに 1 つだけ
<article>独立した記事ブログ記事 / 商品カード / コメント
<section>テーマでまとまった範囲章 / セクション
<aside>補足・サイドバー関連リンク / 広告 / 注釈
<footer>末尾情報ページ末尾、article/section の末尾
<figure> / <figcaption>図版とキャプション画像 + 説明、コードブロック
<address>連絡先情報記事の著者連絡先、会社情報

モダンな HTML 構造例

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>HTML5 セクショニング完全ガイド | CWiki</title>
</head>
<body>

<header>
    <h1>CWiki</h1>
    <nav aria-label="グローバルナビゲーション">
        <ul>
            <li><a href="/">トップ</a></li>
            <li><a href="/category/html">HTML</a></li>
            <li><a href="/category/css">CSS</a></li>
        </ul>
    </nav>
</header>

<main>
    <article>
        <header>
            <h1>HTML5 セクショニング要素完全ガイド</h1>
            <p>投稿日: <time datetime="2026-06-10">2026年6月10日</time></p>
        </header>

        <section>
            <h2>セクショニング要素とは</h2>
            <p>...</p>
        </section>

        <section>
            <h2>用途別の使い分け</h2>
            <p>...</p>
        </section>

        <footer>
            <address>著者: <a href="/user/taro">taro</a></address>
        </footer>
    </article>

    <aside aria-label="関連記事">
        <h2>関連記事</h2>
        <ul>
            <li><a href="/article/123">CSS 文法ガイド</a></li>
        </ul>
    </aside>
</main>

<footer>
    <small>&copy; 2026 CWiki</small>
</footer>

</body>
</html>

article vs section の使い分け

「どちらを使うべきか」が一番悩むポイント:

  • <article>: 独立して RSS / 別ページにそのまま転載できるもの → ブログ記事、ニュース記事、コメント 1 つ、商品カード
  • <section>: 本文の章立てのように、ページの一部としてのみ意味を持つもの → 「概要」「使い方」「FAQ」 等の章
<!-- ✅ 記事ページ -->
<main>
    <article>
        <h1>記事タイトル</h1>

        <section>
            <h2>概要</h2>
            <p>...</p>
        </section>

        <section>
            <h2>使い方</h2>
            <p>...</p>
        </section>
    </article>
</main>

<!-- ✅ 一覧ページ（記事カード） -->
<main>
    <h1>記事一覧</h1>

    <article class="card">
        <h2><a href="/article/1">記事 1</a></h2>
        <p>抜粋...</p>
    </article>

    <article class="card">
        <h2><a href="/article/2">記事 2</a></h2>
        <p>抜粋...</p>
    </article>
</main>

main は 1 ページに 1 つだけ

<main> はページの固有メインコンテンツを示します。サイト全体で繰り返される header / nav / footer は含めない。

HTML 仕様では「visible（隠れていない） <main> は 1 つだけ」と定義されています。タブ UI など複数の main は hidden 属性で非表示にしてあるものなら許容。

nav はナビゲーションだけ

パンくず・ページネーション・グローバルナビ・サイト内検索のリンク群など、主要なナビに使います。footer 内の細々したリンクや「関連記事」は <nav> でなくてよい。

<nav aria-label="パンくず">
    <ol>
        <li><a href="/">トップ</a></li>
        <li><a href="/category/html">HTML</a></li>
        <li aria-current="page">セクション</li>
    </ol>
</nav>

<nav aria-label="ページネーション">
    <a href="?page=1">1</a>
    <a href="?page=2" aria-current="page">2</a>
    <a href="?page=3">3</a>
</nav>

figure / figcaption: 図版とキャプション

<figure>
    <img src="/images/diagram.png" alt="ネットワーク構成図">
    <figcaption>図1: 3 層ネットワーク構成</figcaption>
</figure>

<figure>
    <pre><code class="language-js">
const x = 1 + 2;
console.log(x);
    </code></pre>
    <figcaption>サンプルコード: 基本的な加算</figcaption>
</figure>

Outline Algorithm（ドキュメントアウトライン）

HTML5 のアウトラインアルゴリズムは「セクショニング要素ごとに見出しレベルを暗黙にリセットする」仕様でしたが、2022 年に HTML 仕様から削除されました。実装ブラウザもなく、不採用。

そのため、見出しは常に明示的なレベル（<h1>～<h6>）を使い分けてください:

<!-- ❌ 旧: section ごとに h1 を使う -->
<section>
    <h1>章タイトル</h1>
    <section>
        <h1>サブセクション</h1>
    </section>
</section>

<!-- ✅ 現代: レベルを明示 -->
<section>
    <h2>章タイトル</h2>
    <section>
        <h3>サブセクション</h3>
    </section>
</section>

ARIA ランドマークロール

各セクショニング要素は暗黙の ARIA ランドマークを持ちます。スクリーンリーダーがランドマーク間をジャンプできます。

HTML 要素暗黙の role
<header>（body 直下）banner
<nav>navigation
<main>main
<aside>complementary
<footer>（body 直下）contentinfo
<form> + aria-labelform
<section> + aria-labelregion

同じ役割の要素が複数ある場合は aria-label や aria-labelledby で区別:

<nav aria-label="グローバル">...</nav>
<nav aria-label="フッター">...</nav>

<aside aria-label="関連記事">...</aside>
<aside aria-label="広告">...</aside>

Skip Link（スキップリンク）

キーボードユーザ向けに、ヘッダー / ナビをスキップして本文に飛ぶリンクを置きます:

<body>
    <a href="#main" class="skip-link">本文へスキップ</a>

    <header>...</header>
    <nav>...</nav>

    <main id="main" tabindex="-1">
        <!-- 本文 -->
    </main>
</body>

<style>
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: #000;
    color: #fff;
    padding: 8px;
    z-index: 9999;
}
.skip-link:focus {
    top: 0;  /* フォーカス時に表示 */
}
</style>

SEO 効果

  • Google は <article> 内のテキストを記事本文と認識しやすい
  • <nav> / <footer> はボイラープレートとして除外しやすい
  • 構造化データ（JSON-LD Article / BreadcrumbList 等）と併用で効果倍増
  • 音声 UI（Google アシスタント等）でも構造から本文抽出

FAQ

Q: <div> を全部 <section> に置き換えていい？
A: ダメです。意味のあるまとまりにのみ section/article。単にスタイル目的なら div のまま。

Q: <article> をネストできる？
A: 可能です。ブログ記事 article の中に、コメント 1 件ごとの article を入れる、等。

Q: <header> をネストできる？
A: 可能です。body 直下の header（ページ全体）と、article 内の header（記事の導入）は別物です。