« ユニバーサルWebデザイン | メイン | 廃止予定の要素 »

2003年11月05日

定義リストと見出し [HTML]



定義リストは使いどころが難しい。被定義部と定義部の組み合わせというのは、大抵の場合見出しと段落で置きかえる事が可能だからだ。判断が微妙なケースが出てきたとき、dlを使うべきかh?を使うべきか多いに迷う。


定義リストの使い方には色々な説があるが、「見出し部を隠しても意味が通じる場合は見出しと段落、意味が通じなくなる場合は定義リスト」という考え方が一番妥当だと思う。つまりは定義リストは被定義部(dt)がで定義部(dd)が、見出しと段落では逆に見出し(h?)がで段落(p)がにあたるというものだ。見出しは段落の内容を要約して後から書くもので、見出しがメインなのではない。定義リストは明らか被定義部が先だ。


しかし、だからといって見出し部が主な場合は全て定義リストでマークアップすべきだろうか。実は定義リストには致命的な欠点が存在する。以下の例を見てみよう。


<dl>
<dt>被定義部A</dt>
<dd>定義部A</dd>
<dt>被定義部B</dt>
<dd>定義部B</dd>
</dl>


人間の目で見るならば、前半の組(A)と後半の組(B)がそれぞれ対になっているのは明らかだ。しかしHTMLでは必ずしもそうは解釈は出来ないし、パーサはそれを知り得ない。必ず対に存在しなければならないとか、それらがセットであるという規定はどこにも書かれていない。実際問題、CSSをあてた時にこの点で問題が発生する事がある。


チャットシステムを作成した時にこの問題に突き当たった。チャットの発言者の名前をdt要素で、発言内容をddでマークアップしてみたのだ。「DL要素の応用として、例えば対話のマーク付けがある。 DT要素が話者を示し、DD要素が話の内容を示す、というものである。」という1文がHTML4.01の仕様書に存在したためだ。


<dl>
<dt>人物A</dt>
<dd>発言内容</dd>
<dt>人物B</dt>
<dd>発言内容</dd>
</dl>


この発言ログに対して、文字色などの個人設定を定めたスタイルをあてる。個人の識別はclassを用いて判断する。


<dl>
<dt class="A">人物A</dt>
<dd class="A">発言内容</dd>
<dt class="B">人物B</dt>
<dd class="B">発言内容</dd>
</dl>


それぞれのdt,ddが対である事がDTD的に自明でないために、このように双方にわざわざclassを割り当てなければならないという自体が発生する。一つ二つならあまり気にはならないのだけれども、どうにも見ていて見苦しい。


<dl class="A">
<dt>人物A</dt>
<dd>発言内容</dd>
</dl>
<dl class="B">
<dt>人物A</dt>
<dd>発言内容</dd>
</dl>


というのも考えられるが、既にリストとは呼べない。いささか過大解釈が過ぎるだろう。こうなってくると、既にリストを使う必要性はあまり無いような気がしてくる。つまりは、以下のマークアップで充分だからだ。


<div class="A">
<h2>人物A</h2>
<p>発言内容</p>
</div>
<div class="B">
<h2>人物A</h2>
<p>発言内容</p>
</div>


div要素は、特定のブロック要素をグループ化する存在として満足だ。下手に定義リストにこだわるよりも、ずっと綺麗なマークアップになり得る。


理想を述べるならば、dtとddを適切にグループ化できる要素があるととても便利だ。例えばそれをdg要素(※注:私の独自拡張)と仮定してみる。


<dl>
<dg class="A">
<dt>人物A</dt>
<dd>発言内容</dd>
</dg>
<dg class="B">
<dt>人物B</dt>
<dd>発言内容</dd>
</dg>
</dl>


このように定義リスト内でグループか出来るならば、それぞれがセットである事は自明だし、いささか以前より“リストらしい”形になっているような気がする。ただし少々複雑化しすぎているような気もしなくはないが。


<ul>
<li class="A">
<dfn>人物A</dfn>
<span>発言内容</span>
</li>
<li class="B">
<dfn>人物B</dfn>
<span>発言内容</span>
</li>
</ul>


...これでも充分だ。


結論を言うならば、『定義』と謂う言葉にあまりこだわる必要はないと思う。リストは文章を簡潔にわかりやすく記述するための表現技法だから、そのほうが理解しやすいと判断したならば定義リストを使えばいいし、それ以外なら普通に見出しと段落だけで充分だ。全体の見出しレベル云々を色々考えるから面倒になるのであって、XHTML 2.0でレベルの無いh要素が使えるようになれば問題はだいたい解決する。dtとddの対が自明でないという点は、今のところXHTML 2.0でも解決しなさそうですけれども。


投稿者 : 00:00 | コメント (0) | トラックバック (0)

トラックバック

このエントリーのトラックバックURL:
http://totora.jpn.org/mt/mt-tb.cgi/208

コメント

コメントしてください




保存しますか?

(書式を変更するような一部のHTMLタグを使うことができます)