解説付き画像のマークアップにdl、dt、ddを使う？

ホームページ制作

こんにちわ、仕事を取りすぎたｍｄです（自滅）。更新がとぎれとぎれになっております。ところで、みなさんこんな画像のマークアップってどうしてます？。ごくフツーに考えられるマークアップは３つ。

食用菊
制作中の某所の商品「食用菊」のイメージ

  1. divる
    <div class="...">
<img src="..." width="320" height="240" alt="..." />
<br />
解説
</div>
  2. フツーにpタグでブロックにする
    <p>
<img src="..." width="320" height="240" alt="..." />
<br />
<span class="description">解説</span>
</p>
  3. めんどくさいからpタグを２つ
    <p>
<img src="..." width="320" height="240" alt="..." />
</p>
<p class="description">解説</p>

なにげにこんなマークアップを見かけました。忘れないように覚え書き。

dl,dt,ddを使った画像のマークアップ

<dl>
<dt>
<img src="..." width="320" height="240" alt="..." />
</dt>
<dd>解説</dd>
</dl>

そーか、この手があったか(^^;)。pタグでやるより理屈が通っているように感じます。このマークアップのキモは...

  • dtにはインライン要素しか置けないが、imgもインライン要素だから置けないわけではない。
  • ddにはインライン要素もブロック要素も置けるから、dd内にテキストのみを書けば済んじゃう。
  • 定義したものと、それに対する解説であるという関係性がはっきりするからイイんぢゃないかと。
  • つーか、スマートだ。

pタグでやると、何に対しての解説なのかわからないですし、brやspanを入れるとなんとなく見苦しい。divでimgを囲むのが本来なのかも知れませんが、うちのソースコードはただでも見事なまでのdivっぷりなので、これ以上divを増やしたくない(^^;)。

私はVALIDな人ではありませんし、「dtはあくまでも語句じゃないとダメ」とか言うんだったらアレですが、マークアップとしてはスマートな気がします。うーん、どんなもんでしょうねぇ...