← カテゴリ一覧に戻る

セクション分け

section, article, aside, main

HTML5 のセマンティック要素を使うと、ページの構造を意味的に表現できます。 スクリーンリーダーや検索エンジンがコンテンツの役割を正しく把握できるようになります。

デモ：main / section / article / aside の組み合わせ

<body>
<main>
<section> 最新記事
<article>

Next.js 15 の新機能まとめ

<article>

TypeScript 5.5 リリースノート

<aside>

関連リンク

人気タグ

プロフィール

<main> — ページの主コンテンツ（1ページに1つ）<section> — 見出しを持つテーマ別グループ<article> — 単独で完結するコンテンツ<aside> — 補足・サイドバー

コード例

<body>
  <header>サイトヘッダー・ナビ</header>

  <!-- main: ページの主コンテンツ（1ページに1つ） -->
  <!-- role="main" が自動付与 -->
  <main>

    <!-- section: テーマ別のグループ。見出しが必要 -->
    <section>
      <h2>最新記事</h2>

      <!-- article: 単独で意味をなすコンテンツ -->
      <!-- RSSやSNSで独立して配信できるもの -->
      <article>
        <header>
          <h3>Next.js 15 の新機能まとめ</h3>
          <time datetime="2024-11-01">2024年11月1日</time>
        </header>
        <p>Next.js 15 では…</p>
      </article>

      <article>
        <h3>TypeScript 5.5 リリースノート</h3>
        <p>TypeScript 5.5 では…</p>
      </article>
    </section>

  </main>

  <!-- aside: 本文に関連するが補足的なコンテンツ -->
  <!-- role="complementary" が自動付与 -->
  <aside>
    <h2>関連リンク</h2>
    <ul>…</ul>

    <h2>人気タグ</h2>
    <ul>…</ul>
  </aside>

  <footer>サイトフッター</footer>
</body>

比較：section vs article vs aside vs div

要素意味・用途ARIA ロール見出しが必要？
<main>ページの主コンテンツ（1ページに1つ）main不要
<section>テーマ別のグループ。ページの一部分を構成region（見出しあり）推奨 ✅
<article>単独で完結するコンテンツ（記事・コメント・ウィジェット）article推奨 ✅
<aside>本文と関連するが補足的なコンテンツ（サイドバー・引用）complementary不要
<div>意味なし。スタイリング用のグループ化のみなし不要

判断フロー：どの要素を使う？

Q1

そのコンテンツは単独でRSSや別サイトに掲載できますか？

YES → <article> を使う（記事、コメント、商品カード、ウィジェット）

NO → Q2へ

Q2

そのコンテンツはページ本文と関連するが独立した補足情報ですか？

YES → <aside> を使う（サイドバー、広告、関連リンク、注釈）

NO → Q3へ

Q3

そのコンテンツは見出しを持つテーマ別のグループですか？

YES → <section> を使う

NO → <div> を使う（スタイリング目的のみ）

Tipsarticle は「自己完結」、section は「見出し必須」

  • <article> は取り出して別の場所に貼っても意味が通るコンテンツ（ブログ記事、コメント、製品カード）
  • <section> は見出し（h2〜h6）がなければ <div> で代替すべき
  • <main> は1ページに1つだけ。hidden 属性で非表示にしたものは例外
  • <aside> は <article> 内にも使える（本文中の脚注・補足情報）

🤖 AIプロンプトテンプレート

以下について、AIへの質問プロンプト例を示します。

- `<section>`・`<article>`・`<aside>`・`<div>` の使い分け基準を、具体的なコンテンツ例を挙げて教えてください。
- `<article>` 要素が「単独で完結する」とはどういう意味ですか？ブログ記事・コメント・商品カードはそれぞれ article ですか？
- `<section>` に見出し（h2〜h6）が必要とされる理由と、見出しがない場合に使うべき要素を教えてください。
- `<main>` 要素が 1 ページに 1 つしか使えない理由と、hidden 属性との組み合わせの例外について教えてください。
- `<aside>` を `<article>` の内側に入れられるのはどんなケースですか？具体例を教えてください。

⚠️ このプロンプトはあくまでたたき台です。AIの回答はモデルやバージョン、会話の文脈によって毎回異なります。意図通りに動かない場合は、条件を追記・修正してお使いください。

このサイトについて使用ライブラリ一覧☕ Buy Me a Coffee
© UI Memo