HTML Living Standard/main

main 要素

<main> 要素は、文書またはアプリケーションの「主要なコンテンツ」を表します。この要素は、1つのページで最も重要な情報を含む領域を示すために使用され、ナビゲーションや補助的な情報を含むセクションとは区別されます。

概要

役割: ページの主要な内容をグループ化する。
特徴:
- 文書内で1回だけ使用可能。
- ナビゲーションバーやサイドバーなどの補助的なセクションを除いた主要コンテンツを含む。
アクセシビリティ:
- スクリーンリーダーや検索エンジンに対して文書構造を明確に示す。
- WAI-ARIAのrole="main"に相当する役割を持つ。

使用例

基本的な使用例

以下は、<main> 要素で主要なコンテンツを示す例です。

<header>
  <h1>ウェブサイトのタイトル</h1>
  <nav>
    <ul>
      <li><a href="/about">About</a></li>
      <li><a href="/services">Services</a></li>
      <li><a href="/contact">Contact</a></li>
    </ul>
  </nav>
</header>

<main>
  <h2>この記事について</h2>
  <p>この記事では、HTML Living Standardについて解説します。</p>
  <section>
    <h3>背景</h3>
    <p>HTMLの標準は進化し続けています。</p>
  </section>
</main>

<footer>
  <p>&copy; 2025 Your Website</p>
</footer>

この例では、<main> 要素内にページの主要コンテンツが含まれており、ヘッダーとフッターは除外されています。

アクセシビリティの向上

スクリーンリーダーを使用するユーザーにとって、<main> 要素は主要なコンテンツに素早くアクセスする手段を提供します。

<main>
  <h1>サイトの主題</h1>
  <article>
    <h2>記事1</h2>
    <p>記事1の内容...</p>
  </article>
</main>

属性

<main> 要素は、グローバル属性をサポートします。特定のカスタムスタイリングやスクリプト処理を追加する際に役立ちます。

スタイリング例

<main class="content-area">
  <h1>メインコンテンツ</h1>
</main>

CSS

.content-area {
  margin: 20px;
  padding: 15px;
  background-color: #f9f9f9;
}

使用上の注意

1ページ1つ: <main> 要素は、文書内に1つだけ配置できます。同じページに複数の <main> 要素を使用すると、意味が曖昧になり、アクセシビリティが損なわれます。
補助的コンテンツを含めない: ナビゲーションバー、サイドバー、広告など、主要コンテンツではない部分は含めないでください。
ネスト禁止: <main> 要素は他のセクショニングルート（例: <article>、<aside>、<nav>）内にネストしてはいけません。

不適切な使用例

<main>
  <nav>
    <ul>
      <li><a href="/home">ホーム</a></li>
      <li><a href="/about">About</a></li>
    </ul>
  </nav>
</main>

この例は誤りです。<main> 要素内に補助的なナビゲーション要素を含めるべきではありません。

ベストプラクティス

セマンティックHTMLの活用: ページ構造を明確にするために <main> 要素を適切に使用します。
正確な範囲の定義: 主要コンテンツだけを含めるように <main> の範囲を定義します。

まとめ

<main> 要素は、文書またはアプリケーションの主要なコンテンツを示すための重要な要素です。アクセシビリティを向上させるだけでなく、文書のセマンティクスを明確にする役割を果たします。正しい使用により、ユーザー体験と検索エンジン最適化（SEO）の両方に貢献します。