HTML <main>タグ：正しい理解と使い方

定義と使用方

<main>タグは
文書のメイン領域を表します。

このタグは文書の中心となるテーマやアプリケーションの主要な機能など、主要なコンテンツ（dominant content）を含む領域を意味します。

HTML

<!DOCTYPE html>
<html lang="ja">
    <head>
        <title>ウェブページのタイトル</title>
    </head>
    <body>
        <header>
            <!-- ウェブページのヘッダー内容 -->
        </header>
        <nav>
            <!-- ナビゲーションメニュー -->
        </nav>
        <main>
            <!-- ウェブページの主要コンテンツ領域 -->
            <h1>主要な見出し</h1>
            <p>主要な内容...</p>
            <!-- その他のコンテンツ -->
        </main>
        <footer>
            <!-- ウェブページのフッター内容 -->
        </footer>
    </body>
</html>

<main>タグの内容は文書固有の内容である必要があり、サイドバー、ナビゲーションリンク、著作権情報、サイトロゴ、検索フォームなど文書全体または文書セクション全体にわたって繰り返される内容は、検索フォームがページの主要な機能でない限り含めてはいけません。

注意点

文書にはhidden属性が指定されていない<main>タグを2つ以上含めてはいけません。

仕様によれば <main> は文書内で一度だけ使用しなければなりません。
この規則は文書の構造を明確に維持し、ウェブページを正しく解釈するために従うべき重要な規則の一つです。

もしSPA（単一ページアプリケーション）をJavaScriptでサーバーとの往復なしにコンテンツを実装するために<main>タグを複数あらかじめマークアップする場合は、現在表示されていないコンテンツの<main>要素にはhidden属性を使用して非表示にする必要があります。

次の例を参照してください。

HTML

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>単一ページアプリケーション</title>
        <link rel="stylesheet" href="spa.css">
        <script src=spa.js async></script>
    </head>
    <body>
        <nav>
            <!-- リンクをクリックすると
            JavaScriptでサーバーとの往復なしに
            関連するmainコンテンツを動的に表示 -->
            <a href=/>Home</a>
            <a href=/about>About</a>
            <a href=/contact>Contact</a>
        </nav>
        <main>
            <h1>Home</h1>
            …
        </main>
        <main hidden>
            <h1>About</h1>
            …
        </main>
        <main hidden>
            <h1>Contact</h1>
            …
        </main>
    </body>
</html>

正しい構文構造

<main>タグは主要なコンテンツ（dominant content）を含む領域を表すため、HTML文書内でもこの主要コンテンツがよく分かるように正しい位置に配置されている必要があります。

<main>タグが正しい位置にない場合、HTML文書全体の意味論的な観点から構造の把握などに問題が生じる可能性があります。このような理由から、<main>タグは次のようなHTML階層構造に配置される必要があります。

<html>、<body>、<div>、<form>などの限定された親要素の下にのみ配置する必要があります。
独立したカスタムタグ（Autonomous custom elements）を親要素として使用することができます。
これらの親要素は、意味論的な観点からそのタグ固有の意味を変更するWAI-ARIA（role属性）を持たないことが原則とされています。

アクセシビリティに関する考慮事項

HTMLにおける「ランドマーク（landmark）」とは、ウェブページの構造を説明し、ウェブアクセシビリティを向上させるために使用される特別な役割を持つ要素です。
これらのランドマーク要素は、ウェブページ内の特定の領域（例：ヘッダー、メイン、フッター、サイドバーなど）を定義する特別なセマンティックな役割を持ち、ウェブページを理解しやすく、ナビゲートしやすくするだけでなく、スクリーンリーダーやその他の支援技術を使用するユーザーにページのレイアウトや構造を伝える上で重要な役割を果たします。

さらに詳しい内容については、ARIAランドマークの例をご参照ください。

<main>タグはページの主要なコンテンツ領域を表し、ページ内の中心的な内容を含みます。role属性の値はmainです。

次は、<main>タグを使用せず、<div>タグにrole="main"を指定してメインに相当するランドマークとして使用する例です。

ブラウザの互換性の問題で<main>タグを使用できない場合を除き、role="main"を使用するよりも<main>タグを使用してください。

ナビゲーションスキップリンク

ほとんどのページでは、キーボードやスクリーンリーダーを使用するユーザーは、メインコンテンツに到達する前にナビゲーションリンクやその他の要素の長いリストを操作する必要があります。これは、一部の運動障害を持つユーザーにとって特に困難となる場合があります。メインコンテンツに到達する前にユーザーに複数の操作を要求することは、アクセシビリティの障壁となります。

もちろん、マウスを使用する視覚のあるユーザーにとっては、このようなウェブページに何の問題もありません。彼らはほぼ即座にページをざっと確認し、主要なコンテンツがどこにあるかを把握することができます。

ナビゲーションスキップリンクは、スクリーンリーダーやキーボードユーザーに主要なコンテンツへ直接移動する機能を提供します。

HTML

<body>
    <a href="#main-content">ナビゲーションスキップ</a>

    <!-- ナビゲーションとヘッダーのコンテンツ -->

    <main id="main-content">
        <!-- メインコンテンツの内容 -->
    </main>
</body>

これにより、ユーザーはページの主要な内容により速くアクセスすることができます。