mainタグの使い方とHTML文書の主要コンテンツを適切に構造化する方法をわかりやすく解説

2024.09.12
スポンサーリンク
スポンサーリンク

mainの概要

HTML文書の主要コンテンツを示す HTMLタグ

<main>主要コンテンツ</main>

概要 mainタグは、HTML文書の主要な内容を囲むために使用されるセクショニング要素です。1つのページに対して1つだけ使用でき、ヘッダーやナビゲーション、サイドバーなどの補助的なコンテンツは含みません。
  • ページごとに1つのみ使用可能（複数のmainタグはNG）。
  • ヘッダー、フッター、サイドバー、ナビゲーションは含めず、ページの主要な情報のみを囲む。
  • SEOやアクセシビリティの向上に役立つ。

mainタグの基本的な使い方

以下の例では、mainタグを使って主要コンテンツを明示的に定義しています。

<body>
    <header>
        <h1>サイトのタイトル</h1>
        <nav>
            <ul>
                <li><a href="#">ホーム</a></li>
                <li><a href="#">ブログ</a></li>
                <li><a href="#">お問い合わせ</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <h2>記事タイトル</h2>
        <p>これは記事の本文です。</p>
    </main>

    <footer>
        <p>Copyright © 2025 Example Site</p>
    </footer>
</body>

記事タイトル

これは記事の本文です。

Copyright © 2025 Example Site

mainタグの応用：複数のセクションを含む

mainタグの中には、sectionタグやarticleタグを含めて、構造化された主要コンテンツを作成できます。

<main>
    <section>
        <h2>最新ニュース</h2>
        <article>
            <h3>ニュース1</h3>
            <p>ニュース1の詳細情報。</p>
        </article>
        <article>
            <h3>ニュース2</h3>
            <p>ニュース2の詳細情報。</p>
        </article>
    </section>
</main>

注意事項

  • 1ページにmainタグは1つだけ使用可能。
  • ヘッダー（header）、ナビゲーション（nav）、フッター（footer）はmainタグの外に配置する。
  • アクセシビリティ向上のため、適切に使用するとスクリーンリーダーが主要コンテンツを正しく認識できる。
  • 検索エンジンがページの主要な内容を識別しやすくなるため、SEOにも良い影響を与える。

よくある質問

Q: mainタグは必須ですか？
A: いいえ、必須ではありませんが、適切に使用することでSEOやアクセシビリティが向上します。
Q: mainタグの中にheaderタグを入れても良いですか？
A: いいえ、mainタグには主要コンテンツのみを含めるべきであり、サイト全体のヘッダーは含めない方が良いです。
Q: mainタグを複数使用するとどうなりますか？
A: HTML5の仕様では、mainタグは1ページに1つのみ使用することが推奨されています。複数使用すると、スクリーンリーダーやSEOの観点で問題が生じる可能性があります。
Q: mainタグはdivタグの代わりになりますか？
A: いいえ、mainタグは「文書の主要部分」を明示するためのセマンティックタグであり、汎用的なレイアウトのためのdivタグとは異なります。
Q: mainタグを使うメリットは何ですか？
A: 検索エンジン最適化（SEO）、アクセシビリティ、コードの可読性が向上します。

まとめ

  • mainタグは、HTML文書の主要コンテンツを囲むためのタグ。
  • 1ページに1つのみ使用可能で、ヘッダーやナビゲーションを含めない。
  • アクセシビリティやSEOの向上に貢献する。
  • CSSで適切なスタイリングを行うことで、視認性を向上させられる。
スポンサーリンク