main 要素

4.4.14 main 要素

カテゴリー:
フロー・コンテント
パルパブル・コンテント
この要素を使うことができるコンテキスト:
フロー・コンテントが期待される場所。ただし、祖先に article, aside, footer, header, nav 要素があってはならない。
コンテントモデル:
フロー・コンテント
コンテント属性:
グローバル属性
text/html におけるタグの省略:
どちらのタグも省略できません。
指定可能な ARIA role 属性 の値:
main ロール (デフォルト - 指定不要) または presentation
指定可能な ARIA ステートとプロパティ属性:
グローバル aria-* 属性
許可ロールに該当する aria-* 属性
DOM インタフェース:
HTMLElement を使う。

main 要素は、ドキュメントやアプリケーションの bodyメインコンテンツ表します。メインコンテンツの領域は、ドキュメントの中心的なトピックや、アプリケーションの中心的な機能性に、直接的に関係する、または、それらから発展させるようなコンテンツから構成されます。

main 要素はセクショニング・コンテントではありませんので、ドキュメントのアウトラインに影響を与えません。

ドキュメントのメインコンテンツの領域は、そのドキュメントに特有のものであり、サイトのナビゲーションリンク、コピーライト情報、サイトのロゴ、バナー、検索フォームといった、ドキュメントのあちらこちらで見られるコンテンツを除きます(ドキュメントやアプリケーションの主たる機能が検索フォームである場合は、その限りではありません)。

コンテンツのキーボード・ナビゲーションをサポートしているユーザーエージェントは、main 要素へナビゲートする機能を提供し、一度ナビゲートされたら、フォーカス順で次の要素が、その main 要素の中にある最初のフォーカス可能要素となるようにすることが、強く推奨されます。これは、キーボード・ユーザーがナビゲーションリンクといったコンテンツのブロックをバイパスする簡単な機能を提供することになるでしょう。

ウェブ制作者は、ドキュメントに 1 つしか main 要素を入れてはいけません。

ウェブ制作者は、article, aside, footer, header, nav 要素の子孫として main 要素を入れてはいけません。

main 要素は、ドキュメントやアプリケーションの副セクションのメインコンテンツ領域を特定するために使うには適切ではありません。もっとも簡単な解決策は、副セクションのメインコンテンツを一切マークアップせず、はっきりさせずにそのままにしておくだけでよいのです。ウェブ制作者は必要に応じてグルーピング・コンテントやセクショニング・コンテント要素を使うことができるでしょう。

ウェブ制作者には、ユーザーエージェントが要件とされる role マッピングを実装するまでは、main 要素に ARIA の role="main" 属性を使うと良いでしょう。

  <main role="main"> 
  ... 
  </main>

次の例には、スケートボードに関する記事が 2 つあります(ウェブページのメイントピックです)が、main 要素を使うことで、このメイントピックのコンテンツが特定されています。

<!-- 他のコンテンツ -->

<main>

  <h1>スケートボード</h1>
  <p>スケートボードはクールな若者があちこちに移動する方法です。</p>
  
  <article>
  <h2>ロングボード</h2>
  <p>ロングボードはホイールベースがもっと長くて、ホイールが大きく 
  柔らかいタイプのスケートボードです。</p>
  <p>... </p>
  <p>... </p>
  </article>

  <article>
  <h2>電気スケートボード</h2>
  <p>もう足で蹴ってスケートボードを走らせる
  必要はありません。電池からの給電で電気モーターがボードを
  走らせます。</p>
  <p>... </p>
  <p>... </p>
  </article>

</main>

  <!-- 他のコンテンツ -->

これは卒業式の式次第です。main 要素を使ってメインコンテンツのセクションが定義されています。この例では、main 要素に、メインコンテンツの副セクションへのリンクから成る nav 要素が入れられている点に注目してください。

<!DOCTYPE html>
  <html>
  <head>
<title>2022 年夏季卒業式 </title> </head> <body> <header>ローソンアカデミー: <nav> <ul> <li><a href="courses.html">課程</a></li> <li><a href="fees.html">学費</a></li> <li><a>卒業</a></li> </ul> </nav> </header> <main> <h1>卒業</h1> <nav> <ul> <li><a href="#ceremony">式典</a></li> <li><a href="#graduates">卒業生</a></li> <li><a href="#awards">表彰</a></li> </ul> </nav> <H2 id="ceremony">式典</H2> <p>入場行進</p> <p>卒業生総代演説</p> <p>学級委員長演説</p> <p>卒業証書授与</p> <p>学校長閉式の辞</p> <h2 id="graduates">卒業生</h2> <ul> <li>アイリーン・ウィリアムズ</li> <li>アンディ・マゼイク</li> <li>ブランカ・サインス・ガルシア</li> <li>クララ・フォークナー</li> <li>ゲエズ・レモン</li> <li>エロイーザ・フォークナー</li> </ul> <h2 id="awards">表彰</h2> <ul> <li>クララ・フォークナー</li> <li>エロイーザ・フォークナー</li> <li>ブランカ・サインス・ガルシア</li> </ul> </main> <footer> Copyright 2012 B.lawson</footer> </body> </html>

※ 原文:http://www.w3.org/TR/2014/REC-html5-20141028/grouping-content.html#the-main-element