divとparagraphに関する考察

HTML

ブロックレベル要素のdivとpは、暫し同時に取り上げられる。pが段落なのは一目瞭然なのだけれども、divもその一部ではないかと言う説だ。理由は2つほど挙げられる。
1つの理由としては、

<p>一般的な[]OS[]には、</p>

<ul>

  <li>[]Microsoft Windows[]</li>

  <li>[]Mac[] []OS[]</li>

  <li>[]UNIX[]([]Linux[])</li>

</ul>

<p>などがあります。</p>
このマークアップに違和感を感じるからだろう。
「一般的な〜などがあります」の間は、どう考えても一つの段落だ。内部に箇条書きリストを含むばかりに、HTMLのDTDの規定により段落を2つに分けなければならないという事態が生じてしまう。結果的に、本来一つのブロックであった筈の文章が、3つのブロック構造に分割されてしまう。p要素は、同様にちょっとしたテーブルやブロックレベルの引用も含む事が出来ない。実際に書籍や雑誌などの文章を見ると、段落中にこれらを含んでいる文章は決して珍しい例ではない。
中には、この問題を以下のように解決する人もいる。
<div class="paragraph">一般的な[]OS[]には、

  <ul>

    <li>[]Microsoft[] []Windows[]</li>

    <li>[]Mac[]　[]OS[]</li>

    <li>[]UNIX[]([]Linux[])</li>

  </ul>

などがあります。</div>
また、もう1つの理由として、以下のマークアップ例を見て頂きたい。


<p class="sitelogo"><img src="logo.png" alt="サイトロゴ" /></p>

<p class="navigation">

  [<a href="./index.[]html[]">TopPage</a>] >gt;>gt;[ThisPage]

</p>
単なる画像やナビゲーションリンクをbody直下にそのまま置いてしまうとDTD検証に引っ掛かるので、単純に段落で括ってみた例だ。だけれどもp要素はあくまで『段落』。本文と何ら関係の無いこれらの要素を段落としてマークアップしてしまうのには、少なからず違和感が生ずる。故に、これらのp要素を全てdiv要素に置き換えてしまうという選択肢を選ぶ人もいる。適切にclass名を与えたならば、それなりに妥当に見えるし、もしXMLならばこういう名前のタグでマークアップしていたんだと納得できる。
しかし、私はこのようなdivの使い方は望ましくないと考える。例えどんなクラス名を付けた所でdivは意味を持たない要素。作成者やCSSを解析するパーサには判ったとしても、閲覧者や一般的なユーザエージェントはその意味を知り得ない。例え見出しや段落を全てdivで置き換えたり、bodyの直下に大きなdivを置いたとしてもDTD的には妥当だけれども、それらは何ら意味を成していない。divは汎用的に使える便利にブロックレベルの要素と考えるのは間違いだ。最小のブロックレベル要素は、headingとparagraphのみであるべきだ。
私はこれらの理由から、div要素は直接インライン要素を子要素に持てないと考えている（自戒のためで、人に奨めているわけではない）。blockquoteなどと同様に、ブロックレベルしか子要素に含められない要素である。div要素の使い道はただ一つ、『複数のブロック構造をグループ化するため』にしか使うべきではない。
では上記のようなナビゲーションは、どのようにマークアップすべきか。私はとりあえずリストという一つの答えを出している。


<ul>

  <li>[<a href="./index.[]html[]">TopPage</a>]</li>

  <li>[ThisPage]</li>

</ul>
これに関しては興味深い説もある(パン屑ナビはパラグラフかも＠agenda)。
p要素がリストを含めないという問題点だが、XHTML 2.0で遂にリストやテーブル、ブロックレベルでの引用、整形テキストなどを含められるようになった。XHTML 2.0が大々的に普及するまでは、暫定的にp要素を分割するマークアップで我慢するしかないと考えている。またXHTML 2.0ではブロック構造を明示的にグループ化するためのsection要素が考案されているため、div要素の出番はますます少なくなるだろう。
もちろんこれらは仕様書を通り越した過度な解釈の仕方なので、必ずしもdivが悪いというわけではないだろう。だけれども<div>というなんら意味を持たない要素でマークアップすることの「不気味」さを、少しだけ注意しておきたい。あるいは、divはスタイルシートを適用するための“レイヤ”であるという間違った認識が、わずかでも減少してくれると有り難い。