main要素は、ページの中心になる内容を示します

ページには、ロゴやメニューのように多くのページで共通する部分と、そのページで読んだり使ったりする中心の内容があります。main要素は、ページの中心に関係する内容を囲みます。

先に結論

最小の例

<body>
  <header>サイトのロゴ</header>
  <nav aria-label="サイトのメニュー">
    <a href="/about/">このサイトについて</a>
  </nav>

  <main id="main-content">
    <h1>ページの題名</h1>
    <p>このページで伝えたい内容です。</p>
  </main>

  <footer>サイト共通の案内</footer>
</body>

この例では、ロゴ・メニュー・共通案内を除いた本文をmainで囲んでいます。idを付けると、ページ先頭の「本文へ移動」リンクから本文へ案内できます。

何を入れる？

ニュース記事なら記事本文、商品ページなら商品についての説明や購入に関する内容など、そのページの目的に直接関係する部分を入れます。ページに1つの要素だけを置く決まりではありません。見出し、文章、画像、フォームなどをまとめて入れられます。

mainを置いても、見た目が自動で大きく変わるわけではありません。意味を伝えるためのHTML要素です。余白や色は、必要に応じてCSSで整えます。

ヘッダーやメニューとの違い

要素	主な役目
header	ページやまとまりの先頭にある案内
nav	ページ移動に使う主なリンクのまとまり
main	そのページの中心になる内容
footer	ページやまとまりの末尾にある案内

サイト共通のロゴやメニューを各ページのmainに入れると、「ページごとに変わる中心の内容」と区別しにくくなります。

置く場所と数

まずはbodyの中に、ページの中心となるmainを1つ置く形が分かりやすいです。別のページをiframeで読み込んでいる場合、その中の文書にも独自のmainを置けます。

HTMLの仕様では、hidden属性のないmainを1つの文書に複数置けません。CSSで見えなくしただけでは、このルールを満たしたことになりません。通常のページ作りでは、表示するmainを1つにしておけば大丈夫です。

よくある間違い

• サイト共通のロゴやメニューまでmainの中に入れる
• 本文の見出しを作らず、mainだけでページの題名も伝わると思う
• 見た目を変える目的だけでmainを使う

mainは見出しの代わりにはなりません。ページの題名や本文の区切りには、内容に合う見出し要素も使います。

Atlasで詳しく確認する

仕様で定められた配置条件、hidden属性の扱い、アクセシビリティ上のMain Landmark、ブラウザーとWPTの観測結果は、Yugien Atlasのmain要素ページで確認できます。主コンテンツの中に独立した記事を置く場合は、article要素の説明もご覧ください。別の文書を読み込むiframeについては、iframe要素の説明を参照してください。