mainタグ 👉 主要なコンテンツを表す

HTMLの<main>メイン要素は、その内容がページ内の最も主要なコンテンツであることを表します。

mainタグの使い方

<body>
  <header>
    <p>サイトロゴ</p>
    <nav>ナビゲーションリンク</nav>
  </header>

  <!-- 記事の内容をmainに -->
  <main>
    <article>
      <h1>記事のタイトル</h1>
      <p>記事の本文</p>
    </article>
  </main>

  <footer>
    <p>コピーライト情報</p>
  </footer>
</body>

👆たとえばブログやWebメディアなら、記事の個別ページで主要なコンテンツに当たるのは記事の内容(記事のタイトルや本文、投稿日など) です。

サイト全体で固有のコンテンツに対して使用する

ブログの投稿内容はサイト全体を通して固有であり(記事ごとに内容が異なります)、<main>に含めるのに最適と言えます。

🙅逆にサイト内のどのページでも共通して見られるもの(サイトのロゴ、ナビゲーションリンク、検索フォーム、コピーライト情報などが当てはまることが多い)は<main>に含めるべきではありません。

🙅mainタグを1ページで複数回使ってはいけない

そのページの中で最も主要なコンテンツに対してのみ使用します。

😺ただしmainタグにhidden属性を指定している場合は除きます。

mainはセクショニング・コンテンツではない

<main>要素はセクショニング・コンテンツ[1]ではありません。文章のセクションを作る(アウトラインを作る)目的であれば<article><section>を使うようにします。

😺articleやsectionは、main要素の中で使うことができます。

mainタグを使うメリット

スクリーンリーダーや読み上げソフト、検索エンジンなどのロボット(プログラム)が、ページの内容や構成を判断するときのヒントとなる可能性があります。


  1. <article><section>のように文書に章、節、項のようなまとまり(アウトライン)を作るもの。
    参考:セクショニング・コンテンツ ↩︎