<main>

HTML の <main> 要素は、文書の <body> の主要な内容を表します。主要な内容とは、文書の中心的な主題、またはアプリケーションの中心的な機能に直接関連または拡張した内容の範囲のことです。

試してみましょう

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

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

属性

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

使用上の注意

<main> 要素の内容は、文書で固有のものにしてください。この内容はサイドバー、ナビゲーションリンク、著作権表示、サイトロゴ、検索フォームのような、文書のセットや文書のセクションにまたがって繰り返されるものを除くべきです。(もちろん、主な内容が検索フォームでない限り)

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

例

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

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

スキップナビゲーション

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

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

<body>
  <a href="#main-content">Skip to main content</a>

  <!-- navigation and header content -->

  <main id="main-content">
    <!-- main page content -->
  </main>
</body>

リーダーモード

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

仕様書

Specification
HTML Standard
# the-main-element

ブラウザーの互換性

BCD tables only load in the browser

<main> は広く対応されています。 Internet Explorer 11 およびそれ以前については、アクセシビリティのために ARIA の "main" ロールを <main> 要素に追加することが提案されています (JAWS のような、古い Internet Explorer との組み合わせで使用する読み上げソフトは、 <main> 要素の意味論的な意味を role 属性を含めることで理解できるでしょう)。

<main role="main">
  ...
</main>

関連情報