HTMLのmainタグは本当に必要？役割と正しい使い方を初心者向けに解説

Webサイトをコーディングしていると、ページの内容を囲むためにmainタグが使われていることがあります。

一方、mainタグを使わず、すべてdivタグで囲んでも画面上の見た目は変わりません。そのため、「mainタグはなくてもよいのでは？」と感じる人もいるでしょう。

mainタグは、レイアウトを作るためではなく、そのページの中心となる内容を示すためのHTMLです。

今回は、mainタグが持つ役割や使う範囲、WordPressテーマでの考え方を初心者向けに解説します。

mainタグはページの主要な内容を示す

mainタグは、そのページで最も中心となる内容を囲むために使います。

たとえば、会社概要ページであれば会社情報、サービスページであればサービスの説明、記事ページであれば記事本文が主要な内容です。

一方、ヘッダー、グローバルナビゲーション、フッターなどは、多くのページで共通して表示されます。これらは基本的にmainタグの外側へ配置します。

mainタグを見ることで、「ここからがこのページ固有の内容である」とHTMLの構造上でも判断できるようになります。

mainタグがなくても表示は崩れない

mainタグを使わなくても、文字や画像はブラウザに表示されます。

CSSを適用すれば、divタグだけでも同じレイアウトを作れます。そのため、mainタグの必要性は見た目だけでは判断できません。

mainタグの役割は、デザインを変えることではなく、囲まれている内容の意味を伝えることです。

人が完成した画面を見れば、ヘッダーと本文の違いを判断できます。しかし、ブラウザや検索エンジン、読み上げ機能はHTMLの情報も手掛かりにしてページを理解します。

見た目が同じでも、適切なタグを使用した方が情報の構造は伝わりやすくなります。

divタグとの違い

divタグは、複数の要素をまとめるために使える汎用的なタグです。

レイアウトを整えたり、CSSを適用する範囲を作ったりするときに便利ですが、divタグ自体には「ここがページの主要部分」という意味はありません。

mainタグには、ページの中心的な内容であるという意味があります。

つまり、両者の違いは見た目ではなく役割です。

ページの主要部分全体を囲む場所ではmainタグを使い、その内側でレイアウト用のまとまりを作る場合はdivタグを使うと整理しやすくなります。

基本的には1ページに1つだけ使う

mainタグは、そのページの主要部分を示すため、基本的には1ページに1つだけ使用します。

複数のmainタグが表示されていると、どれが本当の主要部分なのか分かりにくくなります。

サービス紹介と会社情報が同じページにある場合でも、それぞれを別のmainタグで囲む必要はありません。一つのmainタグの中を複数のセクションに分けて構成します。

「内容のまとまりごとにmainタグを使う」のではなく、「ページ全体の中心となる範囲を一つのmainタグで囲む」と考えるのが基本です。

共通部分まで囲まない

mainタグには、そのページ独自の内容を入れます。

サイト内の全ページで繰り返される次のような要素は、通常mainタグの外側に配置します。

サイトロゴを含むヘッダー

グローバルナビゲーション

全ページ共通のお知らせ

フッター

共通の著作権表示

ただし、すべての共通部品を機械的に外へ出せばよいわけではありません。

たとえば、記事ページの目次や商品一覧の絞り込み機能など、そのページの主要コンテンツと直接関係するものはmainタグの中に含められます。

「全ページ共通かどうか」だけでなく、「そのページの中心的な内容に含まれるか」で判断することが大切です。

アクセシビリティにも役立つ

mainタグは、読み上げ機能などの支援技術がページ構造を理解する手掛かりになります。

Webサイトには、ページを開くたびに同じヘッダーやメニューが表示されます。画面を見ながら操作する場合は、本文までスクロールすればよいかもしれません。

しかし、読み上げ機能ですべてを順番に確認すると、毎回同じメニューを通過しなければならないことがあります。

主要部分がmainタグで明確になっていれば、支援技術を利用して本文へ移動しやすくなります。

mainタグは、画面上では見えない部分でも利用者の操作を助けています。

mainタグだけでSEOが改善するわけではない

mainタグを追加しただけで、検索順位が大きく上がるわけではありません。

検索エンジンにとって重要なのは、利用者の疑問に答える内容や、分かりやすいページ構成、適切な見出しなどです。

mainタグは、そうした内容の中心がどこにあるのかを示す補助的な役割を持ちます。

SEOのためだけに形式的に追加するのではなく、正しいHTML構造を作る一部として使用するのが適切です。

WordPressテーマではどこに使うのか

WordPressテーマでは、ヘッダーを読み込んだあとにmainタグを開始し、ページ固有の内容を出力したあとで閉じ、その後にフッターを読み込む構成が一般的です。

固定ページであればページ本文、投稿ページであれば記事、一覧ページであれば投稿一覧がmainタグの中に入ります。

テンプレートパーツを利用している場合も、パーツごとにmainタグを付ける必要はありません。

ページ側で主要部分全体をmainタグで囲み、その中から必要なテンプレートパーツを読み込むと、複数のmainタグが作られるのを防げます。

どのファイルがmainタグの開始と終了を担当するのか、テーマ内でルールを決めておくことも重要です。

CSSを設定するためだけに使わない

mainタグにもCSSを適用できますが、見た目を整えることだけを目的に選ぶべきではありません。

「横幅を制限したいからmainタグを使う」「余白を付けたいからmainタグを増やす」といった考え方をすると、HTMLの意味が不自然になります。

mainタグはページの主要部分を示し、その内側にレイアウト用の要素を設けると役割を分けやすくなります。

HTMLで情報の意味を表し、CSSで見た目を整えるという基本を意識すると、後から修正しやすい構造になります。

mainタグを使うときの確認ポイント

実装後は、次の点を確認すると間違いを見つけやすくなります。

表示中のmainタグが基本的に一つになっているか

ページ固有の中心的な内容を囲んでいるか

サイト共通のヘッダーやフッターまで含めていないか

テンプレートパーツごとにmainタグを重複させていないか

レイアウト目的だけで使用していないか

mainタグの中にページの主要な見出しや本文が入っているか

見た目だけでなく、HTMLを読んだときにもページの範囲が分かるかを確認することが大切です。

まとめ

mainタグは、ページを表示するために絶対必要なタグではありません。使わなくても、画面上のレイアウトは作れます。

しかし、mainタグを適切に使うことで、そのページの中心となる内容をブラウザや検索エンジン、支援技術へ伝えやすくなります。

基本的には1ページに1つ使用し、共通のヘッダーやフッターではなく、ページ固有の主要部分を囲みます。

Web制作では、見た目が完成しているだけでなく、情報の意味がHTML上でも整理されていることが重要です。

「どのタグを使っても同じように見える」という場面ほど、それぞれの役割を考えることが、分かりやすく保守しやすいWebサイト制作につながります。