PR

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

HTML

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

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

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

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

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

このページで学べる内容
  • mainタグの定義の重要性
  • mainタグの使い方(ベストプラクティス)

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

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

スポンサーリンク

HTML <main>タグとは?

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

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

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

<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開発における重要な要素であり、その意義は2つの大きな視点から語ることができます。

mainタグが果たす役割
  • アクセシビリティ
  • SEO(検索エンジン最適化)

利点1:アクセシビリティの向上

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

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

利点2:SEO(検索エンジン最適化)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

HTML mainタグのまとめ

  1. 主要なコンテンツのマークアップ:mainタグはWebページの主要なコンテンツ部分を示すHTMLのセマンティック(意味的)タグ
  2. 1つのページに1つ:各ページには理想的には一つのmain要素だけを持つべき
  3. ページ固有の情報を含める:mainタグはそのページ固有の情報を示すべき
  4. 位置付け:mainタグは通常ヘッダーまたはナビゲーションとフッターの間に配置する
  5. アクセシビリティの改善:アクセシビリティと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>

Webデザインを勉強するのって結構難しいですよね。

でもその悩みを抱えているのは一人じゃありません。全てのWebデザイナーが同じ道を進んできました。

HTMLやCSS・JavaScriptをはじめとするプログラミングスキルを武器に、時間と場所に捉われない自由な生き方を目指してみませんか?今すぐ行動したい方は以下の記事をチェック!

読者料典 【無料】ゼロから学ぶHTML/CSS/JavaScript入門 ←こちらから!

このWebサイトは現役のエンジニアが以下3点を目的として運営しています。

  1. 勉強:一度理解した内容を忘れないように。
    → アウトプットは「最強のインプット」である! 
  2. 備忘:忘れたとしても後から見返せるように。
    → 未来の自分への「お手紙」を書いています。 
  3. 共有:〇〇ってこうだったんだ!の感動をシェアできるように。
    → あなたの知識は誰かにとっての「価値ある情報」です。 

副業ブログの始め方はこちらから

スポンサーリンク
HTMLWEBデザイン
シェアする
ビズドットオンラインをフォローする
blank
ビズドットオンライン
タイトルとURLをコピーしました