この記事では、HTML5で導入された<main>タグについて詳しく解説します。
<main>タグの定義や役割、基本的な使い方から、ベストプラクティス、他のセクショニングコンテンツとの違い、スタイリング方法、実践例までをカバーします。
また、よくある質問にも答えますので、初心者の方でも安心して学べる内容となっています。
この記事を読むことで、<main>タグを正しく使いこなせるようになり、Webページの構造をよりセマンティックでアクセシブルにする方法がわかります。
mainタグとは
定義と役割
<main>タグは、HTML5で導入されたセマンティック要素の一つで、文書の主要なコンテンツを示すために使用されます。
具体的には、ページの中心的な内容を含む部分を示し、ナビゲーションバーやサイドバー、フッターなどの補助的なコンテンツとは区別されます。
これにより、検索エンジンやスクリーンリーダーなどの支援技術がページの主要な内容を正確に理解しやすくなります。
mainタグの基本的な使い方
mainタグの基本構文
<main>タグの基本的な構文は非常にシンプルです。
以下のように、主要なコンテンツを囲むために使用します。
<main>
<!-- 主要なコンテンツがここに入ります -->
</main>mainタグの配置場所
<main>タグは、通常、ページの主要なコンテンツを含む部分に配置されます。
具体的には、ヘッダーやナビゲーションバーの後、フッターの前に配置されることが一般的です。
以下は、典型的なHTML文書の構造例です。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>mainタグの例</title>
</head>
<body>
<header>
<h1>サイトのタイトル</h1>
<nav>
<ul>
<li><a href="#">ホーム</a></li>
<li><a href="#">サービス</a></li>
<li><a href="#">お問い合わせ</a></li>
</ul>
</nav>
</header>
<main>
<h2>主要なコンテンツの見出し</h2>
<p>ここに主要なコンテンツが入ります。</p>
</main>
<footer>
<p>© 2023 サイト名</p>
</footer>
</body>
</html>
mainタグの使用例
以下に、<main>タグを使用した具体的な例を示します。
この例では、主要なコンテンツとして記事のリストを表示しています。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>mainタグの使用例</title>
</head>
<body>
<header>
<h1>ブログのタイトル</h1>
<nav>
<ul>
<li><a href="#">ホーム</a></li>
<li><a href="#">ブログ</a></li>
<li><a href="#">お問い合わせ</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>記事のタイトル1</h2>
<p>この記事の概要がここに入ります。</p>
</article>
<article>
<h2>記事のタイトル2</h2>
<p>この記事の概要がここに入ります。</p>
</article>
</main>
<footer>
<p>© 2023 ブログ名</p>
</footer>
</body>
</html>
この例では、<main>タグ内に複数の<article>タグを配置し、それぞれの記事を表現しています。
これにより、主要なコンテンツが明確に区分され、検索エンジンや支援技術がページの構造を理解しやすくなります。
以上が、<main>タグの基本的な使い方とその役割です。
次のセクションでは、<main>タグのベストプラクティスについて詳しく見ていきます。
mainタグのベストプラクティス
mainタグの適切な使用シナリオ
mainタグは、Webページの主要なコンテンツを示すために使用されます。
以下のようなシナリオで適切に使用することが推奨されます。
- ブログ記事: 記事の本文部分をmainタグで囲むことで、主要なコンテンツを明確に示すことができます。
- ニュースサイト: ニュース記事の本文や関連する主要な情報をmainタグで囲むことで、ユーザーと検索エンジンにとって重要な情報を強調できます。
- 商品ページ: 商品の詳細情報やレビューなど、ユーザーが最も関心を持つ部分をmainタグで囲むことで、ページの主要なコンテンツを明確にします。
mainタグとセマンティクス
HTML5では、セマンティクス(意味論)が非常に重要視されています。
mainタグを使用することで、ページの主要なコンテンツが何であるかを明確に示すことができます。
これにより、検索エンジンやスクリーンリーダーなどの支援技術がページの構造を理解しやすくなります。
例えば、以下のようなHTMLコードを考えてみましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ブログ記事の例</title>
</head>
<body>
<header>
<h1>ブログのタイトル</h1>
</header>
<nav>
<ul>
<li><a href="#">ホーム</a></li>
<li><a href="#">記事一覧</a></li>
<li><a href="#">お問い合わせ</a></li>
</ul>
</nav>
<main>
<article>
<h2>記事のタイトル</h2>
<p>この記事の内容がここに入ります。</p>
</article>
</main>
<footer>
<p>© 2023 ブログの著者</p>
</footer>
</body>
</html>
この例では、mainタグを使用して記事の本文部分を明確に示しています。
これにより、検索エンジンや支援技術がページの主要なコンテンツを正確に理解できます。
mainタグのアクセシビリティへの影響
mainタグを使用することで、アクセシビリティが向上します。
スクリーンリーダーなどの支援技術は、mainタグを認識して主要なコンテンツに直接アクセスすることができます。
これにより、視覚障害者や他の障害を持つユーザーがページをより簡単にナビゲートできるようになります。
以下は、スクリーンリーダーがmainタグをどのように認識するかの例です。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>アクセシビリティの例</title>
</head>
<body>
<header>
<h1>ウェブサイトのタイトル</h1>
</header>
<nav>
<ul>
<li><a href="#">ホーム</a></li>
<li><a href="#">サービス</a></li>
<li><a href="#">お問い合わせ</a></li>
</ul>
</nav>
<main>
<h2>主要なコンテンツ</h2>
<p>この部分が主要なコンテンツです。</p>
</main>
<footer>
<p>© 2023 ウェブサイトの著者</p>
</footer>
</body>
</html>
この例では、スクリーンリーダーがmainタグを認識し、ユーザーに主要なコンテンツがどこにあるかを知らせることができます。
これにより、ユーザーはページの主要な部分に迅速にアクセスできるようになります。
mainタグを適切に使用することで、Webページのセマンティクスとアクセシビリティが大幅に向上します。
これにより、ユーザーエクスペリエンスが向上し、検索エンジンの評価も高まる可能性があります。
mainタグと他のセクショニングコンテンツ
HTMLには、文書の構造を明確にするためのセクショニングコンテンツ(セクション要素)がいくつか存在します。
これらの要素は、文書の異なる部分を意味的に区別するために使用されます。
ここでは、mainタグと他の主要なセクショニングコンテンツであるsectionタグ、articleタグ、asideタグとの違いについて詳しく解説します。
sectionタグとの違い
sectionタグは、文書の中でテーマごとに区切られたセクションを表します。
通常、見出し(h1〜h6タグ)を含むことが多く、文書の特定のテーマやトピックに関連する内容をグループ化します。
mainタグとの違い:
- mainタグは文書の主要なコンテンツを表し、ページ内で一度だけ使用されるべきです。
- sectionタグは文書内で複数回使用でき、特定のテーマやトピックに関連するセクションを区切るために使用されます。
例:
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>mainタグとsectionタグの違い</title>
</head>
<body>
<header>
<h1>ウェブサイトのタイトル</h1>
</header>
<main>
<section>
<h2>セクション1</h2>
<p>これはセクション1の内容です。</p>
</section>
<section>
<h2>セクション2</h2>
<p>これはセクション2の内容です。</p>
</section>
</main>
<footer>
<p>フッターの内容</p>
</footer>
</body>
</html>
articleタグとの違い
articleタグは、独立して再利用可能なコンテンツを表します。
例えば、ブログ記事、ニュース記事、フォーラムの投稿などが該当します。
articleタグ内のコンテンツは、それ自体で完結していることが求められます。
mainタグとの違い:
- mainタグは文書全体の主要なコンテンツを表します。
- articleタグは独立して再利用可能なコンテンツを表し、文書内で複数回使用できます。
例:
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>mainタグとarticleタグの違い</title>
</head>
<body>
<header>
<h1>ウェブサイトのタイトル</h1>
</header>
<main>
<article>
<h2>記事1のタイトル</h2>
<p>これは記事1の内容です。</p>
</article>
<article>
<h2>記事2のタイトル</h2>
<p>これは記事2の内容です。</p>
</article>
</main>
<footer>
<p>フッターの内容</p>
</footer>
</body>
</html>
asideタグとの違い
asideタグは、文書の主要なコンテンツに関連する補足情報を表します。
例えば、サイドバー、引用、関連リンクなどが該当します。
asideタグ内のコンテンツは、主要なコンテンツを補完する役割を果たします。
mainタグとの違い:
- mainタグは文書の主要なコンテンツを表します。
- asideタグは主要なコンテンツに関連する補足情報を表し、文書内で複数回使用できます。
例:
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>mainタグとasideタグの違い</title>
</head>
<body>
<header>
<h1>ウェブサイトのタイトル</h1>
</header>
<main>
<article>
<h2>記事のタイトル</h2>
<p>これは記事の内容です。</p>
</article>
<aside>
<h2>関連情報</h2>
<p>これは記事に関連する補足情報です。</p>
</aside>
</main>
<footer>
<p>フッターの内容</p>
</footer>
</body>
</html>
これらのセクショニングコンテンツを適切に使い分けることで、文書の構造が明確になり、SEOやアクセシビリティの向上にもつながります。
mainタグのスタイリング
CSSでの基本的なスタイリング
mainタグは、HTML文書の主要なコンテンツを含むため、適切なスタイリングが重要です。
以下に、mainタグに対する基本的なCSSスタイリングの例を示します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>mainタグの基本スタイリング</title>
<style>
main {
background-color: #f0f0f0; /* 背景色を薄いグレーに設定 */
padding: 20px; /* 内側の余白を設定 */
margin: 20px auto; /* 上下の余白を設定し、中央揃え */
max-width: 800px; /* 最大幅を設定 */
border-radius: 8px; /* 角を丸くする */
}
</style>
</head>
<body>
<main>
<h1>mainタグの基本スタイリング</h1>
<p>このセクションはmainタグで囲まれています。背景色や余白、角の丸みなどがCSSで設定されています。</p>
</main>
</body>
</html>
この例では、mainタグに対して背景色、内側の余白、外側の余白、最大幅、角の丸みを設定しています。
これにより、mainタグ内のコンテンツが視覚的に区別され、読みやすくなります。
レスポンシブデザインにおけるmainタグ
レスポンシブデザインは、異なるデバイスや画面サイズに応じてWebページのレイアウトを調整する手法です。
mainタグもレスポンシブデザインの一部として適切にスタイリングすることが重要です。
以下に、メディアクエリを使用したレスポンシブデザインの例を示します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>mainタグのレスポンシブデザイン</title>
<style>
main {
background-color: #f0f0f0;
padding: 20px;
margin: 20px auto;
max-width: 800px;
border-radius: 8px;
}
@media (max-width: 600px) {
main {
padding: 10px; /* 小さい画面では内側の余白を小さくする */
margin: 10px; /* 小さい画面では外側の余白を小さくする */
}
}
</style>
</head>
<body>
<main>
<h1>mainタグのレスポンシブデザイン</h1>
<p>このセクションはmainタグで囲まれています。画面サイズに応じて余白が調整されます。</p>
</main>
</body>
</html>
この例では、画面幅が600px以下の場合に、mainタグの内側と外側の余白を小さくするようにメディアクエリを使用しています。
これにより、スマートフォンなどの小さい画面でも適切なレイアウトが維持されます。
mainタグのカスタムスタイル例
mainタグに対してカスタムスタイルを適用することで、Webページのデザインをさらに洗練させることができます。
以下に、カスタムスタイルの例を示します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>mainタグのカスタムスタイル</title>
<style>
main {
background: linear-gradient(135deg, #ffcc33, #ff6699); /* グラデーション背景 */
color: #fff; /* 文字色を白に設定 */
padding: 30px;
margin: 30px auto;
max-width: 900px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 影を追加 */
border-radius: 12px;
font-family: 'Arial', sans-serif; /* フォントを設定 */
}
</style>
</head>
<body>
<main>
<h1>mainタグのカスタムスタイル</h1>
<p>このセクションはmainタグで囲まれています。グラデーション背景や影、フォントなどがカスタムスタイルとして適用されています。</p>
</main>
</body>
</html>
この例では、mainタグに対してグラデーション背景、文字色、影、フォントなどのカスタムスタイルを適用しています。
これにより、mainタグ内のコンテンツがより魅力的に表示されます。
以上のように、mainタグに対するスタイリングは、Webページのデザインとユーザビリティを向上させるために非常に重要です。
基本的なスタイリングからレスポンシブデザイン、カスタムスタイルまで、さまざまな方法でmainタグを効果的に活用しましょう。
mainタグの実践例
シンプルなWebページでの使用例
まずは、シンプルなWebページでのmainタグの使用例を見てみましょう。
以下のコードは、基本的なHTML構造を持つWebページの例です。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>シンプルなWebページ</title>
</head>
<body>
<header>
<h1>私のWebサイト</h1>
<nav>
<ul>
<li><a href="#">ホーム</a></li>
<li><a href="#">ブログ</a></li>
<li><a href="#">お問い合わせ</a></li>
</ul>
</nav>
</header>
<main>
<h2>ようこそ！</h2>
<p>これはシンプルなWebページの例です。</p>
</main>
<footer>
<p>© 2023 私のWebサイト</p>
</footer>
</body>
</html>
この例では、mainタグはページの主要なコンテンツを囲むために使用されています。
headerタグとfooterタグはそれぞれページのヘッダーとフッターを定義しており、mainタグはその間に配置されています。
複雑なWebアプリケーションでの使用例
次に、複雑なWebアプリケーションでのmainタグの使用例を見てみましょう。
以下のコードは、複数のセクションを持つWebアプリケーションの例です。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>複雑なWebアプリケーション</title>
<style>
body {
font-family: Arial, sans-serif;
}
header, footer {
background-color: #f8f8f8;
padding: 10px;
text-align: center;
}
main {
padding: 20px;
}
section {
margin-bottom: 20px;
}
</style>
</head>
<body>
<header>
<h1>Webアプリケーション</h1>
<nav>
<ul>
<li><a href="#">ダッシュボード</a></li>
<li><a href="#">設定</a></li>
<li><a href="#">ヘルプ</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>ダッシュボード</h2>
<p>ここにはダッシュボードの内容が表示されます。</p>
</section>
<section>
<h2>設定</h2>
<p>ここには設定の内容が表示されます。</p>
</section>
<section>
<h2>ヘルプ</h2>
<p>ここにはヘルプの内容が表示されます。</p>
</section>
</main>
<footer>
<p>© 2023 Webアプリケーション</p>
</footer>
</body>
</html>
この例では、mainタグの中に複数のsectionタグが含まれています。
各sectionタグは異なるコンテンツセクションを表しており、mainタグはそれらをまとめて主要なコンテンツとして定義しています。
mainタグを含むテンプレートの作成
最後に、mainタグを含むHTMLテンプレートの作成例を見てみましょう。
このテンプレートは、再利用可能な基本構造を提供します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>テンプレート</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header, footer {
background-color: #333;
color: #fff;
padding: 10px 0;
text-align: center;
}
main {
padding: 20px;
}
</style>
</head>
<body>
<header>
<h1>サイト名</h1>
<nav>
<ul>
<li><a href="#">ホーム</a></li>
<li><a href="#">ブログ</a></li>
<li><a href="#">お問い合わせ</a></li>
</ul>
</nav>
</header>
<main>
<h2>ページタイトル</h2>
<p>ここに主要なコンテンツが入ります。</p>
</main>
<footer>
<p>© 2023 サイト名</p>
</footer>
</body>
</html>
このテンプレートは、基本的なWebページの構造を提供し、mainタグを使用して主要なコンテンツを定義しています。
このテンプレートを基に、さまざまなページを簡単に作成することができます。
以上が、mainタグの実践例です。
シンプルなWebページから複雑なWebアプリケーションまで、mainタグは主要なコンテンツを明確に定義するために非常に有用です。
よくある質問(FAQ)
mainタグは複数使用できるか？
mainタグは、HTML5のセマンティクスにおいて特定の役割を持つタグです。
mainタグは、文書の主要なコンテンツを示すために使用されます。
そのため、1つのHTML文書内でmainタグを複数使用することは推奨されていません。
mainタグは1つの文書に1回だけ使用するのが適切です。
例えば、以下のようにmainタグを複数使用するのは避けるべきです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>mainタグの使用例</title>
</head>
<body>
<main>
<h1>主要コンテンツ1</h1>
<p>ここは主要コンテンツ1の内容です。</p>
</main>
<main>
<h1>主要コンテンツ2</h1>
<p>ここは主要コンテンツ2の内容です。</p>
</main>
</body>
</html>このような使い方は避け、文書全体の主要なコンテンツを1つのmainタグで囲むようにしましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>mainタグの使用例</title>
</head>
<body>
<main>
<h1>主要コンテンツ</h1>
<p>ここは主要コンテンツの内容です。</p>
<section>
<h2>セクション1</h2>
<p>ここはセクション1の内容です。</p>
</section>
<section>
<h2>セクション2</h2>
<p>ここはセクション2の内容です。</p>
</section>
</main>
</body>
</html>mainタグとSEOの関係
mainタグはSEO(検索エンジン最適化)においても重要な役割を果たします。
検索エンジンは、mainタグ内のコンテンツを文書の主要な部分として認識します。
これにより、検索エンジンはページの内容をより正確に理解し、適切にインデックスすることができます。
mainタグを適切に使用することで、以下のようなSEO効果が期待できます。
- コンテンツの明確化: mainタグを使用することで、検索エンジンに対して主要なコンテンツがどこにあるかを明確に示すことができます。
- アクセシビリティの向上: mainタグはスクリーンリーダーなどの支援技術に対しても有益です。
これにより、ユーザーエクスペリエンスが向上し、間接的にSEOにも良い影響を与えます。
mainタグの互換性とサポート状況
mainタグはHTML5で導入されたタグであり、主要なブラウザで広くサポートされています。
以下の表は、主要なブラウザにおけるmainタグのサポート状況を示しています。
| ブラウザ | サポート状況 |
|---|---|
| Google Chrome | 5.0以降 |
| Mozilla Firefox | 4.0以降 |
| Safari | 5.1以降 |
| Microsoft Edge | 全バージョン |
| Internet Explorer | 11以降 |
このように、mainタグはほとんどの現代的なブラウザでサポートされています。
ただし、古いバージョンのInternet Explorer(IE10以前)ではサポートされていないため、互換性を考慮する場合は注意が必要です。
互換性を確保するために、HTML5 Shivなどのポリフィルを使用することが推奨されます。
HTML5 Shivは、古いブラウザでHTML5の新しい要素をサポートするためのスクリプトです。
<!--[if lt IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
<![endif]-->このスクリプトを使用することで、古いブラウザでもmainタグを含むHTML5の新しい要素を正しく表示することができます。
