2006年09月21日 (木)
HTMLで画像と、その画像の説明文を書きたい時どうするかの話だけど、パラグラフ要素を2つ用意してそれそれに画像と文章を書きこむのか? それとも1つのパラグラフの中に画像と文章両方詰め込むのか?それとも定義リストを使って画像と説明文をマークアップするのかは...、自由だあああー!って叫びたい今日この頃。ちょっと考えてみました。
自分は誰に言われることもなく、無意識に定義リストを使っていた。このように...
<dl>
<dt><img src="hoge.jpg" alt="ペットのペットのクロスケ(写真のタイトル)" width="200" height="200" /></dt>
<dd>半年前近所の人からいただいたネコです。オスのネコです。もうこんなに大きくなりました(・∀・)</dd>
</dl>

シンプルで簡潔なんで好んでいたけれど、これで良いのかとちょっと悩んだ。ソモソモ定義リストとは何なのか。
Definition lists vary only slightly from other types of lists in that list items consist of two parts: a term and a description. The term is given by the DT element and is restricted to inline content. The description is given with a DD element that contains block-level content.
簡単に言えば、"dt"と"dd"の要素の2つから成り、定義用語(dt)と、それを要約した内容(dd)を含む文章をマークアップするために使われ、例えば用語集などに幅広く活用できる。でも実際使い方に制約はないので使い道は幅広い。つまり画像と画像の説明文・紹介文に使用しても何ら問題はないという事ね。
実際問題、このサイトのリンク集でも定義リストを使っている。dtにサイト名、ddにサイトの概要という感じに。Aboutのプロフィールとマシンスペック部分でも定義リストを使っている。考えてみると使いやすく汎用性高い要素だね。CSSのスタイル指定次第でレイアウトも柔軟に対応できるのも分かりやすいし、CSSオフ状態でも説明部分はインデントが入って分かりやすく読みやすい。
定義リストを使いまくるのはいいのだけれど、逆に使いすぎて本来の目的をはき違えてしまうのは問題。例えばdtを見出し(<hn>)としてマークアップしてしまう場合。これは明らかに要素も意図を見失っていると思う。定義リストは、定義用語とそれに伴う内容をマークアップする物で、"見出し"ではない。差別化はは難しいのだけれど、Personnelさんの所の、「定義リストと見出し」について述べている...
見出し(hn要素)は、本文の簡潔な要約、または単なるアイキャッチですから、仮にある妥当な文書から見出しを取り除いたとしても、内容は伝わるはずです。かなり読み難くなるかもしれませんが。
一方、被定義語句(dt要素)は、定義(dd要素)の要約ではありません。ある妥当な文書からdt要素を取り除いてしまった場合、残ったdd要素が何について言及しているのか分からなったり、あるいは、正しく意図が伝わらなくなるはずです。
以上より、ある要素をdt要素とするかhn要素とするか、その一つの基準として:
- その要素を除いても文意が伝わるかどうか
を用いることを提唱したいと思います。文書内容の伝達に不可欠なら、dt要素。そうでないなら、hn要素という具合です。
に、尽きると思います。同じ悩み、ジレンマを抱えていた人はある程度これで解決するのでは...。
とかいいつつ、日に日にdl厨になっていく俺。