◀ 2.

HTML5のセクショニング要素｜header・nav・main・article・section

▶
編集
この記事の要点
  • セクショニング要素: <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>© 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（記事の導入）は別物です。

編集
Post Share
子ページ
  1. section要素
  2. article要素
  3. aside要素
  4. nav要素
同階層のページ
  1. 構造
  2. セクション
  3. テキスト・フォント
  4. リスト
  5. リンク・ボタン
  6. ルビ
  7. 画像
  8. オブジェクト
  9. 動画・音声
  10. フォーム要素
  11. その他の要素
2026-06-11 07:12:00 atom 249

人気ページ

最近更新/作成されたページ