section 要素

私たち doctor は、HTML5 を使っている仲間の集まりだ。HTML5 をどのように使うのかを書いている。間違えて医者のアドバイスを求めてきたリクエストはおいておいて、私たちがもっとも受ける質問は、section 要素の利用についてだ。そして、私たちは、このとき、section に関してまったく間違った使い方をしていたことに気がついた。

申し訳ない。

私たちが犯してきた間違いとは、スタイル目的でコンテンツを囲んだり、nav, header, footer などからメインコンテンツの領域の境界を作るために section を使っていたことだ。

仕様では section について次のように言っている：

section 要素は、一般的なドキュメント・セクションやアプリケーション・セクションを表します。… section 要素は、一般的なコンテナ要素ではありません。スタイリング目的やスクリプティングにとっての都合で要素が必要になったとき、ウェブ制作者は、代わりに、div 要素を使うことが推奨されます。

section は、あなたがデータベースに個別のレコードとして蓄積することができるような、ひとかたまりのコンテンツだ。それは、通常は、このような感じになる（見出しは section 要素の前ではなく、そのの中に入れることに注意してほしい。）：

<section>
<h1>Any level of heading</h1>
rest of the content
</section>

ほとんど例外なしに、自然に見出しを入れることができないようなら、section を使うべきではない。HTML 5 outliner tool で自分の作ったものをチェックしてほしい。もし、section に対応するところが "untitled section" になっていたら、たぶん、あなたの作ったものには間違いがある。（しかし、nav や aside 要素にタイトルがなくても問題はない）

section は、最も汎用的なセクショニング要素ともいえる。本当に、article にする必要ないかを確認してほしい。その定義は次の通りだ：

ドキュメント、ページ、サイトの独立した部分を形成する構成です。これはフォーラムの投稿、雑誌や新聞の記事、ウェブログのエントリ、ユーザーが投稿したコメント、その他コンテンツの独立した項目が考えられます。

メインコンテンツはどうなのか？

HTML5 では、あなたは、ナビゲーション、ブランディング、著作権表記といったページの "補助的な" コンテンツのすべてを特定してマークアップすることができる。ページの最も重要な部分、つまり、コンテンツを特定してマークアップすることができないというのは、変に感じる。

しかし、とにかく、それを特定してマークアップする目的とは何だろう？もし、あなたがそれをスタイルする必要があるなら、div を使ってほしい。スクリーンリーダーのような支援テクノロジーは、メインコンテンツを見つけることができる。なぜなら、それは、ページの中で、header, nav, footer ではない最初のものだからだ。

section の利用の経験則

もちろん常に例外はあるが、このガイダンスは、99% のケースで使えるはずだ：

• スタイリングやスクリプティングのフックだけに使うべからず；それには div を使うこと。
• article, aside, nav のほうが適切な場合には使うべからず。
• セクションのはじめに見出しを自然に入れられないような場合には使うべからず。
• 修正版の仕様（2009 年 09 月 16 日時点）では次のように言っている：
  

  ウェブ制作者は、コンテンツがシンジケートされるに相応しいと考えられるときは、section 要素の代わりに article 要素を使うことが推奨されます。

  ブログ投稿やコメントはよくシンジケートされる（別のブログに引用されたり、twitter や reddit などを経由してリンクされたりすることによって）。それらには article を使うべきだ。

この記事の事実確認をしてくれた Opera の Lachlan Hunt に感謝する。余分な section を取り除くために、WordPress のテーマをまだ変更していないことにも注意してほしい。だから、今のところは、どうか、私たちが言う通りにしてほしい。そして、私たちがしている通りにはしないでほしい！