Hatena::Groupweb

vantguarde

 | 

9.11

sectionの使い方とセクション三箇条

| 23:13

footerがsectioning contentを内容に持つ事ができるようになったり、“HTML 5”が”HTML5”になって無駄に騒ぐひとがいたりするこの頃ですが、みなさんお元気でしょうか。

で、先ほど素敵な記事がhtml5doctorから公開されました。“The section element”という題のとおり、sectionに関する記事です。

記事では、まずsectionがどんな要素なのか説明しています。じゃあ、ここでもおさらいしましょうか。sectionのキーワードを更新したのでそちらをお読みください。

sectionは便利divじゃない

実は、いつだったか忘れましたが、こんな注釈がつけられました。

The section element is not a generic container element. When an element is needed for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead. A general rule is that the section element is appropriate only if the element's contents would be listed explicitly in the document's outline.

The section element

ざっと訳すと次のようになります。

section要素は汎用的なコンテナ要素ではありません。スタイルシートやスクリプトの都合で要素が必要な場合はsectionではなく、divを使う事が望ましいです。基本的なルールとして、要素の内容が文書のアウトラインにならぶことが明白である場合にのみ、sectionが適切であると考えてください。」

はい、以前「<section id="container">とか書いたやつは悔い改めろ」みたく書いた事があるのですが、そういうことです。

sectionだけがセクションじゃない

なんのこっちゃって話ですが、section以外にもセクションを構成する要素は存在します。article, aside, navです。

以前こんなのを見かけました。

<section>
  <article>
    ...
  </article>
</section>
<section>
  <article>
    ...
  </article>
</section>

ずどーん。正しい場合もあるかもしれませんが、この場合は妙なセクション要素のネストでした。つまり、よく分からないサブセクションができていることになります。article, aside, navもセクションを構成するので、セクションの親子関係がない場合は入れ子にしないようにしましょう。

アウトラインを意識せよ

これも以前言った事があると思うのですが、sectioning contentと見出しはアウトラインを構成します。

ちょっと内容が古いですがご勘弁を。あとで時間をとって修正します。

アウトラインは先行きが不安ではありますが、面白い機能です。確かめたい方はジェフリーくん(誰)作成のアウトライン視覚化ツールを利用しましょう。ちなみに彼は16歳ながらOperaで働くすごいひとです。

セクション三箇条

そして最後に、著者のBruce Lawsonは次のような三箇条を書いています。

Of course, there are always exceptions, but these should give useful guidance for 99% of cases:

  • Don’t use it just as hook for styling or scripting; that’s a div
  • Don’t use it if article, aside or nav is more appropriate
  • Don’t use it unless there is naturally a heading at the start of the section
The section element | HTML5 Doctor
  • スタイルシートやスクリプトの都合には使わないこと。それらにはdivを使うこと。
  • article, aside, navが適切な場合には、そちらを使こと。
  • セクションの先頭に見出しが自然に存在してない場合には使わないこと。

三つ目がちょっと厳しい気もしますが、これをまもればかなりHTML5に関するマークアップのミスは減るんじゃないかと思います。

アプリケーションやサイトワイドなセクションについては、三つ目が当てはまらない可能性もありますが、それはまた今度。とりあえずみんな読め!

 | 
Contact: @vant / lepetitcroissant@gmail.com.