main 要素主要なセクションを表す

main 要素は文書内の主要なセクションを表します。2013年 6月時点で Editor's Draft である HTML5.1、および HTML5 Editor's Draft 15 June 2013 で追加された新しい要素です。

main 要素はセクショニング・コンテンツではありません。よって文書のアウトラインに影響を与えません。

主要なセクションとは、例えばウェブサイト内の各ページで繰り返し使われるヘッダやナビゲーション、検索フォームやフッタ情報などを除いた、その文書内で主な内容となる部分を指します。ナビゲーションや検索フォームが main 要素内に含まれてはいけないわけではなく、それが文書内の主要なコンテンツかどうかが重要です。

対応するブラウザでは、文書の主要な部分にすぐに移動できるスキップリンク機能が提供されるかもしれませんし、検索エンジンのクローラーロボットなど、プログラムに対して、文書の主要な場所を明確に示すことができるようになるかもしれません。

なお、main 要素は ARIA (Accessible Rich Internet Applications) の role="main" にマッピングされますが、ユーザーエージェントがこのマッピングを実装するまでは、main 要素と role="main" を併用することが仕様書では推奨されています。

サンプルソースを見る

main 要素の仕様

カテゴリ
コンテンツモデル
この要素を使用できる文脈
  • フロー・コンテンツが期待される場所
  • ただし、articleasidefooterheadernav 各要素を先祖に持つことはできません
この要素で使用できる属性
DOM インタフェース
Uses HTMLElement

main 要素のサンプルソース

<body>
 <header>
  <h1>サンプル日記</h1>
  <p>サンプル日記です。</p>
 </header>
 <main role="main">
  <article>
   <h1>水曜日の出来事</h1>
   <p>水曜日は美術館に行きました。</p>
  </article>
  …省略…
 </main>
 <footer>文書のフッタ</footer>
</body>