main 要素(<main>)は、ドキュメントやアプリケーションの body 要素 (<body>) の主な内容を表します。主な内容は中心的なトピックの主なコンテンツやアプリケーションの中心的な機能に直接関連する内容で構成されます。

理にかなうのであれば、同じ文書内に複数の <main> を含めることができます。例えば複数の記事 (それぞれの記事が <article> 要素内にある) を提供するページで、それぞれの記事に追加の素材 (編集用ツールバーや広告など) があれば、特定の記事の主要なコンテンツを識別するために各記事内へ <main> 要素を置くことが理にかなっています。

コンテンツカテゴリー フローコンテンツ、パルパブルコンテンツ
許可された内容 フローコンテンツ
タグの省略 不可。開始タグと終了タグの両方が必須。
許可された親要素 フローコンテンツ を受け入れるすべての要素 (WHATWG)。ただし W3C 仕様では、<main> 要素を <article>, <aside>, <footer>, <header>, <nav> 要素の子孫要素として配置してはなりません。
許可された ARIA ロール 既定で <main> 要素に main ロールを適用します。また、presentation ロールも許可されます。
DOM インターフェイス HTMLElement

属性

この要素は、すべての要素が持つ グローバル属性 以外の属性を持ちません。

使用上の注意

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

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

WHATWG 仕様と W3C 仕様の違い

<main> 要素の定義は、WHATWG の living standard (MDN で慣例として使用します) と W3C 仕様 で大きく異なります。前出の説明と比べると、2 つの仕様の間に以下の違いがあります:

  • WHATWG の HTML living standard はページ内で複数の <main> 要素を認めていますが、W3C の仕様 は、hidden 属性を使用してひとつを除くすべてを隠さない限り認められません。
  • WHATWG 仕様は フローコンテンツ が許可されているあらゆる場所で <main> を使用できます。一方 W3C の HTML 仕様では、<article><aside><footer><header><nav> の子孫として <main> を配置できません。

これは小さな違いに見えますが <main> 要素は機能レベルでとても単純ですので、これらを覚えておかなければ、その違いが重要な結果をもたらす可能性があります。

<!-- other content -->

<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>

<!-- other content -->

仕様

仕様書 策定情報 コメント
HTML Living Standard
<main> の定義
現行の標準 ドキュメント内で <main> を複数使用することの制限や <article> 要素の子孫の制限を削除。
HTML 5.1
<main> の定義
勧告 HTML5 から変更なし
HTML5
<main> の定義
勧告 初期定義

ブラウザー実装状況

<main> は広くサポートされています。Internet Explorer 11 およびそれ以前については、アクセシブルにするために <main> 要素に ARIA の "main" ロールを追加することが提案されています (JAWS のようなスクリーンリーダーを古い Internet Explorer と組み合わせると、role 属性を含む <main> 要素のセマンティックな意味を理解できます)。

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

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本サポート261221 無し167
機能AndroidChrome for AndroidEdge mobileFirefox for AndroidIE mobileOpera AndroidiOS Safari
基本サポート (有り) (有り)1221 無し (有り)7.1

関連情報

ドキュメントのタグと貢献者

 このページの貢献者: yyss, harry0000, tk1024
 最終更新者: yyss,