[17-2] セクショニングの article要素、aside要素、section要素

HTML5 からの新要素 <article> <aside> <section> の使い方を見てみましょう。

これらの要素と <nav>要素は「セクショニング・コンテント」というカテゴリーに属しています。（ <nav>要素については [17-4] で解説します。）
（カテゴリーについては [37] HTML5要素の「カテゴリー」を見てみよう をご覧ください）

「セクショニング・コンテント」に属する要素は「アウトライン」を持ちます。
ここで言うアウトラインとは、概要・あらすじって意味ではなく、文字通り「外郭」みたいなかんじ。ひとまとまりの関連性のコンテナ的なものになるという意味です。

<div>要素で囲むだけよりも「まとまりとしての意味を持つ」ことになります。
HTML文書の中で意味があるブロックを作るために使わなければなりません。
CSS を指定するためだけで <article> <aside> <section> を使っちゃダメです。

参考：HTML 5.1 2nd Edition: 4.3. Sections

使用する要素	<article> 〜 </article> <aside> 〜 </aside> <section> 〜 </section>

本日のINDEX

1. 内容が完結しているセクションを表す <article>要素
   1. メインコンテンツなら <main>要素のほうがいい
   2. <article>要素は「入れ子」にしてもOK
2. 関連してるけどメインではないなら <aside>要素
3. 文書の「章・節・項」を表す <section>要素
   1. スタイル指定のためなら <div>要素で

● 2017年10月： [17-1] 〜 [17-6] は本文を大幅に書き換えました。
初回投稿時の 2011年は HTML5はまだ策定中で、ルールが現仕様と若干異なっていました。それを今回 HTML5.1 の勧告内容に沿って修正しています。
それに伴い [17-1] 〜 [17-6] は、タイトルや内容を変更しているものもあります。ご了承ください。

内容が完結しているセクションを表す <article>要素

まずは <article>要素から。
「article（アーティクル）」とは「（新聞・雑誌などの）1記事」と言う意味。
品物を「◯品、◯点」と数える単位でも使います（ an article of clothing = 衣料品一点）

<article>要素は、内容が完結しているセクションに使います。
単独で再配布・再利用しても意味がわかる（内容が完結している）部分です。

例えば、
・ページの独立した1つのコンテンツ部分
・ブログだったら１つの記事
・ブログのコメントと それに対する返信コメントのセット
などに <article>要素 を使います。

下記は W3C HTML5.1 仕様書 に記載されていた例を簡潔にしたもの。
ブログのページですが、ブログ記事とコメントが1つの <article>で囲まれています。

<article>
  <header>
    <h2>記事のタイトル</h2>
    <p><time datetime="">3 days ago</time></p>
  </header>

   <p>記事の本文</p>

  <section>
    <h3>コメント</h3>
    <ol>
     <li id="c1">
        <p>Posted by: 
        <span itemprop="name">George Washington</span>
        </p>
        <p><time datetime="">15 minutes ago</time></p>
        <p>コメント文1</p>
     </li>
     <li id="c2”>
        <p>Posted by: 
        <span itemprop="name">George Hammond</span>
        </p>
        <p><time datetime="">5 minutes ago</time></p>
        <p>コメント文2</p>
     </li>
   </ol>
  </section>
</article>

コメントを整理するために <ol>（番号付きリスト）を使っています。
また、コメント部分全体を <section>要素で囲んで、記事本編のサブ的なセクションにしています。

記事のタイトルが <h2>、コメント部分のタイトルが <h3> なので、1つレベルが下のセクション（サブ）になるんです。（これは [17-3] で説明します）

メインコンテンツなら <main>要素のほうがいい

ページの「メイン コンテンツ」とは、各ページ共通のもの（サイトタイトル、グローバルナビ、バナー、広告、検索フォーム、サイトのフッターなど）を除外した、そのページ固有の部分です。
「メイン コンテンツ」が ひとつの自己完結な構成になるなら、 <article>でなく <main>要素を使うべきだそうです。（ <main>要素については [17-6] で解説します。）

<article>要素は「入れ子」にしてもOK

<article>要素は 1ページに何度使ってもOK。入れ子にすることもできます。

<article>要素を入れ子にする場合は、内側の <article>要素は、外側の <article>のコンテンツに関連した内容を表します。
例えばブログだったら、そのブログの記事の <article>要素の中に、ネストされた <article>要素として、コメントを表示するなどで使えます。

関連してるけどメインではないなら <aside>要素

次は <aside>要素。「aside（アサイド）」は「それは さておき」とか「余談・挿話」といった意味の単語です。

<aside>要素は、その前後のセクションに関連はしているけど、そこに含まれない、別物として扱えるセクションを表します。

例えば、
・サイドバー
・本編の用語説明
・補足記事
・コラム
・広告
・ページ内ナビゲーション
などに <aside>要素が使えます。

下記も W3C HTML5.1 仕様書 に記載されていた例。
ヨーロッパに関してのもっと長いニュースでの、スイスの背景事情を <aside>で示した例だそうです。

<aside>
  <h2>スイス（Switzerland）</h2>
  <p>スイスは地理的にはヨーロッパの真ん中にある国で、
  多くのヨーロッパの条約には加盟していますが、EU には参加していません。</p>
</aside>

文書の「章・節・項」を表す <section>要素

最後は <section>要素。
「section（セクション）」は「部分」といった意味ですが、ここでは書物（小説、論文、条約など）の「節」の意味の方でしょう。

ちなみに英語で、章は chapter（チャプター）、節は section（セクション）、項は clause（クローズ）または subsection（サブセクション）または item（アイテム）など。
節が clause で 項が section だったり、節以降は種類（小説か条約かなど）によって異なります。

<section>要素は、見出し要素 <h1> 〜 <h6> を中に入れてレベルを明示します。
大きいレベルは「章」、次のレベルなら「節」、その次は「項」なんて具合で、レベルを切り替えることができます。

下記も W3C HTML5.1 仕様書 に記載されていた例。

<article>
  <header>
    <h2>Apples リンゴ</h2>
    <p>とっても美味しい果物！</p>
  </header>

  <p>リンゴはリンゴ樹になる仁果類です。</p>

  <section aria-label="Red apples.">
    <h3>レッド・デリシャス</h3>
    <p>この鮮やかな赤いリンゴは、もっとも一般的で、
    多くのスーパーで見かけます。</p>
  </section>
  <section aria-label="Green apples.">
    <h3>グラニー・スミス</h3>
    <p>これらのジューシーな緑のリンゴは、リンゴのパイの素晴らしい
    フィリングになります。</p>
  </section>
</article>

全体の <article>は <h2>で、<section>（2箇所とも）は <h3>なので、1つ下のレベルなのが HTML文書的にも明示されています。
これは、次回 [17-3] セクションと見出しのルール で詳しく説明します。

また、このサンプルでは <section>要素には「aria-label属性」が指定されています。
「aria-label属性」は、WAI-ARIA属性 と言われるものの１つで、値のテキストはスクリーンリーダーで読み上げられます。アクセシビリティのための指定です。

「aria-label属性」については、
（ちょっとメモ）テーブルをレスポンシブ対応させるCSS の中で触れていますのでご覧ください。

スタイル指定のためなら <div>要素で

<section>要素は「セクショニング・コンテント」に属するので「アウトライン（意味のあるブロック）」を作ります。
このため、単なる CSSの指定のために <section>要素で囲むと意味的におかしくなる場合もあります。
単に CSSのためなら <section> でなく <div>要素を使うべきです。

次回予告

次回は「セクショニング・コンテント要素と見出しのルール」について。

セクショニング・コンテントに属する要素と 見出し要素（h1〜h6）の組み合わせによって、各セクションの階層を示します。