HTML `<main>` メイン要素

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.

<main> は HTML の要素で、文書の <body> の主要なコンテンツを表します。メインコンテンツ領域は、文書の中心的なトピック、またはアプリケーションの中心的な機能に直接関連する、または展開されたコンテンツで構成されます。

試してみましょう

<header>ヤモリの豆知識</header>

<main>
  <p>
    ヤモリは、一般的に小型で、主に夜行性のトカゲの一種です。南極大陸を除くすべての大陸で得られます。
  </p>

  <p>
    多くのヤモリの種は、壁や窓さえも登ることができる粘着性の足裏を保有しています。
  </p>
</main>

header {
  font:
    bold 7vw "Arial",
    sans-serif;
}

文書には hidden 属性が指定されていない <main> 要素を 2 つ以上置くことはできません。

属性

この要素にはグローバル属性のみがあります。

使用上の注意

<main> 要素のコンテンツは、文書で固有のものにしてください。サイドバー、ナビゲーションリンク、著作権情報、サイトロゴ、検索フォームなど、一連の文書や文書の節全体で繰り返し表示されるコンテンツは、検索フォームがそのページの主な機能である場合を除き、記載しないでください。

<main> は文書のアウトラインに寄与しません。すなわち <body> や h2 などの見出しとは異なり、<main> はページの構造の DOM の概念に影響を与えません。これは情報を与えるだけです。

アクセシビリティの考慮

ランドマーク

<main> 要素は main ランドマークロールのように動作します。ランドマークは、文書の長いセクションをすばやく識別して移動するための支援技術として使用することができます。古いブラウザーの互換性の確認ができない限り、 <main> を role="main" の宣言付きで使用するべきです。

スキップナビゲーション

スキップナビゲーションは、"skipnav" とも呼ばれますが、支援技術のユーザーが繰り返されるコンテンツ (メインナビゲーション、情報バナー、等) の大きなセクションをすばやく飛ばすことができる技法です。これによって、ユーザーがページのメインコンテンツをより早くアクセスすることができます。

id 属性を追加することで、 <main> 要素がスキップナビゲーションリンクのターゲットになることができます。

html

<body>
  <a href="#main-content">メインコンテンツまでスキップ</a>

  <!-- ナビゲーションとヘッダーコンテンツ -->

  <main id="main-content">
    <!-- ページのメインコンテンツ -->
  </main>
</body>

WebAIM: "Skip Navigation" Links

リーダーモード

ブラウザーのリーダーモードでは、コンテンツをリーダーに特化したビューに変換するときに、見出しやコンテンツ区分要素と同様に <main> 要素の存在を探します。

Building websites for Safari Reader Mode and other reading apps.

例

html

<!-- 他のコンテンツ -->

<main>
  <h1>Apples</h1>
  <p>The apple is the pomaceous fruit of the apple tree.</p>

  <article>
    <h2>Red Delicious</h2>
    <p>
      These bright red apples are the most common found in many supermarkets.
    </p>
    <p>…</p>
    <p>…</p>
  </article>

  <article>
    <h2>Granny Smith</h2>
    <p>These juicy, green apples make a great filling for apple pies.</p>
    <p>…</p>
    <p>…</p>
  </article>
</main>

<!-- 他のコンテンツ -->

結果

技術的概要

コンテンツカテゴリー	フローコンテンツ, 知覚可能コンテンツ
許可されているコンテンツ	フローコンテンツ
タグの省略	不可。開始タグと終了タグの両方が必須。
許可されている親要素	フローコンテンツを受け入れる場所、但し階層的に正しい `main` 要素であること。
暗黙の ARIA ロール	`main`
許可されている ARIA ロール	許可されている `role` なし
DOM インターフェイス	`HTMLElement`