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

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

コンテンツカテゴリ フローコンテンツ, 知覚可能コンテンツ
許可されている内容 フローコンテンツ
タグの省略 不可。開始タグと終了タグの両方が必須。
許可されている親要素 フローコンテンツを受け入れる場所、但し階層的に正しい main 要素であること
許可されている ARIA ロール 既定で <main> 要素に main ロールを適用します。また、presentation ロールも許可されます。
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 要素の存在を探します。

仕様書

仕様書 状態 備考
HTML Living Standard
<main> の定義
現行の標準  
HTML 5.1
<main> の定義
勧告 HTML5 から変更なし
HTML5
<main> の定義
勧告 初回定義

ブラウザーの対応

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

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

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応Chrome 完全対応 26Edge 完全対応 12Firefox 完全対応 21IE 未対応 なしOpera 完全対応 16Safari 完全対応 7WebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 12Firefox Android 完全対応 21Opera Android 完全対応 ありSafari iOS 完全対応 7.1Samsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応
未対応  
未対応

関連情報

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

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