WWW Watch

HTML5 勧告候補に main 要素が追加、hgroup 要素は予定通り削除

HTML5 の勧告候補に main 要素が追加されました。また、勧告候補からの削除がアナウンスされていた hgroup 要素が予定通り削除されました。

HTML5ちょっと前に 「hgroup 要素が HTML5 の勧告候補 (Candidate Recommendation) から削除されるようです」 って記事を書きましたが、実際に削除されたみたいですね (Editor's Draft では)。

ついでに、すでに HTML 5.1 Nightly にはすでに追加されていた、main 要素が、HTML5 勧告候補の方にも追加されたようです。

main 要素とは?

main 要素は元々、Steve Faulkner 氏 (Web アクセシビリティ関連の方) が HTML5 の拡張仕様として提案し、HTML 5.1 に正式に取り入れられた要素で、その名の通り、文書内の、「主要な部分」 をマークアップするもの。

それが、今回、HTML5 の勧告候補にも追加されましたよということです。

The main element represents the main content of the body of a document or application. The main content area consists of content that is directly related to or expands upon the central topic of a document or central functionality of an application.

Note: The main element is not sectioning content and has no effect on the document outline

Authors must not include more than one main element in a document.

Authors must not include the main element as a descendant of an article, aside, footer, header or nav element.

4.5.14 The main element : HTML5 W3C Candidate Recommendation から引用

簡単にまとめると

  • 文書内で、main 要素が出てきていいのは、1回まで
  • コンテンツモデルは Flow content
  • ただし、main 要素を、article、aside、footer、header、nav 要素の子孫として使わないでね
  • セクショニング・コンテンツではないので、アウトラインは生成しません

あと、main 要素は ARIA (Accessible Rich Internet Applications)role="main" にマッピングされますが、ユーザーエージェントがこのマッピングを実装するまでは、main 要素と role="main" を併用した方がいいよと仕様書内では書かれています。

Authors are advised to use ARIA role="main" attribute on the main element until user agents implement the required role mapping.

4.5.14 The main element : HTML5 W3C Candidate Recommendation から引用

ということで、既存ソースに main 要素を追加する場合の、実際のソースコード例としては、下記のような感じになります。セクショニング・コンテンツではないので、楽ちんですね。

<body>
 
 <header>
  <h1>俺の日記</h1>
  <p>俺の日記です。</p>
 </header>
 
 <main role="main">
 
  <article>
   <h1>お米食べろ</h1>
   <p>日本人ならやっぱお米でしょ。</p>
  </article>
 
  <article>
   <h1>ゼリー食べろ</h1>
   <p>デザートと言えばやっぱゼリーでしょ。</p>
  </article>
 
  <article>
   <h1>現実逃避</h1>
   <p>寝てるだけでお金もらえねーかなー</p>
  </article>
 
 </main>
 
 <footer>Copyright 2013 俺</footer>
 
</body>

「ここがこの文書内の一番メインの場所ですよ」 と明示することで、例えば将来的にはブラウザがスキップリンクとして利用したり、検索エンジンなど、プログラムに対して主要コンテンツを効率よく伝えることができるようになるかもしれません。

その他、詳しい main 要素のユースケースは下記にまとめられていますが、基本的にはアクセシビリティ上のメリットがとても大きいですよっていうお話になってます。

main 要素に関しては、

  • そもそも main 要素に限らず、「主要な部分」 をマークアップする要素なんかいらないよ。無闇に要素を増やすなめんどくせ
  • Scooby Doo アルゴリズム() で主要な部分は暗黙的にわかるしいいじゃん
  • role="main" でいいじゃん ...etc

などというご意見もありましたが、とはいえ、あっても特に困ることもないしって感じで、案外すんなり仕様に取り込まれた感じ。あとはブラウザ側での実装ですが、Webkit はすでに実装済み。Firefox は 21 (現在ベータ版。予定では 5月14日に正式リリース) で main 要素に対応します。

その他、main 要素に関しては、以前紹介した、HTML5 Advent Calendar 2012 で、@kazuhito 氏が書かれている記事、「巷(何処)で話題の main 要素とは何か」 も参考になります。

※ 簡単に言えば消去法。ページの内容から header、footer、nav 要素や aside 要素でマークアップされた部分を取り除けば、必然的に残りがメインコンテンツでしょっていう抽出方法 (↑本文に戻る

Recent Entry

全ての記事一覧を見る

Hot Entry

逆引きおすすめエントリー