<main>メインコンテンツを示す

<main>タグは、HTML文書のメインコンテンツを示したい場合に使用する要素です。 このmain要素はHTML文書内に1つのみ配置することができ、<main>~</main>で囲まれた部分は、そのHTML文書内で主要なコンテンツ(文書内の中心的な内容)という事が示されます。

主要なコンテンツ(主要なコンテンツ)とは、各文書で共通使用されるヘッダーやナビゲーション、サイトロゴ、検索フォーム、コピーライト、フッター、サイドバーなどを除いた、そのHTML文書内で主な内容となるメインコンテンツの部分の事をいいます。

またmain要素をHTML文書の「副セクションのメインコンテンツ」を示すために利用するのは適切ではありません。 副セクションのメインコンテンツはマークアップせず、必要に応じてセクショニングコンテンツなどを使用すべきでしょう。

なおmain要素を<article><aside><footer><header><nav>の子孫要素として入れる事はできません。

またmain要素はセクショニングコンテンツではないので、HTML文書のアウトラインに影響を与える事はありません。

HTML5での変更点

main要素は、HTML5から追加された要素です。 またHTML5.1ではmain要素の個数制限がなくなったようです。

書式

  • <main 属性="値">~</main> ……… 文書のメインコンテンツを示す

使用した時の例

下記の使用例ではmain要素にrole="main"というようにrole属性を指定していますが、これはInternetExplorerでmain要素がサポートされるまではmain要素のrole属性にmainと設定することが推奨されているためです。

※main要素はInternetExplorerを除いた多くのブラウザでサポートされています。

<!DOCTYPE html>
<html>
 <head>
  <title>main要素の使い方サンプル</title>
 </head>
<body>
  <header>
    <h1>サイトタイトル</h1>
    <p>ページの説明など</p>
  </header>
  <main role="main">
    <article>
      <h1>記事の見出し</h1>
      <p>記事の内容部分。以下省略....</p>
    </article>
  </main>
  <footer>フッター</footer>
</body>
</html>

ブラウザ上の表示例

対応ブラウザなどのデータ

形式 <main>~</main> カテゴリ フローコンテンツ
親要素 フローコンテンツが期待できる場所 子要素 フローコンテンツ
開始タグ 必須 終了タグ 必須
グローバル属性 accesskey / class / contenteditable / contextmenu / dir / draggable / hidden / id / lang / spellcheck / style / tabindex / title / translate
対応ブラウザ Google Chrome26~ , Firefox21~ , Opera16~ , Safari7~