HTMLのmainタグとは？役割・基本的な使い方を初心者向けにわかりやすく解説

HTML の mainタグは、そのページで最も重要となる「主要コンテンツ」を表すための HTMLタグです。

Webサイト制作では、ページの本文部分を囲むタグとして使われますが、「なぜmainタグを使うのか」「どのように書けばいいのか」を理解しておくことは、HTML の基本構造を正しく理解するうえで大切です。

ここでは、mainタグの役割や使う理由、基本的な書き方、1ページに使える数などの基本ルールを、HTML 初心者向けにわかりやすく解説します。

記事を読み終えるころには、mainタグが何のためにあるのかを理解し、基本的な HTML の記述で正しく使えるようになります。

mainタグとは？
1. mainタグはページの主要コンテンツを表すタグ
2. bodyタグとの違い
なぜmainタグを使うの？
1. 人間（制作者）が管理しやすくなる
2. コンピューターや支援技術が理解しやすくなる
mainタグの基本的な使い方
mainタグを使うときの基本ルール
mainタグのよくある質問

mainタグとは？

mainタグを理解するには、まず「Webページの中で、どの部分を表すためのタグなのか」を知ることが大切です。

Webページには、サイト全体で共通して使われる部分と、そのページだけに存在する内容があります。
mainタグは、その中でもページごとに異なる中心的な内容を表すために使われます。

ここでは、mainタグが表す「主要コンテンツ」とは何か、bodyタグとの違いを見ながら詳しく解説します。

mainタグはページの主要コンテンツを表すタグ

mainタグは、そのページにおける主要コンテンツ（もっとも伝えたい中心となる情報）を表すための HTMLタグです。

Webページには、大きく分けて「複数のページで共通して使われる部分」と「そのページだけに存在する内容」があります。

例えば、サイトロゴやナビゲーション、フッターなどは、多くのページで共通して表示されますが、ブログ記事本文や会社概要、商品情報などは、そのページを訪れたユーザーが目的としている固有の内容です。

mainタグは、このようなユーザーがそのページを見る一番の目的となる中心部分を囲むために使用します。

具体的には、以下のような内容が主要コンテンツになります。
・ブログやニュース記事：記事本文
・会社概要ページ：会社情報、事業内容、所在地など
・商品紹介ページ：商品の特徴、価格、スペックなど
・お問い合わせページ：お問い合わせフォーム

実際の HTML では、以下のようにページの中心となる部分を mainタグで囲みます。

<body>
  <header>
    <h1>サイト名</h1>
  </header>

  <main>
    <h2>HTMLのmainタグとは？</h2>
    <p>mainタグについて解説する記事本文です。</p>
  </main>

  <footer>
    <p>© 2026 サイト名</p>
  </footer>
</body>

この例では、mainタグの中にある記事本文が、このページでユーザーが最も知りたい中心的な内容になります。

一方、以下のような内容は通常 mainタグには含めません。
・サイトロゴ
・グローバルナビゲーション
・サイドバー
・フッターの情報

これらはページごとの主役となる内容ではなく、複数のページで共通して利用される部分だからです。

bodyタグとの違い

HTML 初心者が混乱しやすいのが、bodyタグと mainタグの違いです。
どちらも Webページの内容を囲むために使いますが、役割と囲む範囲が異なります。

bodyタグは、ブラウザに表示されるページ全体を囲むためのタグです。
一方、mainタグは、bodyタグの中に含まれる、ページの中心となるコンテンツだけを囲むためのタグです。

それぞれの役割を整理すると、以下のようになります。

タグ	役割
bodyタグ	ブラウザに表示されるページ全体を囲む
mainタグ	ページ内の主要コンテンツを囲む

例えば、一般的な Webページは以下のような構造になります。

body（ページ全体）
├── header（サイトロゴ・ナビゲーション）
├── main（ページの中心となる内容）
└── footer（サイト情報・コピーライト）

bodyタグが Webページ全体を大きな枠として囲み、その中に header や main、footer などの役割を持った要素を配置します。

そのため、mainタグは bodyタグの代わりに使うものではありません。
body の中に配置し、そのページで最も重要な内容を表すために使うタグだと覚えておいてください。

なぜmainタグを使うの？

mainタグは、ページの主要コンテンツを HTML 上で意味づけするために使います。
mainタグを使うことで、ブラウザや支援技術などに「ここがページの中心となる内容である」と伝えられます。また、制作者にとっても HTML の構造が分かりやすくなり、管理や修正がしやすくなります。

人間（制作者）が管理しやすくなる

mainタグを使うことで、HTMLコードを見たときに「ここがページの中心となる部分」ということが分かりやすくなります。

HTML では、複数の要素をまとめるために divタグを使うことがあります。
しかし、divタグには「要素をグループ化する」という役割しかなく、その部分が何を表しているのかという意味は持っていません。

例えば、以下のように書くこともできます。

<div>
  <h1>HTMLのmainタグとは？</h1>
  <p>mainタグについて解説します。</p>
</dive>

この場合でも、Webページの表示は問題なく行えます。
しかし、divタグには「この部分が何を表しているのか」という意味はありません。

そのため、このコードを見ただけでは、囲まれた部分がページの主要コンテンツなのか、単に複数の要素をまとめているだけなのかを判断できません。

一方で、mainタグを使うと以下のようになります。

<main>
  <h1>HTMLのmainタグとは？</h1>
  <p>mainタグについて解説します。</p>
</main>

mainタグには「ページの主要コンテンツを表す」という意味があるため、コードを読む人や HTML を解析するプログラムが、この部分の役割を理解できます。

このように、意味を持つ HTMLタグを適切に使うことで、コードの構造が分かりやすくなり、後から修正や管理がしやすくなります。

コンピューターや支援技術が理解しやすくなる

mainタグは、ブラウザやスクリーンリーダーなどの支援技術に対して、この部分がページの主要コンテンツであることを伝える役割があります。

例えば、スクリーンリーダーを利用して Webページを閲覧するユーザーは、mainタグを目印にすることで、ヘッダーやナビゲーションなどの共通部分を省略し、ページの中心となる内容へ移動しやすくなります。

このように、意味を持つ HTMLタグを正しく使うことで、Webページの構造をコンピューターが理解しやすくなり、より利用しやすいサイト作りにつながります。

mainタグの基本的な使い方

mainタグは、bodyタグの中に配置し、headerタグや footerタグと並列になる形で記述します。
ページ全体の共通部分と、そのページ固有の内容を分けることで、HTML の構造が分かりやすくなります。

mainタグの基本の書き方

mainタグの基本的な配置は以下の通りです。

<body>

  <header>
    <!-- ここにロゴやナビゲーションが入ります -->
  </header>

  <main>
    <h1>記事タイトル</h1>
    <p>本文</p>
  </main>

  <footer>
    <!-- ここにコピーライトなどが入ります -->
  </footer>

</body>

この例では、
・header：サイトロゴやナビゲーションなどの共通部分
・main：そのページの中心となる内容
・footer：コピーライトなどの共通部分
という役割で配置しています。

mainタグは、ページ全体を囲む bodyタグの中に配置し、header や footer とは別の独立したエリアとして記述するのが基本です。

mainタグの中に書くもの

mainタグの中には、そのページ固有のコンテンツを記述します。

具体的には、以下のような内容です。
・記事本文
ブログ記事やニュース記事の文章、画像など
・商品紹介ページの内容
商品の詳細情報、価格、購入ボタンなど
・会社概要ページの内容
企業情報、代表者挨拶、アクセス情報など
・お問い合わせページの内容
入力フォーム、送信ボタンなど

このように、ユーザーがそのページを訪れる目的となる内容を mainタグの中に配置します。

mainタグに書かないもの

mainタグには、サイト内の複数ページで共通して表示される部分は基本的に入れません。

例えば、以下のようなものです。
・共通ヘッダー
サイトロゴや共通メニューなど
・共通ナビゲーション
ページ間を移動するためのメニュー
・共通フッター
コピーライト表記やサイトマップなど

これらはページごとの中心的な内容ではなく、サイト全体で共通して利用される部分です。
そのため、通常は mainタグの外側に配置します。

mainタグを使うときの基本ルール

mainタグは自由に使えるタグではありません。
HTML にはいくつかのルールがあり、正しくページを作成するためには必ず守る必要があります。

1ページに複数のmainタグを書いてはいけない

1つのページに複数の mainタグを書いてはいけません。

mainタグは、そのページにある唯一の主要コンテンツを表すタグです。
複数の mainタグを書くと、ブラウザやスクリーンリーダーなどが、どれをページの主要コンテンツとして扱えばよいのか判断しにくくなります。

そのため、mainタグは1ページにつき1つだけ使用します。

mainタグはbodyタグの外に書いてはいけない

mainタグは、bodyタグの外に書いてはいけません。
mainタグはブラウザに表示されるページの一部であるため、必ず bodyタグの子要素として配置します。

正しい例は以下の通りです。

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

  <main>
    ...
  </main>

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

header・nav・footer・asideの中に書いてはいけない

mainタグは、header・nav・footer・aside の中に書いてはいけません。

これらのタグは、それぞれ異なる役割を持つ独立した要素です。

そのため、mainタグはこれらの内側ではなく、同じ階層に配置する必要があります。

例えば、次のような書き方は誤りです。

<header>
  <main>
    ...
  </main>
</header>

mainタグは、header や footer などと並ぶ独立した要素として配置してください。

mainタグのよくある質問

Q:mainタグは必ず使わないといけませんか？

A:必ず使わなければいけないわけではありません。
mainタグを使わなくても、Webページの見た目や表示が崩れることはありません。
ただし、mainタグを使用すると、ページの主要コンテンツをブラウザやスクリーンリーダーなどの支援技術に分かりやすく伝えられます。また、HTML の構造も整理しやすくなります。
そのため、特別な理由がない限りは、mainタグを使用することをおすすめします。

Q:mainタグはdivタグでも代用できますか？

A:見た目のレイアウトを作るだけであれば、divタグで代用することは可能です。
しかし、divタグには「要素をグループ化する」という役割しかなく、「ページの主要コンテンツ」という意味はありません。
一方、mainタグには「ページの主要コンテンツを表す」という明確な役割があります。
そのため、ページの中心となる内容を囲む場合は、divタグではなく mainタグを使用するのがおすすめです。

Q:mainタグの中にheaderタグを書いても大丈夫ですか？

A:はい、問題ありません。
ページ全体の最上部にあるサイト共通の headerタグとは別に、mainタグ内のコンテンツをまとめるための headerタグを使用できます。
例えば、ブログ記事であれば、記事タイトルや公開日、著者情報などをまとめるために headerタグを使うことがあります。
このような使い方は HTML の仕様でも認められているため、安心して使用できます。