HTMLのmainタグの使い方を初心者向けにやさしく解説！意味と使い方を完全ガイド

新人と先輩の会話形式で理解しよう

新人

「HTMLの<main>タグって、どこに使えばいいんですか？」

先輩

「<main>タグは、そのページの主要な内容を囲むためのタグなんだ。ヘッダーやナビゲーション、フッターとは別に、本当に伝えたい情報の部分に使うよ。」

新人

「具体的に、どんな内容を<main>タグの中に書けばいいんでしょうか？」

先輩

「それじゃあ、使い方や注意点も含めて詳しく説明していくね！」

1. mainタグとは何か？

<main>タグは、HTML5で導入された構造化タグのひとつで、ページの「主要な内容（メインコンテンツ）」を表すためのタグです。例えば、ブログ記事の本文、商品一覧の表示部分、サービスの説明など、ページの中心となる情報を囲むのに使います。

検索エンジンにとっても、<main>タグで囲まれた範囲は重要なコンテンツとして認識されやすく、SEO（検索エンジン最適化）の面でも効果があります。

2. mainタグの基本的な使い方

以下に、HTMLの<main>タグの基本的な使い方を紹介します。


<main>
  <h1>会社紹介</h1>
  <p>私たちは、初心者にもやさしいITサービスを提供しています。</p>
</main>

ブラウザ表示

<main>タグの中には、そのページで一番伝えたい中心的な内容を記述します。見出しや段落タグと組み合わせて、意味のある構造を作りましょう。

3. ヘッダーやナビゲーションとの違い

<main>タグの外には、通常、<header>や<nav>、<footer>などのタグがあります。これらはページ全体の共通部分を示しますが、<main>はそれとは独立した「そのページだけの情報」に焦点を当てるタグです。


<header>
  <h1>わたしたちのウェブサイト</h1>
</header>

<nav>
  <ul>
    <li><a href="#">ホーム</a></li>
    <li><a href="#">サービス</a></li>
  </ul>
</nav>

<main>
  <h2>サービス紹介</h2>
  <p>初心者向けのIT講座を毎週配信しています。</p>
</main>

<footer>
  <p>&copy; 2025 わたしたちの会社</p>
</footer>

ブラウザ表示

このように、ヘッダーやナビゲーション、フッターと明確に区別して使うことがHTML構造を正しく保つコツです。

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

<main>タグは、1つのHTMLページの中で1回だけ使うのが正しい使い方です。なぜなら、ページの「主要な内容」は1つであるべきだからです。複数使ってしまうと、検索エンジンにも混乱を与え、SEO的にもマイナスになります。

5. mainタグとsectionタグの組み合わせ

<main>タグの中に<section>タグを使って、ページ内の内容をさらに意味ごとに区切ることができます。これにより、ページ構造が明確になり、ユーザーにとっても読みやすくなります。


<main>
  <section>
    <h2>ニュース</h2>
    <p>2025年4月に新しい機能が追加されました。</p>
  </section>

  <section>
    <h2>お知らせ</h2>
    <p>ゴールデンウィーク期間中も通常通り営業します。</p>
  </section>
</main>

ブラウザ表示

このように、<main>の中を<section>で分割することで、意味のある構造化が可能になります。

6. mainタグと検索エンジン最適化（SEO）との関係

検索エンジンは、HTML構造をもとにページの内容を理解します。<main>タグで主要なコンテンツを明示することで、検索エンジンに「ここが重要です」と伝えることができます。その結果、検索結果の表示順位が上がりやすくなります。

特に、重要なキーワードやフレーズを<main>内に含めることで、SEO効果を高めることができます。

7. mainタグを使うときの注意点

<main>タグの中には、他の構造タグである<header>や<footer>を含めないようにしましょう。これらは<main>の外側で使うものです。また、ページの装飾やレイアウトのために<div>タグを使う場合もありますが、<main>は意味のあるコンテンツに使うようにしましょう。

8. mainタグの実際の使用例と応用

ここでは、実際のウェブページの例として、<main>タグがどのように使われているかを紹介します。


<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>サービス紹介</title>
</head>
<body>

<header>
  <h1>わたしたちのウェブサイト</h1>
</header>

<main>
  <h2>初心者向けサービスのご案内</h2>
  <p>このページでは、初心者でも安心して始められるサービスをご紹介します。</p>
</main>

<footer>
  <p>&copy; 2025 わたしたちの会社</p>
</footer>

</body>
</html>

ブラウザ表示

このように、正しい場所で<main>を使うことで、ページ全体の意味が明確になり、ユーザーにも検索エンジンにもわかりやすくなります。