HTML辞書ホームへ
HTML要素 辞書 by Sentaro
<main>
メインコンテンツ（Main）要素。ドキュメントの主要なコンテンツをマークアップします。
info
概要
<main> 要素は、ドキュメントの**主要な内容**を囲むために使用されます。このコンテンツは、ドキュメントの中心的なトピック、またはアプリケーションの中心的な機能に直接関連している必要があります。
文書の構造を明確にし、スクリーンリーダーや検索エンジンなどのユーザーエージェントにメインコンテンツの場所を知らせる役割があります。
play_circle
デモ (静的表示)
HTML (Source)
<body>
<header>サイトナビゲーション</header>
<main>
<h1>記事のタイトル</h1>
<p>これがメインの記事内容です。</p>
</main>
<footer>著作権情報</footer>
</body>
Preview (Result)
ヘッダーやナビゲーション
<main> のコンテンツ
記事のタイトル
これがメインの記事内容です。
フッター
list
属性 (Attributes)
| 属性名 | 説明 |
|---|---|
| id | グローバル属性。ページ内での一意な識別子。通常、スキップリンクのターゲットとして使用されます。 |
| class | グローバル属性。要素にスタイルを適用するために使用されるクラス名。 |
| hidden | グローバル属性。要素の表示を隠します。 |
code
実用例
1. ページ全体での使用
<body>
<header>サイトのグローバルナビゲーション</header>
<main>
<article>
<h1>メインの記事タイトル</h1>
<p>記事の内容...</p>
</article>
</main>
<footer>著作権と連絡先情報</footer>
</body>
2. サイト内の検索結果ページでの使用
<main>
<h1>検索結果: "HTML"</h1>
<ul>
<li>結果 1</li>
<li>結果 2</li>
</ul>
</main>
3. スキップリンクのターゲットとしての使用
<a href="#main-content">メインコンテンツへスキップ</a>
...
<main id="main-content">
<h1>メインコンテンツ</h1>
<!-- ...コンテンツ... -->
</main>
lightbulb
知っておくべき重要事項
warning
ドキュメント内での使用回数制限
<main> 要素は、**ドキュメント内で一度しか使用してはなりません**。
また、ドキュメントの主要なコンテンツのみを含める必要があります。サイドバー、ナビゲーションリンク、著作権表示、ロゴなど、ドキュメント全体で共通するコンテンツは含めるべきではありません。
accessibility_new
アクセシビリティ (ランドマーク)
<main> 要素は、暗黙のうちに role="main" というARIAランドマークロールを持ちます。これは、スクリーンリーダーのユーザーがページ内の主要なコンテンツ領域に直接ジャンプするための重要な手段となります。