HTML5のheader要素の扱い方

HTML5でWeb制作するときに、ふと思ったのが、header要素をどういう時に使って、どういうときに使わないのかということ。

HTML5の仕様では、全てのセクショニング・コンテンツ(section要素, article要素, aside要素, nav要素)で使えるし、使わないこともできます。

まぁ、これはHTML5でWeb制作するときのコーディングルールで、header要素をどう扱うかという話しなんですよね。

一応、自分なりに考えてまとめたことを、アウトプットしておきます。

まず、header要素に欠かせない(けど必須ではない)見出しですが、見出しには大きく分けて、2種類あると思うんです。

  • 構造のための見出し。Movable TypeやWordPressなどのテンプレートではテンプレート内に「ここからが○○ですよ」と直接記述される見出し。
  • コンテンツの見出し。Movable TypeやWordPressなどでウェブサイトを管理しているときにページの作成画面からユーザーが入力する見出し。

それから、HTML5.jpのheader要素に関するページにこんな部分があります。

header 要素は、イントロダクションやナビゲーションの支援となるグループを表します。

つまり、何らかの支援的な要素が(見出しを含め)複数存在するとき、それらをheader要素でグルーピングしましょうっていうことだと思うんですね。

これらを踏まえた個人的見解は、
「構造のための見出しはheader要素を必ず使い、コンテンツの見出しは何らかの支援的な要素がある場合にのみheader要素を使う。」
ということにしてみました。

シンプルなコーディング・マークアップが理想なんですけど、デザイン的な都合でheader要素を使ったり、使わなかったりすると、全体的な統一感が欠けちゃうんですよね。

なので、このようにきっちりと
「この場合には使って、この場合には使わない」
っていう部分を決めておくといいかもしれません。

ちなみに、この個人的なコーディングルールの場合、構造のための見出しが多くなると、当然、header要素の数も増えることになります。

本来なら、子供セレクタを使って、

section#main>header{}

のように、どのheader要素なのか指定したいところですが、残念なブラウザのIE6/7ちゃんが子供セレクタに対応していないので、

section#main header#main-header{}

のように、
「親要素のID・Classに-headerを加えたものをheader要素に指定する」
なんていうルールも決めています。

HTML5でコーディング・マークアップの正確性とバリエーションが増えるのはありがたいんだけど、その分きっちりコーディングルールを決めておかないと、複数人で作業する場合は大変なんだよなぁ。