main要素は共通headerとfooterを外しpage固有の本文を囲む

HTMLのmain要素には、そのpageで初めて読む中心内容を入れます。site logo、全pageに出るnavigation、footer、sidebarのような共通部分まで囲む要素ではありません。見た目の幅ではなく、読者がそのpageを開いた理由に答える内容かどうかで範囲を決めます。

W3Cのmain要素の仕様は、mainをdocumentまたはapplicationの中心主題に直接関係する内容と定義し、site navigation、copyright、logo、banner、search formのように複数pageで繰り返す内容を除くとしています。同じdocumentにmain要素を二つ以上置かないことも定めています。WAI-ARIA 1.0でも、main roleはdocumentの中心内容を表すlandmarkとされ、支援技術が主要部分へ移動する手掛かりになります。WAI-ARIA 1.0のRoles Modelは、一つのdocumentまたはapplicationでmain roleを付ける要素を一つ以下にするよう勧めています。

この区別は、SEOのために要素名を増やす作業ではありません。URLごとに何を読ませるpageかを、HTMLの構造でも分かるようにする作業です。見た目の大きな白い領域をmainにするのではなく、その領域の中で読者が判断する情報を選びます。共通headerが画面の半分を占めていても、page固有の本文がmainの中心になります。

WordPress themeでは、header、sidebar、footerが別fileに分かれているため、どこでmainを開き、どこで閉じるかが曖昧になりやすいです。トップpage、投稿、固定page、検索結果、404では本文の形が違います。共通のheaderからmainを開き、個別templateでもう一つ開くと、目で見ても分からない二重の構造になります。代表的なtemplateを実際に表示し、一つずつ開始と終了を確認します。

main要素へ入れる内容をpage単位で決める

会社siteなら、サービスの説明、会社案内、記事本文、問い合わせformの説明のように、URLごとに変わる内容がmainの候補です。header内のlogoや共通menuは、どのpageでも同じ案内なので、本文の中心内容ではありません。

たとえば、記事pageならmainの中に記事title、本文、著者の補足、本文に直接関係する関連記事を置けます。右側のsidebarへ最新記事一覧や共通bannerを出す場合は、本文と同じ意味にしないため、mainの外へ置きます。

関連情報は、常にmainの外へ出すものではありません。記事で紹介した手順の補足、同じ主題を説明する関連記事、問い合わせを判断するための注意事項のように、本文を読んだ人がそのpageで必要とする情報なら、中心内容の一部になることがあります。一方、すべてのpageに同じ順で出るランキング、広告banner、SNSの一覧は、page固有の答えではないことが多いため、共通partsとして分けます。

会社案内pageでは、所在地、連絡先、事業内容、採用情報がすべてmainの候補になります。そのURLを開く人が何を知りたいかで、中心内容を決めます。問い合わせformだけのpageなら、formの前にある説明、個人情報の扱い、送信後の案内も、問い合わせを完了するための内容として考えます。formを画面の下へ置いたからといって、説明が共通partsになるわけではありません。

layoutの箱を増やしてもmain要素を増やさない

二column layoutでは、本文、sidebar、footerをそれぞれ別のdivで囲みたくなります。しかし、mainはlayoutを作るための箱ではありません。page全体で一つだけにし、本文の範囲を示します。

<body>
  <header>
    <a href="/">会社名</a>
    <nav>...</nav>
  </header>

  <main>
    <article>
      <h1>サービスの内容</h1>
      <p>...</p>
    </article>
  </main>

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

mainの中にarticleを置くことは、page全体の中心内容と、独立して読める記事を分けるために役立ちます。一方で、header、nav、footer、asideの中へmainを入れる形は、main要素の仕様に合いません。WordPress themeでは、header.php、single post用template、sidebar.php、footer.phpをまたいで出力されるため、templateごとにmainの開始と終了が一対になっているか確認します。

二column layoutでよく起きるのは、CSSの幅を決めるcontainerと、HTMLの意味を示す要素を同じにしてしまうことです。全体の横幅を決めるdivは、header、本文、sidebarを一緒に含めることがあります。そのcontainerがあるからといって、mainまで同じ範囲にする必要はありません。layout用のclassは残し、中心内容だけをmainで示せば、見た目のCSSを大きく変えずに構造を整理できます。

template partを使うthemeでは、本文用のpartがmainを出しているのか、呼び出すtemplateが出しているのかを一つに決めます。両方が出せる状態にすると、別の人がpartを再利用したときに二重になります。どのfileがmainを担当するかをコメントや担当者向けの記録へ残し、archiveやsearchなど本文の形が違うpageでも同じ方針を使います。

pluginが独自のcontentを挿入する場合も、pageにmainを追加しないか確認します。formやshopの表示を追加するpluginは、通常の本文へ内容を足すことがあります。theme側で中心内容を一つ決めているなら、挿入されるcontentがその中に収まるか、別のlandmarkを増やさないかを公開画面で見ます。pluginのcodeを読めない場合でも、出力されたHTMLでmainの数を確認できます。

共通partsを本文へ混ぜる前に確認する

headerやfooterをmainへ含めても、画面の見た目はすぐには変わりません。しかし、pageの中心内容を判別する手掛かりが曖昧になります。最初に一つのURLを開き、次の順で確認します。

1. そのURLを開く理由になる見出しと説明を選ぶ。
2. 他のpageにも同じ形で出るlogo、menu、footerを外す。
3. 残った中心内容を一つのmainで囲む。
4. sidebarが本文を補うか、共通の案内かを決める。
5. templateを替えてもmainが二重にならないか確認する。

本文の途中に外部serviceの埋込や広告枠がある場合も、本文を理解するためのものか、site共通の枠かを分けます。外部serviceのコードをそのまま貼ることと、pageの構造を決めることは別の作業です。まず中心内容の範囲を決めてから、必要なpartsだけを配置します。

確認は投稿pageだけで終えません。トップpage、固定page、archive、search結果、404のように、利用者が別の入口から入るpageを開きます。search結果なら、検索語に対する結果一覧と見出しが中心内容です。404なら、見つからなかったことの説明と次に進むlinkが中心になります。画面の内容が少ないpageでも、共通headerやfooterをmainに入れて数を合わせようとしません。

支援技術の使い方をすべて把握していなくても、中心内容を一つにする判断はできます。繰り返し出るlogo、menu、footerを外し、そのURLで初めて読む情報を選びます。構造を直した後は、titleとh1、本文、問い合わせや検索の操作がページの目的に合っているかを確認します。mainを入れたことだけで、内容の不足や操作の不便さが解決するわけではありません。

外部の制作者へtheme修正を頼むなら、どのtemplateでmainを出すか、sidebarをどこへ置くか、確認するURLを指定します。「HTML5化する」とだけ頼むと、見た目を変えずに要素名だけを置き換え、開始と終了がずれる場合があります。修正後には、変更したfile、確認したtemplate、mainが一つであることを受け取ります。codeを任せても、pageの中心内容を判断する責任はsite側に残ります。

最初に確認するURLは、もっとも多く読まれる記事かservice pageです。header、footer、sidebarを外し、そのURLで利用者が読む本文と次の操作を一つのmainに入れます。その方針をほかのtemplateへ広げれば、見た目の箱を増やさずに構造をそろえられます。