主要なコンテンツを表す

main

< main 【メイン】 属性="属性値">〜</main >

main要素は文書内の主要なコンテンツを表します。HTML5で追加された新しい要素です。主要なコンテンツとは、Webサイト内の各ページで繰り返し使われるヘッダーやナビゲーション、検索フォームやフッター情報などを除いた、その文書内で主な内容となる部分を指します。また、セクショニングコンテンツではないので、文書のアウトラインに影響を与えません。

カテゴリー ・パルパブルコンテンツ
・フローコンテンツ
コンテンツモデル フローコンテンツ
使用できる文脈 フローコンテンツが期待される場所。ただし、article、aside、footer、header、navの各要素を祖先要素に持つことは不可
カテゴリーとコンテンツモデル

使用できる属性

グローバル属性

すべての要素で使用できる属性です。
グローバル属性とイベントハンドラ属性

使用例記事セクションを主要なコンテンツとして表す

<main role="main">
<article>~</article>
</main>

以下の例では、記事セクションを文書の主要な部分としてmain要素でマークアップしています。main要素はWAI-ARIAが策定するrole属性において、role="main"としてマッピングされますが、ブラウザーがこのマッピングを実装するまでは、以下の例のようにmain要素とrole="main"を併用することが推奨されています。

<body>
  <header>
    <h1>大樽町カフェ</h1>
    <p>大樽町駅から徒歩3分。特製のコーヒーとパンケーキをお楽しみください。</p>
  </header>
  <main role="main">
    <article>
      <h1>特製ミックスのパンケーキ</h1>
      <p> 当店の軽食メニューのおすすめといえば、パンケーキです。</p>
    </article>
  </main>
  <footer>文書のフッター</footer>
</body>

関連記事