セマンティックなマークアップと dl dt dd と画像
January 06, 2011
例えば、ニュースもしくはカタログぽいセクションを作るとして、記事における画像とその記事のタイトル、内容を記載するとした場合、私はdl dt ddを使ってこれをコーディングしていましたが、ふと、やっぱりdl dt ddは定義リストであるので、dtには解説されるべきターム、そして、ddの方にはそのタームの解説をせねばならないのかと、何気に思い、ちょっと調べてみたところ、maxdesignさんのサイトのページ(Definition lists – misused or misunderstood? )を発見しました。こちらさまによると、やはり、dl dt ddは定義リストとしてそのためだけに使用すべきという意見と、dt ddの内容に直接の関係がある場合にも使用するという意見があるようです。
ちなみに、maxdesignさんのところでW3Cでの定義が引用されており、それでだと、
”Another application of DL, for example, is for marking up dialogues, with each DT naming a speaker, and each DD containing his or her words. ”
http://www.w3.org/TR/REC-html40/struct/lists.html
なのだそうです。だから、この定義からすると、定義リストは、定義リストだけとしての用途に留まらず、上記のような使用方法も大丈夫であるようなのですが、これに異議を唱える人達もいるようで、答えは1つとは行かないようです。
上記の解釈もOKであれば、maxdesignさんのところでも述べられている、Styled Definition list example 6: Styling a definition list to look an image galleryのような用途にも使えるのかなと思います。ちなみに、日本の一般的なニュースサイトやカタログサイトを見て周りましたが、こういう用途で使用しているところはあまりないようです。(ベルメゾンネットさんでこのような使われ方が少しされていました。セシールさんのところでも、多分似たような使われ方がされているような感じですが、javascriptでコンテンツが表示されているので、詳しくはわかりませんでした。)