<main>
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
<main>
は HTML の要素で、文書の <body>
の主要なコンテンツを表します。メインコンテンツ領域は、文書の中心的なトピック、またはアプリケーションの中心的な機能に直接関連する、または展開されたコンテンツで構成されます。
試してみましょう
文書には hidden
属性が指定されていない <main>
要素を 2 つ以上置くことはできません。
コンテンツカテゴリー | フローコンテンツ, 知覚可能コンテンツ |
---|---|
許可されている内容 | フローコンテンツ |
タグの省略 | 不可。開始タグと終了タグの両方が必須。 |
許可されている親要素 |
フローコンテンツを受け入れる場所、但し階層的に正しい main 要素であること。
|
暗黙の ARIA ロール |
main
|
許可されている ARIA ロール | 許可されている role なし |
DOM インターフェイス | HTMLElement |
属性
この要素にはグローバル属性のみがあります。
使用上の注意
例
<!-- 他のコンテンツ -->
<main>
<h1>Apples</h1>
<p>The apple is the pomaceous fruit of the apple tree.</p>
<article>
<h2>Red Delicious</h2>
<p>
These bright red apples are the most common found in many supermarkets.
</p>
<p>…</p>
<p>…</p>
</article>
<article>
<h2>Granny Smith</h2>
<p>These juicy, green apples make a great filling for apple pies.</p>
<p>…</p>
<p>…</p>
</article>
</main>
<!-- 他のコンテンツ -->
結果
アクセシビリティの考慮
ランドマーク
<main>
要素は main
ランドマークロールのように動作します。ランドマークは、文書の長いセクションをすばやく識別して移動するための支援技術として使用することができます。 古いブラウザーの互換性の確認ができない限り、 <main>
を role="main"
の宣言付きで使用するべきです。
スキップナビゲーション
スキップナビゲーションは、"skipnav" とも呼ばれますが、支援技術のユーザーが繰り返されるコンテンツ (メインナビゲーション、情報バナー、等) の大きなセクションをすばやく飛ばすことができる技法です。これによって、ユーザーがページのメインコンテンツをより早くアクセスすることができます。
id
属性を追加することで、 <main>
要素がスキップナビゲーションリンクのターゲットになることができます。
<body>
<a href="#main-content">Skip to main content</a>
<!-- navigation and header content -->
<main id="main-content">
<!-- main page content -->
</main>
</body>
リーダーモード
仕様書
Specification |
---|
HTML Standard # the-main-element |
ブラウザーの互換性
BCD tables only load in the browser