HTML5のmain、article、sectionはページ全体、独立した内容、章で使い分ける

HTML5のmain、article、sectionは、見た目を整えるための囲みではありません。mainはページ固有の主要部分、articleは単独でも成立する内容、sectionは一つの主題を持つ章に使います。余白、背景、横並びのために囲むだけなら、divを使います。

三つの要素を選ぶ前に、「これはページ全体の中心か」「切り出しても内容として成立するか」「一つの見出しでまとめられる章か」を順に判断してください。

mainはページに固有の主要部分を一つにまとめる

mainは、文書またはapplicationの中心となる内容を表します。共通header、global navigation、site logo、footerなど、複数ページで繰り返す部分は含めません。

会社案内のページなら、会社の説明、事業内容、所在地など、そのページを開いた目的に直接応える範囲がmainです。site共通のnavigationやcopyright表記は、その外へ置きます。

<body>
  <header>
    <p><a href="/">山川商店</a></p>
    <nav>...</nav>
  </header>

  <main role="main">
    <h1>会社案内</h1>
    <p>山川商店の事業と所在地をご案内します。</p>
  </main>

  <footer>...</footer>
</body>

一つの文書にmainを二つ以上置きません。また、mainをarticle、aside、footer、header、navの内側へ入れません。mainは小さな部品ごとの主要内容を示す要素ではなく、ページ全体の主要部分を示す要素だからです。

mainはsectioning contentではなく、文書outlineを作りません。したがって、見出し階層を作るためにmainを増やすこともできません。

articleは切り出しても一つの内容として成立させる

articleは、文書、ページ、application、siteの中で、それ自体が完結している内容を表します。blog記事、news記事、forumへの投稿、利用者のcommentなど、単独で配信または再利用できる内容が候補です。

判断しにくい場合は、その範囲だけをRSS feedや別ページへ移した場面を考えます。titleと本文を一緒に切り出しても、何について書かれた内容か分かるなら、articleとして扱えます。

<main role="main">
  <h1>お知らせ</h1>

  <article>
    <h2>11月の営業日について</h2>
    <p>11月3日は休業します。</p>
  </article>

  <article>
    <h2>冬季商品の受付を始めました</h2>
    <p>店頭と電話でご注文を受け付けます。</p>
  </article>
</main>

この例では、ページ全体のお知らせ一覧がmainであり、各お知らせが独立したarticleです。mainの中へ複数のarticleを置けます。逆に、個々の記事の中へページ全体を表すmainを置いてはいけません。

articleは入れ子にもできます。blog記事に対するcommentは、元の記事に関連しながらも、一件ごとに独立した投稿なので、外側の記事の中へ別のarticleとして置けます。ただし、入れ子にしたcommentの著者情報と、外側の記事の著者情報を混同しないようにします。

sectionは見出しを持つ一つの章に使う

sectionは、文書またはapplicationの中にある、主題ごとのまとまりを表します。章、tabごとの内容、長い説明の各節などが候補です。通常は、そのsectionの主題を示す見出しを含めます。

<article>
  <h1>初めての方へ</h1>

  <section>
    <h2>ご注文方法</h2>
    <p>商品を選び、注文formから送信してください。</p>
  </section>

  <section>
    <h2>お支払い方法</h2>
    <p>銀行振込と代金引換を利用できます。</p>
  </section>
</article>

二つのsectionは、「初めての方へ」という一つの記事を構成する章です。それぞれを単独配信する必要がなく、外側の記事の一部として読むため、articleではなくsectionを使っています。

sectionは汎用のcontainerではありません。囲み線を付ける、二列にする、JavaScriptでまとめて取得するという理由だけなら、意味を持たないdivを使います。見出しを付けるべき主題がない範囲へ、class名の代わりにsectionを置かないでください。

articleとsectionは独立性で分ける

articleとsectionの違いは、文章の長さでも、枠線の有無でもありません。外側から切り離したときに、その内容だけで一つの項目として成立するかで判断します。

一つの内容が状況によってarticleにもsectionにもなり得ます。たとえば「お支払い方法」を独立した案内ページとして公開するなら、そのページ全体はmainに入り、案内そのものをarticleとして扱う判断もできます。同じ文章を商品説明の一部へ置くなら、sectionのほうが自然です。要素名だけで固定せず、公開単位と文書内の役割を見ます。

要素を変えても見出しの内容は決まらない

articleやsectionへ置き換えただけでは、見出しの言葉、説明の順序、情報の不足は直りません。意味のある要素を使うことと、利用者が理解できる内容を書くことは別の作業です。

まず、ページの目的と、利用者が必要とする順序を決めます。その後で、主要部分をmainへ置き、独立した項目をarticle、一つの項目を構成する章をsectionへ分けます。HTML要素から内容を逆算しないでください。

見出しも、文字を大きくするためではなく、その範囲の主題を示すために使います。sectionを置いたのに見出しが思いつかないなら、本当に一つの章として分ける必要があるかを見直します。

既存ページは外側から順に直す

既存のHTMLをすべて一度に置き換える必要はありません。代表ページを一つ選び、次の順で範囲を決めます。

1. 共通header、navigation、footerを見つける
2. それらを除いたページ固有の主要部分をmainにする
3. 主要部分の中から、単独で成立する項目をarticleにする
4. 各項目の中から、見出しを持つ章をsectionにする
5. 配置やscriptの都合だけで残る囲みはdivにする

要素を変更した後は、HTMLの構造だけでなく、既存のCSS selectorとJavaScriptも確認します。divをarticleへ変えると、div.newsのようなselectorが一致しなくなる場合があります。意味を直す作業と、見た目や動作を維持する作業を分けて確認してください。

制作を外部へ依頼する場合も、「HTML5へ変更する」という作業名だけで完了としません。どの内容を独立した記事として管理するか、どの範囲を共通部品にするかは、更新を続ける側が決めます。納品時には、templateごとのmain、article、sectionの使い分けと、編集画面の入力欄がどの要素へ出力されるかを残します。

最初の一手は、会社案内、商品詳細、記事一覧のうち一ページを選び、main、article、section、divの四種類で現在の範囲を色分けすることです。要素名を変える前に、分けた理由を一行ずつ書けば、見た目だけの置換を避けられます。