HTMLのmainタグを完全ガイド！1ページに1つだけ使う理由を初心者向けに解説

HTML mainタグとは？1ページに1つだけ使う理由を解説

先生と生徒の会話形式で理解しよう

生徒

「先生、HTMLのmainタグって何ですか？普通のdivタグと何が違うんですか？」

先生

「mainタグは、ページのメインコンテンツを示すための特別なタグです。divタグは単なる箱ですが、mainタグは意味を持つ箱です。」

生徒

「意味を持つってどういうことですか？」

先生

「検索エンジンや音声読み上げソフトなどが、どこが一番重要な内容かを理解しやすくなるということです。つまりSEOやアクセシビリティにとても重要なタグです。」

1. HTML mainタグとは？

HTMLのmainタグは、ページの中心的な内容、つまりユーザーが一番注目する部分を囲むためのタグです。通常、ページにはヘッダー(header)やナビゲーション(nav)、サイドバーなどの補助的な情報がありますが、mainタグはそれらとは異なり、ページの「メインコンテンツ」を明確に示すことができます。

2. mainタグを使うメリット

mainタグを使うと、検索エンジンがページの重要な内容を理解しやすくなります。これにより、Googleなどの検索で上位に表示されやすくなる効果があります。また、スクリーンリーダーなどの支援技術も、mainタグを目印にユーザーをコンテンツに誘導できるため、アクセシビリティが向上します。

3. mainタグは1ページに1つだけ

mainタグは1ページに1つだけ使用するルールがあります。複数使うと、検索エンジンや読み上げソフトがどの部分が本当に重要か迷ってしまうためです。ページの中心的なコンテンツは一つだけなので、mainタグも一つに限定することで正しく意味を伝えられます。

4. mainタグの基本的な書き方

mainタグは通常のHTMLタグと同じように使いますが、ページの主要部分を囲むようにします。例えば、記事やブログの本文、商品の紹介ページの中心情報などが該当します。


<main>
    <h2>記事のタイトル</h2>
    <p>ここがページのメインコンテンツです。文章や画像などをまとめて表示できます。</p>
</main>

ブラウザ表示

5. mainタグと他のセクショナルタグの違い

headerタグはページのヘッダー情報、footerタグはフッター情報、navタグはナビゲーションを示します。mainタグはこれらとは異なり、ページの中心的な情報を示すことができます。意味を明確にすることで、SEOやアクセシビリティの評価が向上します。


<header>
    <h1>サイトのタイトル</h1>
</header>
<main>
    <h2>ページの主要記事</h2>
    <p>この部分がメインコンテンツです。</p>
</main>
<footer>
    <p>コピーライト情報など</p>
</footer>

ブラウザ表示

6. mainタグ内に入れてはいけないもの

mainタグの中には、ページ全体のナビゲーションやヘッダー、フッター、サイドバーなどの補助的な情報は入れないようにしましょう。mainタグはあくまで「主要なコンテンツ」を示すための領域です。


<main>
    <h2>記事タイトル</h2>
    <p>ここがページの中心コンテンツ</p>
    <!-- ナビゲーションやフッターは入れない -->
</main>

ブラウザ表示

7. mainタグとSEOの関係

検索エンジンはmainタグを参考にページの主要コンテンツを判断します。つまりmainタグを正しく使うことは、SEO対策として非常に重要です。記事や商品情報などの中心部分をmainタグで囲むことで、検索エンジンが内容を正しく理解し、検索結果に反映されやすくなります。


<main>
    <h2>商品紹介ページのメイン内容</h2>
    <p>商品の詳細情報や特徴をここにまとめます。</p>
</main>

ブラウザ表示

8. mainタグの使い方まとめ

mainタグは1ページに1つだけ使用し、ページの中心的なコンテンツを示すために使います。正しく使うことで、SEO効果やアクセシビリティ向上に役立ちます。補助的な情報は入れず、主要な文章や画像、記事などを囲むようにしましょう。これにより、ユーザーにも検索エンジンにもわかりやすいWebページになります。


<main>
    <h2>記事のメインコンテンツ</h2>
    <p>ここに文章、画像、動画などをまとめて表示します。</p>
</main>

ブラウザ表示

まとめ

HTMLのmainタグについて学んだことを振り返ると、まずmainタグはページの中心的なコンテンツを示すセマンティックなタグであることがわかります。divタグのように単なる箱ではなく、意味を持つ要素として検索エンジンや支援技術に正しく情報を伝える役割があります。そのため、1ページに複数使用することは避け、必ず主要なコンテンツを囲む1つだけの領域として活用することが基本です。また、mainタグの内部にはヘッダー、フッター、ナビゲーションなど補助的な要素を入れず、文章、画像、表、動画などの中心コンテンツを整理して配置することが望ましいです。

mainタグを適切に利用することで、SEOの評価向上やアクセシビリティの改善につながります。検索エンジンはmainタグを手掛かりにページ内の重要情報を判断するため、記事、商品紹介、ブログ本文などの中心情報を明確に示すことが可能です。さらに、スクリーンリーダーや音声読み上げソフトはmainタグを認識して、ユーザーを効率的に主要コンテンツに誘導できます。こうした理由から、mainタグの正しい使用は現代のWeb制作において必須といえます。

実際の書き方としては、mainタグを開き、その中にh2タグでセクションタイトルを付け、pタグで文章や説明を記述するのが基本です。画像や動画を入れる場合もmainタグ内に含めることで、ページの中心情報として統一されます。また、header、footer、nav、asideなどのタグはmainタグの外に配置し、意味を明確にすることでSEOやアクセシビリティの評価を高められます。以下にサンプルコードを示します。

 <main> <h2>記事の主要コンテンツ</h2> <p>ここには記事本文や画像、動画などの中心情報をまとめて表示します。</p> <img src="/img/sample150-100.jpg" alt="サンプル画像"> <p>主要な情報はこのmainタグ内で整理しましょう。</p> </main>

ブラウザ表示

先生と生徒の振り返り会話

生徒

「先生、今日のmainタグの授業で一番大事なポイントは何ですか？」

先生

「mainタグはページの中心コンテンツを示すことです。divと違って意味を持つので、SEOやアクセシビリティに重要です。」

生徒

「1ページに1つだけ使うのはなぜですか？」

先生

「複数使うと検索エンジンや読み上げソフトが混乱します。本当に重要なコンテンツは1つだけなので、mainタグも1つにするのです。」

生徒

「mainタグの中にヘッダーやナビゲーションを入れてはいけないのはなぜですか？」