mainタグとは何か
mainタグは、HTMLドキュメント内のメインコンテンツを定義します。mainタグにはページの主要なコンテンツが含まれます。主なコンテンツ領域を示すために1つのmain要素のみを使用することが推奨されます。
<main> は HTML の要素で、文書の <body> の主要なコンテンツを表します。メインコンテンツ領域は、文書の中心的なトピック、またはアプリケーションの中心的な機能に直接関連する、または展開されたコンテンツで構成されます。
参考：mdn web docs
mainタグの使い方と、他のセクションとの関係について
mainタグは、ページ内の主要なコンテンツを囲むために使用されます。他のセクションとの違いを理解するために、mainタグとセクションタグの違いについて簡単に見てみましょう。セクションタグは、ページの異なるセクションを定義するために使用され、mainタグはページの主要なコンテンツを定義するために使用されます。mainタグは、bodyタグ内で1回のみ使用する必要がありますが、セクションタグは複数回使用することができます。
<body>
<header>
<!-- ヘッダーコンテンツ -->
</header>
<nav>
<!-- ナビゲーションコンテンツ -->
</nav>
<main>
<!-- メインコンテンツ -->
</main>
<aside>
<!-- サイドバーコンテンツ -->
</aside>
<footer>
<!-- フッターコンテンツ -->
</footer>
</body>mainタグの基本的な使い方
mainタグは、ページの主要なコンテンツを囲むために使用されますが、必ずしもページ全体を含む必要はありません。例えば、サイト内のセクションごとにmainタグを使用することができます。
<body>
<header>
<!-- ヘッダーコンテンツ -->
</header>
<main>
<section id="section1">
<!-- セクション1のコンテンツ -->
</section>
<section id="section2">
<!-- セクション2のコンテンツ -->
</section>
</main>
<footer>
<!-- フッターコンテンツ -->
</footer>
</body>mainタグ内に他のHTML要素を含める方法
mainタグの中には、他のHTML要素が含まれることができます。これには、段落や画像、リンク、テーブルなどが含まれます。
<main>
<h1>メインのタイトル</h1>
<p>ここにテキストが入ります。</p>
<img src="image.jpg" alt="イメージ">
<a href="page2.html">リンク</a>
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
</tr>
<tr>
<td>Row 2, Cell 1</td>
<td>Row 2, Cell 2</td>
</tr>
</table>
</main>CSSを使用したmainタグのスタイリング方法
mainタグをスタイリングするために、CSSを使用することができます。
main {
background-color: #f4f4f4;
padding: 20px;
border: 1px solid #ddd;
}アクセシビリティへの配慮
スクリーンリーダーへの対応
mainタグを使用する際には、スクリーンリーダーがページの主要なコンテンツを正しく認識できるようにすることが重要です。
<main role="main">
<h1>メインのタイトル</h1>
<p>ここにテキストが入ります。</p>
<img src="image.jpg" alt="イメージ">
<a href="page2.html">リンク</a>
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
</tr>
<tr>
<td>Row 2, Cell 1</td>
<td>Row 2, Cell 2</td>
</tr>
</table>
</main>- アクセシビリティ
障害を持つ人や高齢者、一時的な制約を持つ人など、さまざまな能力や状況を考慮したデザインや技術の提供を意味します。 - スクリーンリーダー
コンピューター上のテキストや要素を音声やブライル（点字）、または拡大表示などの形式でユーザーに読み上げることができる、コンピューターを使用する際に利用するソフトウェアです。
ARIA属性の活用
<main role="main">
<!-- メインコンテンツ -->
</main>mainタグのまとめ
mainタグは、ウェブページの主要なコンテンツを定義するために使用され、ページの他の部分と区別されます。mainタグを適切に使用することで、ウェブページの構造が明確になり、SEOとアクセシビリティの両方においてメリットがあります。
mainタグを使用してコンテンツを適切に構造化することで、検索エンジンはページの主要なコンテンツを容易に理解できます。これにより、SEOのパフォーマンスが向上し、検索結果での表示順位が上がる可能性があります。また、ユーザーが重要な情報を見つけやすくなるため、ユーザーエクスペリエンスも向上します。
適切にマークアップして情報を正確に読み取ってもらいましょう。