• Home
  • Web制作
  • Webサイトの主役を担う！<main>タグを使いこなす完全ガイド

Webサイトの主役を担う！<main>タグを使いこなす完全ガイド

schedule
Tags: HTML

Webサイトの主役を担う！<main>タグを使いこなす完全ガイド

Webサイトを制作する上で、HTMLは欠かせない要素の一つです。その中でも、近年注目を集めているのが <main> タグ。

この <main> タグ、実はウェブサイトの主要コンテンツをマークアップするために作られた、とても重要な役割を担っているタグなのです。

今回は、<main> タグの基本的な使い方から、SEOやアクセシビリティにおける重要性、そして使用上の注意点まで、具体的なコード例を交えながらわかりやすく解説してまいります。

1. <main> タグとは？

<main> タグは、HTML5から導入された比較的新しいタグです。

その役割は、Webページの主要コンテンツ（本文） をマークアップすること。

例えば、ブログ記事の内容や、ECサイトにおける商品情報などが該当します。

<main> タグを使うことで、検索エンジンやブラウザに対して「この部分がこのWebページのメインコンテンツですよ」と明示的に伝えることができるのです。

2. <main> タグを使うメリット

<main> タグを使用するメリットは、大きく分けて以下の3つが挙げられます。

  1. SEO効果の向上 検索エンジンは、Webページの構造を理解し、ユーザーにとって有益な情報を適切に評価するために、HTMLタグを用いて情報を収集しています。 <main> タグを使用することで、検索エンジンはWebページの主要コンテンツをより正確に認識しやすくなるため、結果として検索順位の向上に繋がる可能性も期待できます。
  2. アクセシビリティの向上 スクリーンリーダーなどの支援技術を利用するユーザーにとって、Webページの構造を理解することは非常に重要です。 <main> タグで主要コンテンツをマークアップすることで、支援技術はWebページの内容をより正確に読み上げることが可能となり、情報へのアクセスが容易になります。
  3. コードの可読性向上 <main> タグを使用することで、HTMLのコードがより構造化され、可読性が向上します。 これは、開発者同士でコードを共有する際や、後からコードを修正する際に役立ちます。

3. <main> タグの使い方

<main> タグは、主要コンテンツを囲むように記述します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>ページタイトル</title>
</head>
<body>

  <header>…</header>

  <main>
    <h1>ページの見出し</h1>
    <p>本文…</p>
  </main>

  <footer>…</footer>

</body>
</html>

上記は、<main> タグを使ったHTMLの簡単な例です。

<header> や <footer> など、他の要素と組み合わせて使用することで、より明確にWebページの構造を示すことができます。

4. <main> タグ使用時の注意点

<main> タグは、Webページの構造を明確にする上で非常に便利なタグですが、いくつか注意点があります。

  1. 1ページに1回だけ使用 <main> タグは、Webページ内の主要コンテンツを示すためのタグであるため、1つのHTML文書内に複数回使用することはできません。 もし、複数のコンテンツを区別したい場合は、<article> タグや <section> タグを使用するなど、他の適切なタグを検討しましょう。
  2. <article> タグ、<aside> タグ、<nav> タグ、<header> タグ、<footer> タグの中に含めない <main> タグは、これらのタグよりも上位の概念を示すタグのため、これらのタグの中に含めることはできません。

5. まとめ

<main> タグは、Webページの主要コンテンツをマークアップするための重要なタグです。

適切に使用することで、SEO効果の向上やアクセシビリティの向上、コードの可読性向上といった多くのメリットを得られます。

<main> タグを使いこなし、より良いWebサイト作りを目指しましょう。

関連記事