てんぽ: div id="header"の違和感

div要素とデザインの関係

ブログ型

div要素で全体をヘッダ・フッタ・本文などに区分する。

ブログ型のdiv要素の使い方のうち、とくにh1要素（といくつかの要素）をヘッダとしてまとめることには違和感を覚えます。 （XHTML2.0型でいうところの） h1が「支配する」範囲はページ全体であると考えられるのに、以下のようにdivがその範囲を分断してしまう（木構造のバランスが悪い）からです。

<div id="header">
    <h1>見出し1</h1>
</div>
<div id="body">
    <h2>見出し2</h2>
    （以下略）

自分の場合、FC2ブログのテンプレを作るときには、XHTML2.0型とブログ型の中間のようなdivの使い方をしていますが、 h1を含んだヘッダdivは使いません（XHTML2.0型）。とはいえ、見栄えのためにdivを追加することもあって（ブログ型）、その場合は

• 連続するdivの開始タグは2つ以下（<div><div>...）
• 連続するdivの終了タグは3つ以下（...</div></div></div>）

になるようにする、という制限を加えています。

以下、関係があるかもしれないリンク。

1. 見出しの管轄範囲を考える
2. プロが教えるMovable Typeの構造デザイン - 元原稿 div要素の階層構造がよろしくない
3. 見出し構造とツリー構造明示
4. セクションの「見出し情報（header）」