定義リストのタイトルを表示しますか？

Question

私はいくつかの定義リストを持っています。これらのリストは、写真をそれらの写真の定義とともにグループ化しています。リストのタイトルを表示するのに、dlの中でどの要素を使用できますか？例えば、以下のリストで「まだら」または「Tabbys」を表示する：

<dl id="calicos"> 
    <dt>Abby</dt> 
    <dd><img src="http://placekitten.com/200/200?image=8" /></dd> 
    <dt>Beverly</dt> 
    <dd><img src="http://placekitten.com/200/200?image=7" /></dd> 
</dl> 

<dl id="tabbys"> 
    <dt>Carlos</dt> 
    <dd><img src="http://placekitten.com/200/200?image=16" /></dd> 
    <dt>Davy</dt> 
    <dd><img src="http://placekitten.com/200/200?image=13" /></dd> 
</dl> 

理想的には、私はJavaScriptをせずにこれを実行したいと思います。

Answer 1

なし。 <dt>または<dd>以外は<dl>の下に置くことはできません。

<section id="calicos"> 
    <h2>Calicos</h2> 

    <dl> 
    <dt>Abby</dt> 
    <dd><img src="http://placekitten.com/200/200?image=8" /></dd> 
    <dt>Beverly</dt> 
    <dd><img src="http://placekitten.com/200/200?image=7" /></dd> 
    </dl> 
</section> 

<section id="tabbys"> 
    <h2>Tabbys</h2> 

    <dl> 
    <dt>Carlos</dt> 
    <dd><img src="http://placekitten.com/200/200?image=16" /></dd> 
    <dt>Davy</dt> 
    <dd><img src="http://placekitten.com/200/200?image=13" /></dd> 
    </dl> 
</section> 

Answer 2

どのようにこのような何かについては？

<details> 
    <summary>Calicos</summary> 
    <dl id="calicos"> 
     <dt>Abby</dt> 
     <dd><img src="http://placekitten.com/200/200?image=8" /></dd> 
     <dt>Beverly</dt> 
     <dd><img src="http://placekitten.com/200/200?image=7" /></dd> 
    </dl> 
</details> 
<details> 
    <summary>Tabbys</summary> 
    <dl id="tabbys"> 
    <dt>Carlos</dt> 
    <dd><img src="http://placekitten.com/200/200?image=16" /></dd> 
    <dt>Davy</dt> 
    <dd><img src="http://placekitten.com/200/200?image=13" /></dd> 
    </dl> 
</details> 

http://jsfiddle.net/DCnYC/1/

Answer 3

適切なマークアップがdl要素の前h2または他の見出し要素です：

ではなく、このような何か考えてみましょう。