HyperText Markup Language main element.
main要素は、HTML5で新しく追加された要素で、文書のメインコンテンツを表します。メインコンテンツとは、文書の中心的な主題、またはアプリケーションの中心的な機能に直接関連または拡張した内容の範囲のことです。
文書内には hidden属性が指定されていない main要素を2つ以上置くことはできません。(HTML5.1では個数制限に関する記述が削除されたようです)
main要素はセクショニングコンテンツではないため、新たなセクションを生成しませんので、文書のアウトラインには寄与しません。すなわち body要素や h2要素などの見出しとは異なり、main要素はページの構造の DOMの概念に影響を与えません。これは情報を与えるだけです。
<body>
<header>〜</header>
<main>
メインコンテンツを表します
</main>
<footer>〜</footer>
</body>
一般的なサイトは、body要素の中で header要素、main要素、footer要素の順で構成されています。
この3つのタグはそれぞれ、ドキュメント内に1つだけしか配置できません。
main要素を使用することで、それが文書のメインコンテンツであることを表すことできます。
main要素の内容には、その文書で固有かつ中心的な内容を配置することになります。各文書で共通使用されるサイドバー、ナビゲーションリンク、サイトロゴ、著作権情報、検索フォームなどの文書のセットや文書のセクションにまたがって繰り返されるものは、この要素内には含めません。(もちろん、主な内容が検索フォームでない限り)
次の例では、メインコンテンツとして2つの記事を配置しています。
<main>
<h1>メインコンテンツ</h1>
<article>
<h2>記事その1</h2>
<p>記事その1の内容とは…</p>
<p>…</p>
</article>
<article>
<h2>記事その2</h2>
<p>記事その2の内容とは…</p>
<p>…</p>
</article>
</main>
サイト内で共通使用されるナビゲーション(グローバルナビゲーション)は不可となりますが、メインコンテンツ内で使用されるナビゲーション(ページ内リンク)であれば main要素の中に配置することができます。
<main>
<nav>
<ul>
<li><a href="#article1">記事その1</a></li>
<li><a href="#article2">記事その2</a></li>
<li><a href="#article3">記事その3</a></li>
</ul>
</nav>
<h1>メインコンテンツ</h1>
<article id="#article1">
<h2>記事その1</h2>
…
</article>
<article id="#article2">
<h2>記事その2</h2>
…
</article>
<article id="#article3">
<h2>記事その3</h2>
…
</article>
</main>
主な内容を表すからといってどこにでも main要素を置いていいわけではなく、使い方に注意が必要です。
main要素には以下の要素の子要素になれないという性質があります。
つまり、これらの要素の中に main要素を置くことはできないのです。
main要素は mainランドマークロールのように動作します。ランドマークは、文書の長いセクションをすばやく識別して移動するための支援技術として使用することができます。古いブラウザーの互換性の確認ができない限り、mainを role="main" の宣言付きで使用するべきです。
スキップナビゲーションは、"skipnav" とも呼ばれますが、支援技術のユーザーが繰り返されるコンテンツ (メインナビゲーション、情報バナー、等) の大きなセクションをすばやく飛ばすことができる技法です。これによって、ユーザーがページのメインコンテンツをより早くアクセスすることができます。
id属性を追加することで、main要素がスキップナビゲーションリンクのターゲットになることができます。
ブラウザーのリーダーモードでは、コンテンツをリーダーに特化したビューに変換するときに、見出しやコンテンツ区分要素と同様に main要素の存在を探します。
main要素は広く対応されています。Internet Explorer 11 およびそれ以前については、アクセシビリティにするために main要素に ARIAの "main" ロールを追加することが提案されています(JAWSのような、古い Internet Explorer との組み合わせで使用する読み上げソフトは、role 属性を含めれば main要素の意味論的な意味を理解できるでしょう)。
SEOとは、検索エンジン最適化といって、検索したキーワードで知りたい情報を提示してくれるシステムです。
SEO対策をしている人は気になるかもしれませんが、main要素と SEOに関係はありません。
main要素の中に書かれているからといって上位表示されるわけではないので、サイト全体のコンテンツで評価されるよう工夫しましょう。