解説付き画像のマークアップにdl、dt、ddを使う?
http://studiomd.jp/archives/homepage/dldtdd.php
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タグを2つ <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>
dtにはインライン要素しか置けないが、imgもインライン要素だから置けないわけではない。
ddにはインライン要素もブロック要素も置けるから、dd内にテキストのみを書けば済んじゃう。
定義したものと、それに対する解説であるという関係性がはっきりするからイイんぢゃないかと。
つーか、スマートだ。
だって。