main 要素主要なセクションを表す
main 要素は文書内の主要なセクションを表します。
main 要素はセクショニング・コンテンツではありません。よって文書のアウトラインに影響を与えません。
主要なセクションとは、例えばウェブサイト内の各ページで繰り返し使われるヘッダやナビゲーション、検索フォームやフッタ情報などを除いた、その文書内で主な内容となる部分を指します。ナビゲーションや検索フォームが main 要素内に含まれてはいけないわけではなく、それが文書内の主要なコンテンツかどうかが重要です。
対応するブラウザでは、文書の主要な部分にすぐに移動できるスキップリンク機能が提供されるかもしれませんし、検索エンジンのクローラーロボットなど、プログラムに対して、文書の主要な場所を明確に示すことができるようになるかもしれません。
なお、hidden 属性が指定されない限り、ひとつの文書内で複数の main 要素を使用することはできません。
main 要素の仕様
- カテゴリ
- コンテンツモデル
- この要素を使用できる文脈
- フロー・コンテンツが期待される場所
- ただし、祖先要素として、html、body、div の各要素、アクセス可能な名前（例として aria-labelledby、aria-label、または title 属性による付与）がない form 要素、およびカスタム要素のみ許容される
- この要素で使用できる属性
main 要素のサンプルソース
<body> <header> <h1>サンプル日記</h1> <p>サンプル日記です。</p> </header> <main> <article> <h1>水曜日の出来事</h1> <p>水曜日は美術館に行きました。</p> </article> …省略… </main> <footer>文書のフッタ</footer> </body>
主要ブラウザの対応
| IE11 | × |
|---|---|
| Edge（EdgeHTML） | ○ |
| Edge（Chromium） | ○ |
| Chrome | ○ |
| Firefox | ○ |
| Safari | ○ |
| iOS Safari | ○ |
| Android Chrome | ○ |