mainタグは、HTML5で追加されたセマンティックタグの1つです。headerタグやfooterタグのように見た目を変えるタグではありませんが、ページの「主要な内容」がどこにあるのかをブラウザや支援技術へ伝える役割があります。今回の記事では、
- HTMLのmainタグとは何か
- mainタグを使うSEO上のメリット
- mainタグを使うときの3つの記述ルール
- body・section・article・divタグとの違い
- コピペできる正しいコーディング例
について解説していきます。
HTMLのmainタグとは？役割と必要性
mainタグは、Webページ内の主要なコンテンツを表すためのHTMLタグです。
たとえば、ブログ記事であれば記事本文、サービスページであればサービス説明や料金、ECサイトの商品ページであれば商品情報がmainタグに入る内容です。
<body>
<header>サイトのヘッダー</header>
<main>
<h1>ページの主な内容</h1>
<p>このページで一番伝えたい本文が入ります。</p>
</main>
<footer>サイトのフッター</footer>
</body>headerやfooterは多くのページで共通して表示されることがありますが、mainタグには、そのページ固有の中心的な内容を入れます。
mainタグを使うSEO上のメリット
mainタグを使ったからといって、それだけで検索順位が直接上がるわけではありません。ただし、ページの主要コンテンツを明確にできるため、HTML構造の理解しやすさにはつながります。
mainタグは、検索エンジンやスクリーンリーダーに対して「ここがページの中心部分です」と伝えやすくするタグです。SEO面では、次のような間接的なメリットがあります。
- ページの主要コンテンツと共通パーツを分けやすい
- HTMLの意味が明確になり、構造を理解しやすくなる
- アクセシビリティが向上し、ユーザー体験の改善につながる
- 保守時に「本文部分」がどこか判断しやすくなる
mainタグはSEOの裏技ではありません。検索エンジン向けというより、HTMLの意味を正しく整理するための基本タグとして使いましょう。
mainタグはアクセシビリティでも重要
mainタグは、支援技術にとって「main landmark」として扱われます。スクリーンリーダーを使うユーザーは、ヘッダーやナビゲーションを飛ばしてメインコンテンツへ移動しやすくなります。
<a href="#main-content">本文へスキップ</a>
<main id="main-content">
<h1>HTMLのmainタグとは</h1>
<p>本文が入ります。</p>
</main>このようにid属性と組み合わせると、スキップリンクの移動先としても使えます。
【重要】mainタグを使うときの3つの記述ルール
mainタグは便利ですが、どこにでも自由に書いてよいタグではありません。実務では、次の3つを守ると大きなミスを避けられます。
ルール1：原則として1ページに1つしか使えない
HTML仕様では、hidden属性が付いていないmainタグは、1つの文書内に複数置かないことになっています。
<main>
<h1>記事本文</h1>
</main>
<main>
<h2>関連記事一覧</h2>
</main>通常のWebページでは、mainタグは1つだけにします。
<main>
<h1>記事本文</h1>
<section>
<h2>関連記事</h2>
<p>関連する記事を紹介します。</p>
</section>
</main>mainタグを複数使いたくなった場合は、sectionタグやarticleタグで中身を分けるのが基本です。なお、SPAのような構成で複数のmainタグを用意し、表示していないものにhidden属性を付けるケースはあります。ただし初心者向けの通常ページでは、まず「1ページに1つ」と覚えて問題ありません。
main { display: block; } はもう古い？
昔のコーディング教材や古いブログ記事を見ると、CSSに main { display: block; } と書くように指示されていることがあります。これは、古いブラウザ（Internet Explorer 11など）が main タグを正しく認識できず、インライン要素として扱ってしまうのを防ぐための「古い環境向けの対策（IE対策）」でした。現在（2026年時点）はIE11のサポートも完全に終了し、モダンブラウザ（Chrome, Safari, Edgeなど）が標準で main タグに対応しているため、実務でこの記述を書く必要はほぼありません。 安心してそのまま main タグを使用してください。
ルール2：header、footer、nav、asideの中に配置しない
mainタグは、ページの中心的なコンテンツを表すタグです。そのため、ヘッダー、フッター、ナビゲーション、サイドバーの中に入れるのは不自然です。
<header>
<main>
<h1>サイトタイトル</h1>
</main>
</header><header>
<h1>サイトタイトル</h1>
</header>
<main>
<h2>ページの主な内容</h2>
<p>本文が入ります。</p>
</main>mainタグはheader、footer、nav、aside、articleなどの中へ入れないようにしましょう。
ルール3：共通パーツではなくページ固有の内容を入れる
mainタグには、そのページ固有の中心的な内容を入れます。サイトロゴ、グローバルナビ、コピーライト、サイドバー、共通検索フォームなどは通常mainタグに含めません。
<main>
<nav>グローバルナビ</nav>
<h1>記事タイトル</h1>
<p>記事本文</p>
<footer>コピーライト</footer>
</main><nav>グローバルナビ</nav>
<main>
<h1>記事タイトル</h1>
<p>記事本文</p>
</main>
<footer>コピーライト</footer>複数ページで繰り返し表示される共通パーツは、基本的にmainタグの外へ出すと構造が整理しやすくなります。
関連記事：「HTMLのheaderタグとは？基本的な使い方を解説」
どっちを使う？mainタグと他の要素との違い・使い分け
mainタグは、bodyタグ、sectionタグ、articleタグ、divタグと混同されやすいタグです。ここでは、それぞれの違いを整理します。
bodyタグとmainタグの違い
bodyタグは、ブラウザに表示される内容全体を入れるタグです。一方、mainタグはbodyタグの中にある「ページ固有の主要コンテンツ」を囲むタグです。
| タグ | 役割 |
|---|---|
<body> |
ページに表示される内容全体を入れる |
<main> |
body内の主要コンテンツを表す |
<body>
<header>ヘッダー</header>
<main>本文</main>
<footer>フッター</footer>
</body>bodyタグはページ全体、mainタグはその中の中心部分、と考えると違いが明確になります。
sectionタグ・articleタグとの使い分け
sectionタグは、ページ内の章やテーマのまとまりを表します。articleタグは、ブログ記事やニュース記事のように単独で読める内容に使います。mainタグは、それらをまとめる「ページの主役エリア」として使います。
<main>
<article>
<h1>HTMLのmainタグとは</h1>
<section>
<h2>mainタグの使い方</h2>
<p>本文が入ります。</p>
</section>
</article>
</main>このように、mainタグの中にarticleタグやsectionタグを入れる構成は自然です。
sectionタグやarticleタグの代わりにmainタグを何度も使うのは避けましょう。mainタグはページ全体の主要領域を示すためのタグです。
divタグからmainタグへ移行すべき理由
昔のHTMLでは、次のようにdivタグとclass名でメイン部分を表すことがよくありました。
<div id="main">
<h1>ページタイトル</h1>
<p>本文です。</p>
</div>この書き方でも見た目は作れますが、divタグ自体には意味がありません。現在は、ページの主な内容を表すならmainタグを使う方がHTMLの意味が明確になります。
<main>
<h1>ページタイトル</h1>
<p>本文です。</p>
</main>見た目のためだけならdiv、ページの主要コンテンツを表すならmainを使うと判断しやすいです。
実務では、既存サイトの<div id="main">を<main id="main">へ置き換えるケースがあります。ただし、CSSやJavaScriptがdiv#mainを前提にしている場合は、表示や処理が変わらないか確認してから修正しましょう。
【コピペOK】mainタグを使った正しいコーディング例
ここでは、mainタグを使った基本的なHTML構造を紹介します。
基本のページ構造
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>サンプルページ</title>
</head>
<body>
<header>
<h1>サイト名</h1>
</header>
<nav>
<ul>
<li><a href="/">ホーム</a></li>
<li><a href="/about">会社概要</a></li>
</ul>
</nav>
<main id="main-content">
<h2>ページの見出し</h2>
<p>このページで最も重要な本文が入ります。</p>
</main>
<footer>
<p>© Sample Site</p>
</footer>
</body>
</html>ブログ記事ページの例
ブログ記事では、mainタグの中にarticleタグを入れると構造が整理しやすくなります。
<main id="main-content">
<article>
<h1>HTMLのmainタグとは</h1>
<p>mainタグの役割を解説します。</p>
<section>
<h2>mainタグの使い方</h2>
<p>ページの主要コンテンツを囲みます。</p>
</section>
</article>
</main>トップページの例
トップページでは、mainタグの中に複数のsectionタグを入れて、コンテンツを分けることがあります。
<main>
<section>
<h2>サービスの特徴</h2>
<p>サービスの強みを紹介します。</p>
</section>
<section>
<h2>料金プラン</h2>
<p>料金の詳細を紹介します。</p>
</section>
<section>
<h2>よくある質問</h2>
<p>お問い合わせ前によく確認される内容です。</p>
</section>
</main>mainタグの中でsectionタグを使うと、ページ全体の主要領域と、その中の章立てを分けて表現できます。
関連記事：「HTMLのsectionタグとは？意味や使い方を解説」
mainタグを使うときの実務チェックリスト
mainタグを使うときは、以下を確認してください。
| 確認項目 | チェック内容 |
|---|---|
| 数 | hiddenなしのmainタグが1ページに1つか |
| 位置 | header、footer、nav、aside、articleの中に入っていないか |
| 内容 | そのページ固有の主要コンテンツだけを入れているか |
| 共通パーツ | ロゴ、ナビ、コピーライト、サイドバーをmain外に出しているか |
| アクセシビリティ | 必要に応じてidを付け、スキップリンクの移動先にできるか |
mainタグは、ページの本文エリアを明確にするためのタグです。迷ったら「このページで一番読ませたい内容か」を基準に判断しましょう。
公式ドキュメントも確認する
mainタグの仕様を正確に確認したい場合は、公式ドキュメントも参考になります。
- HTML・CSSを学んで自分だけのスキルを身につけたい
- HTML・CSSのスキルを身につけてwebクリエイターとして活躍したい
- サポートが充実しているプログラミングスクールを知りたい
そんな思いを持った方は忍者CODEのWeb制作コースがおすすめです！
忍者CODEは未経験からでもプロのエンジニアを目指せるオンラインプログラミングスク―ルです。
期間制限なく動画を視聴できるので、自分のペースで学習することができます！
まとめ
この記事では、HTMLのmainタグについて解説しました。
mainタグは、Webページ内の主要なコンテンツを表すためのHTMLタグです。
通常のページでは、hidden属性のないmainタグは1つだけ使います。また、header、footer、nav、aside、articleの中に配置せず、ページ固有の中心的な内容を入れることが重要です。bodyタグはページ全体、mainタグは主要コンテンツ、sectionタグは章やテーマ、articleタグは独立した記事、divタグは意味を持たない汎用的な箱として使い分けましょう。
mainタグを正しく使うと、HTMLの構造が整理され、検索エンジンやスクリーンリーダーにも内容を伝えやすくなります。まずは、ページの本文エリアを<main>で囲むところから始めてみてください。
関連記事：「HTMLタグ一覧｜コピペで使える目的別リファレンス」
