【HTML】mainタグの意味と使い方を１分で解説

HTMLを扱う上で知っておきたい重要なタグの１つに「main」があります。mainタグとは、その名の通り、Webページの主要な内容を示すために使われるHTML5のセマンティック（意味論的）タグです。

参考　セマンティックHTMLとは？

mainタグは、ページの中心的な情報、つまり、ユーザーがそのページにアクセスしたときに「最も注目するであろう部分をマークアップする」ために使用されます。

また、このタグはWebのアクセシビリティを向上させ、SEO（検索エンジン最適化）にも寄与する大変重要な役割を果たします。

このページでは、このmainタグがどのような役割を持ち、どのように使用すべきなのかについて、詳しく解説していきます。あなたのHTMLコーディングスキルをさらに高めるための一助となれば幸いです。

このページで学べる内容

mainタグの定義の重要性
mainタグの使い方（ベストプラクティス）

Webエンジニアを目指す方であれば知らないと恥ずかしい超・基本知識の１つです。是非最後までご覧ください。

参考　HTMLの基本構文ルールを３分で学習

HTML <main>タグとは？
1. <main>タグの使い方
mainタグの重要性
1. 利点１：アクセシビリティの向上
2. 利点２：SEO（検索エンジン最適化）
mainタグのベストプラクティス（最適な使用方法）
HTML mainタグのまとめ

HTML <main>タグとは？

mainタグは、HTML5で導入されたセマンティックな要素であり、ページの主要なコンテンツを表します。

主要なコンテンツとは、そのページのユニークな内容、つまり、ヘッダーやフッター、ナビゲーション、サイドバーなどの共有コンテンツではなく、そのページ特有の情報を指します。

基本的な考え方として、理想的には各ページにはmain要素を１つだけ含ませる形とします。これにより、スクリーンリーダーや検索エンジンなどは、ページの主要なコンテンツを容易に特定することが可能になります。

<main>タグの使い方

基本的な使い方は非常にシンプル。↓のような形式で記述します。

<!-- mainタグの開始 -->
<main>
    <!-- ページの主要なコンテンツ -->
    <h1>ここがあなたのウェブページの主要な見出しです</h1>
    <p>ここにはウェブページの主要な内容、記事や情報が記述されます。</p>
</main>
<!-- mainタグの終了 -->

参考　h1タグ（見出し） / pタグ（段落）

↑の例では、h1要素とp要素がmainタグによって包含。この部分がページの主要なコンテンツを構成し、この内容がそのページの特有の情報となります。

mainタグは通常、ヘッダーやナビゲーション、フッターなどの共有コンテンツの間に配置されます↓。

<!-- ヘッダー部分 -->
<header>
    <h1>ウェブサイトのタイトル</h1>
    <nav>
        <!-- ナビゲーションメニュー -->
    </nav>
</header>

<!-- mainタグの開始 -->
<main>
    <!-- ページの主要なコンテンツ -->
    <h1>記事の見出し</h1>
    <p>記事の本文...</p>
</main>
<!-- mainタグの終了 -->

<!-- フッター部分 -->
<footer>
    <!-- フッター情報 -->
</footer>

参考　headerタグ / navタグ

mainタグの重要性

mainタグの利用はWeb開発における重要な要素であり、その意義は２つの大きな視点から語ることができます。

mainタグが果たす役割

アクセシビリティ
SEO（検索エンジン最適化）

利点１：アクセシビリティの向上

アクセシビリティは、Webサイトが可能な限り多くのユーザーにとって使いやすいことを目指す重要なテーマです。

スクリーンリーダーなどの支援技術を使用しているユーザーは、mainタグを利用することでページの主要なコンテンツに直接移動できます。これにより、ユーザーはヘッダーやナビゲーションなどの余計な部分を読み飛ばし、すぐに彼らが本当に求めている情報にアクセスすることが可能となります。

利点２：SEO（検索エンジン最適化）

検索エンジンは、Webページのコンテンツを解析し、そのページがどのような情報を提供しているのかを理解しようとします。

mainタグはその役割上、ページの中心的な情報、つまり検索エンジンが理解しようとする「本質的な」情報を含むことになります。このため、mainタグを適切に使用することで、検索エンジンがページの内容を適切に解析し、ページのSEO効果を高めることに繋げることが可能に。

結果として、対象のページがGoogleの検索結果として上位に表示されやすくなるという効果が期待できます。

以上のように、mainタグはWeb開発におけるアクセシビリティとSEOを強化するための重要なツールとなります。かつ、Webページの構造を明確に示すことで、コードの読みやすさや保守性を向上させる効果もあるという点を押さえておきましょう。

mainタグのベストプラクティス（最適な使用方法）

最後にmainタグを利用する際に気を付けるべき点をご説明します。

mainタグの利用にあたっては、その効果を最大限に発揮するため、前述したmainタグの役割を踏まえ、以下の点を遵守すると良いでしょう。

ポイント１　mainタグは各ページで１つだけ使用

各ページには、理想的には１つのmain要素だけを持つべきです。これにより、スクリーンリーダーや検索エンジンは、ページの主要なコンテンツを容易に特定することが可能になります。

ポイント２　ページ固有のコンテンツを含める

mainタグは、そのページ固有の情報を示すべきです。例えば、ヘッダーやフッター、ナビゲーションメニュー、サイドバーなどの共有コンテンツは含めない方が良いです。

ポイント３　隠しコンテンツを含めない

視覚的に隠されたコンテンツや表示されないコンテンツをmainタグ内に含めるべきではありません。これは、スクリーンリーダーがページの主要なコンテンツとして解釈する可能性があるためです。

ポイント４　mainタグはナビゲーションとフッターの間に配置する

mainタグは通常、ヘッダーまたはナビゲーションとフッターの間に配置します。これにより、Webページの構造が明確になり、ユーザーエージェントや検索エンジンがコンテンツを適切に解釈できます。

HTML mainタグのまとめ

主要なコンテンツのマークアップ：mainタグはWebページの主要なコンテンツ部分を示すHTMLのセマンティック（意味的）タグ
１つのページに１つ：各ページには理想的には一つのmain要素だけを持つべき
ページ固有の情報を含める：mainタグはそのページ固有の情報を示すべき
位置付け：mainタグは通常ヘッダーまたはナビゲーションとフッターの間に配置する
アクセシビリティの改善：アクセシビリティとSEOの改善に寄与する

<!DOCTYPE html>
<html lang="ja">
<head>
  <title>あなたのウェブページ</title>
</head>
<body>
  <!-- ヘッダー部分 -->
  <header>
    <h1>ウェブサイトのタイトル</h1>
    <!-- ナビゲーションリンク -->
    <nav>
      <ul>
        <li><a href="#section1">セクション1</a></li>
        <li><a href="#section2">セクション2</a></li>
      </ul>
    </nav>
  </header>
  
  <!-- メインコンテンツ（一つのページに一つのmainタグのみを使用） -->
  <main>
    <!-- ページ固有のコンテンツを含める -->
    <section id="section1">
      <h2>セクション1のタイトル</h2>
      <p>ここにセクション1の内容を記述します。</p>
    </section>

    <!-- 以下のように隠しコンテンツを含めるべきではない -->
    <section id="section2" style="display: none;">
      <h2>セクション2のタイトル</h2>
      <p>ここにセクション2の内容を記述します。ただし、このセクションは表示されません。</p>
    </section>
  </main>

  <!-- フッター部分（mainタグはナビゲーションとフッターの間に配置） -->
  <footer>
    <p>著作権 © 2023 あなたの名前</p>
  </footer>
</body>
</html>