Widely available すべての主要ブラウザで対応済み。安心して使用可能。

<main>

<main> は HTML の要素で、文書の <body> の主要なコンテンツを表します。メインコンテンツ領域は、文書の中心的なトピック、またはアプリケーションの中心的な機能に直接関連する、または展開されたコンテンツで構成されます。

セクショニング

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
<main>
26
12
21
7
26
7
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

HTML 
<body>
  <header>Header</header>
  <main>
    <h1>Main Content</h1>
    <p>Page-specific content goes here.</p>
  </main>
  <footer>Footer</footer>
</body>

ライブデモ

Main page content

Main element in document. Maincontent.pe-j to 1 onlyusage.

プレビュー全画面表示

Skip navigation and. combination

Main to id skipnavigation. linkdestination to settings.

プレビュー全画面表示

layoutinside. main

sidebar withlayout in main usingstructureization.

プレビュー全画面表示

実務での使いどころ

  • <main> の活用

    <main> は HTML の要素で、文書の <body> の主要なコンテンツを表します。

注意点

  • 古いブラウザでは対応していない場合がある。

アクセシビリティ

  • スクリーンリーダーでの読み上げを確認すること。

参考リンク