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