HTML <main> タグ

JPKODA 編集部 May 6, 2026

<main> タグはセマンティック HTML における中核的な要素であり、ウェブページの主要なコンテンツを収めるコンテナ（Container）として機能します。

ユーザーと検索エンジンの双方に対して、そのページの主要なトピックを明確に定義することで、アクセシビリティ（Accessibility）と SEO パフォーマンスを劇的に向上させます。<main> タグを正しく理解し実装することは、構造が良くメンテナンス性の高いウェブサイトを構築する上で不可欠です。

1. `<main>` タグの理解

<main> タグは、ドキュメントの主体となるコンテンツを指定します。<main> 要素の内部に含まれる内容は、そのドキュメントにとってユニーク（唯一）であるべきであり、サイトナビゲーション、ヘッダー、フッター、サイドバーなどの複数のドキュメント間で繰り返し出現する内容は除外されます。

1.1 主要な特徴

唯一性: 一つのドキュメント内に存在する <main> 要素は一つだけでなければなりません。技術的にブラウザが複数の <main> タグをレンダリング（Rendering）することは可能ですが、セマンティックな観点では誤りであり、推奨されないプラクティスです。
重複コンテンツの除外: <main> タグには、ウェブサイト内の複数ページで重複する内容を含めるべきではありません。これには、ナビゲーションメニュー、ヘッダー、フッター、サイドバーが含まれます。
アクセシビリティ: スクリーンリーダーやその他の補助技術（Assistive Technology）は、<main> タグを使用してページの主要なコンテンツを迅速に特定し、そこへジャンプします（「ナビゲーションをスキップ」機能の基礎となります）。
SEO の利点: 検索エンジンは <main> タグを利用してページの主要なテーマを理解するため、検索順位の向上に寄与します。

2. 正しい使い方

<main> タグは HTML ドキュメントの <body> タグ内に配置し、ページの中心的なトピックや目的をラップする必要があります。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>main タグを含む実装例</title>
</head>
<body>
    <header>
        <h1>マイウェブサイト</h1>
        <nav>
            <ul>
                <li><a href="#">ホーム</a></li>
                <li><a href="#">会社概要</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <article>
            <h2>ウェブサイトへようこそ</h2>
            <p>これは当サイトの核となるコンテンツです。当社が提供するサービスに関する情報が含まれています。</p>
        </article>
    </main>

    <footer>
        <p>© 2024 マイウェブサイト</p>
    </footer>
</body>
</html>

この例では、<main> タグがページの主要な内容を含む <article> 要素をラップしています。ヘッダー、ナビゲーション、フッターは、複数のページで繰り返し出現するため、<main> タグの外側に配置されています。

2.1 誤った使い方

複数の <main> タグ: 一つのドキュメント内で複数の <main> タグを使用するのは、セマンティックに正しくありません。
重複コンテンツの包含: ヘッダー、フッター、ナビゲーションメニュー、またはサイドバーを <main> タグの内部に含めること。
他の構造タグ内へのネスト: <main> を <header>、<footer>、<nav>、または <aside> の内部にネストさせることは避けてください。これらは兄弟要素であるべきであり、親子関係であってはなりません。

3. 実戦的なサンプルとデモ

様々なシナリオにおける <main> タグの正しい活用例を見ていきましょう。

3.1 例 1：ブログ記事

ブログ記事のページでは、主要なコンテンツはブログ記事そのものです。

<!DOCTYPE html>
<html lang="ja">
<head>
    <title>ブログ記事</title>
</head>
<body>
    <header>
        <h1>マイブログ</h1>
        <nav>...</nav>
    </header>

    <main>
        <article>
            <h2>セマンティック HTML の重要性</h2>
            <p>公開日：2024年8月16日</p>
            <p>セマンティック HTML はウェブアクセシビリティにとって極めて重要です...</p>
            <img src="semantic-html.jpg" alt="セマンティック HTML の例">
        </article>
    </main>

    <aside>
        <h3>関連記事</h3>
        <ul>...</ul>
    </aside>

    <footer>...</footer>
</body>
</html>

この例では、<main> がブログ記事を表す <article> 要素を内包しています。関連記事を含む <aside> 要素は、補足的な内容であるため <main> の外側に配置されています。

3.2 例 2：EC サイトの商品ページ

EC サイトにおいて、商品ページの主要なコンテンツは商品の詳細情報です。

<!DOCTYPE html>
<html lang="ja">
<head>
    <title>商品ページ</title>
</head>
<body>
    <header>...</header>

    <main>
        <article>
            <h2>クールな T シャツ</h2>
            <img src="t-shirt.jpg" alt="クールな T シャツ">
            <p>価格: $25.00</p>
            <p>説明: 綿100%で作られた高品質な T シャツです。</p>
            <button>カートに入れる</button>
        </article>
    </main>

    <aside>
        <h3>カスタマーレビュー</h3>
        <p>素晴らしい製品です！ - 田中太郎</p>
    </aside>

    <footer>...</footer>
</body>
</html>

ここでは、<main> タグが商品の詳細を含む <article> 要素をラップしています。カスタマーレビューは、<main> タグの外側の <aside> 要素に配置されています。

3.3 例 3：ランディングページ (LP)

ソフトウェア製品のランディングページ（LP）では、製品のコア情報やコールトゥアクション（CTA）をラップするために <main> タグを使用します。

<body>
    <header>...</header>

    <main>
        <section>
            <h2>ニーズに応える革新的なソフトウェア</h2>
            <p>当社のソフトウェアは、ワークフローの合理化を支援します...</p>
            <button>無料トライアルを開始</button>
        </section>
    </main>

    <footer>...</footer>
</body>

この場合、<main> タグはランディングページの主要な内容を含む <section> 要素を保持しています。

3.4 まとめ

<main> タグは、ウェブページの主要なコンテンツを定義するための基本的なセマンティック HTML 要素です。<main> タグを正しく使用することで、アクセシビリティ、SEO、および HTML ドキュメント全体の構造を改善できます。

鉄則を忘れないでください: 1ページにつき <main> タグは一つだけ使用し、複数のページで重複する内容は除外しましょう。

1. <main> タグの理解