HTMLのmainタグについて書いています。
mainタグは、Webページの主要なコンテンツを示すために使用されます。
これは、ヘッダー、フッター、サイドバー、ナビゲーションなどの繰り返される要素とは異なり、ページの中核となるコンテンツをマークアップするための重要な要素です。
mainタグの基本的な使い方と配置
mainタグは、Webページの主要なコンテンツを囲むだけで使用できます。
通常、<body>タグの直下、<header>タグの後に配置され、<footer>タグの直前に記述します。
<body>
<header>
<h1>サイト名</h1>
<nav>
<ul>
<li><a href="/">ホーム</a></li>
<li><a href="/about">会社概要</a></li>
<li><a href="/products">製品情報</a></li>
<li><a href="/contact">お問い合わせ</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>記事のタイトル</h2>
<p>記事の本文...</p>
</article>
<aside>
<h3>関連コンテンツ</h3>
<ul>
<li><a href="/news/1">最新ニュース</a></li>
<li><a href="/blog/2">過去の記事</a></li>
</ul>
</aside>
</main>
<footer>
<p>© 2025 〇〇株式会社</p>
</footer>
</body>
上記の例では、<article>要素と<aside>要素が、このWebページの主要なコンテンツとして<main>タグで囲まれています。
ブラウザで確認すると、下記のように表示されました。
mainタグの意味合いと重要性
mainタグは、囲まれたコンテンツがWebページの主要な内容であり、ドキュメントの主題に関連することを示す意味合い（セマンティクス）を持っています。
これは、単にコンテンツをグループ化するためだけでなく、Webページの構造を明確にし、検索エンジンやスクリーンリーダーなどの支援技術が主要なコンテンツを認識できるようにするために重要です。
mainタグとアクセシビリティ
mainタグを適切に使用することは、Webサイトのアクセシビリティ向上に大きく貢献します。
- ランドマーク要素: mainタグは、ARIA landmark roleの
mainを暗黙的に持ちます。これにより、スクリーンリーダーなどの支援技術のユーザーは、Webページの主要なコンテンツに直接ジャンプすることができます。これは、キーボード操作だけでWebサイトを閲覧するユーザーにとっても非常に便利です。 - 構造の理解: mainタグを使用することで、Webページの構造がより明確になり、支援技術のユーザーがコンテンツの役割を理解しやすくなります。
mainタグの使用例
mainタグは、Webページの主要なコンテンツを包含するために使用します。
これには、以下のような要素が含まれることがあります。
- 記事の本文 (
<article>) - 製品リスト
- 検索結果
- フォーム
- インタラクティブなコンテンツ
mainタグは、Webページに一つだけ存在することが推奨されます。
複数のmainタグを使用する場合は、それぞれにaria-label属性などで明確なラベルを付ける必要がありますが、通常は単一の<main>要素で主要なコンテンツ全体を囲むのが一般的です。
mainタグを使用する際の注意点
- 1つの
<main>要素: 各HTMLドキュメントには、原則として1つだけ<main>要素が存在するべきです。 - 主要コンテンツのみ:
<main>タグの内側には、Webページの主要なコンテンツのみを記述します。ヘッダー、フッター、サイドバー、ナビゲーションなどの繰り返される要素は含めません。 <body>直下に配置:<main>タグは、<body>タグの直下（<header>の後）に配置し、<footer>タグの直前に記述するのが一般的です。- スタイリングは CSS で:
<main>タグ自体の見た目や、その内部の要素のスタイルは、CSS で制御します。
mainタグの記述例
以下に、様々なWebページの主要なコンテンツを<main>タグでマークアップした例を示します。
例1：ブログ記事とサイドバー
<body>
<header>...</header>
<main>
<article>...</article>
<aside>...</aside>
</main>
<footer>...</footer>
</body>
例2：製品リスト
<body>
<header>...</header>
<main>
<h1>製品一覧</h1>
<ul>
<li>製品A...</li>
<li>製品B...</li>
<li>製品C...</li>
</ul>
</main>
<footer>...</footer>
</body>
例3：お問い合わせフォーム
<body>
<header>...</header>
<main>
<h1>お問い合わせ</h1>
<form action="/submit" method="post">
<div>
<label for="name">お名前:</label>
<input type="text" id="name" name="name">
</div>
<div>
<label for="email">メールアドレス:</label>
<input type="email" id="email" name="email">
</div>
<button type="submit">送信</button>
</form>
</main>
<footer>...</footer>
</body>
まとめ
mainタグは、Webページの主要なコンテンツを意味的にマークアップし、アクセシビリティを向上させるための重要なHTML要素です。
Webページの主題となるコンテンツをmainタグで適切に囲むことで、Webページの構造が明確になり、支援技術のユーザーや検索エンジンにとって理解しやすいWebサイトを構築することができます。
Webページの主要なコンテンツをマークアップする際には、積極的にmainタグを活用しましょう。
コメント