dlタグの中にdivは使える？

質問

dlタグの中で、dtタグとddタグを一つのdivで囲ってもよいのでしょうか？？

以下のようなかたちなのですが・・・。
使い方として間違っているのでしょうか？？
↓

------------------------------------------------

<dl>
<div class="aaa">
<dt>タイトル01</dt>
<dd>
<h4>説明文説明文説明文説明文説明文説明文</h4>
<p><img　・・・・・></p>
</dd>
</div>

<div class="aaa">
<dt>タイトル02</dt>
<dd>
<h4>説明文説明文説明文説明文説明文説明文</h4>
<p><img　・・・・・></p>
</dd>
</div>

<div class="aaa">
<dt>タイトル03</dt>
<dd>
<h4>説明文説明文説明文説明文説明文説明文</h4>
<p><img　・・・・・></p>
</dd>
</div>
</dl>

------------------------------------------------

dlタグの中には直接dtタグとddタグしか入れることができないということのようですが、
これはdivは入れられないということになるのでしょうか？？

（dtはインライン要素のみ、ddはブロック要素もインライン要素も使えるということなので、
ddの中ではdivが使えると思うのですが・・・。）

また、もしdivで囲えないとしたら、
今回の場合は、それぞれを一つのdlで囲ってしまうべきなのでしょうか？？

ご存知の方いらっしゃいましたら、よろしくご指導ください。お願いします。

回答No.1

yambejp · ベストアンサー

dlはdt,ddしか子供を持てないのでdivを置くのはNGですね
構造的にどうしてもdtとddの組み合わせを確定的に表示したいなら
dlをわけるのが妥当ですね。

お礼

ありがとうございます！
やはりそうなのですね～。。
勉強になりました！

回答No.2

ORUKA1951

DL
<!ELEMENT DL - - (DT|DD)+　　　　　　　-- definition list -->
　　↑(DT|DD)+ は正規表現的な書き方ですがDT,DDのいずれか(|)をひとつ以上(+と言う意味
DT,DD
<!ELEMENT DT - O (%inline;)*　　　　　 -- definition term -->
<!ELEMENT DD - O (%flow;)*　　　　　　 -- definition description -->
　　↑(%inline)* は%inlineをゼロ個以上と言う意味
です。
　⇒10.3 定義リスト: DL、 DT、及びDD要素( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/lists.html#edef-DL )

したがって、そのようなマークアップは文法上も間違っていますが、それ以上にDIVやDT,DDの使い方が間違っています。
※divはidやclass名を使って文書構造を補完します。
　⇒id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#edef-DIV )
※h1～h6は見出しをマークアップします。
　There are six levels of headings from H1 (the most important) to H6 (the least important).
　⇒7.5.5 見出し: H1、H2、H3、H4、H5、H6要素( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#edef-H1 )
※dl,dt,dd自体ブロック要素で、意味を持ちます。

[例]たとえば商品やアルバム、図鑑のようなものでしたらマークアップは
<dl class="productList">
　　<dt>タイトル01</dt>
　　<dd><img src="" width="" height="" alt=""></dd>
　　<dd>説明</dd>
　　<dt>タイトル02</dt>
　　<dd><img src="" width="" height="" alt=""></dd>
　　<dd>説明</dd>
　　<dt>タイトル03</dt>
　　<dd><img src="" width="" height="" alt=""></dd>
　　<dd>説明</dd>
　　<dt>タイトル04</dt>
　　<dd><img src="" width="" height="" alt=""></dd>
　　<dd>説明</dd>
</dl>
だけでよいです。

　またdtは意味的におかしければ
<ul class="productList">
　　<li>タイトル01
　　　　<ol>
　　　　　　<li><img src="" width="" height="" alt=""></li>
　　　　　　<li>説明</li>
　　　　</ol>
　　</li>
　　<li>タイトル02
　　　　<ol>
　　　　　　<li><img src="" width="" height="" alt=""></li>
　　　　　　<li>説明</li>
　　　　</ol>
　　</li>
　　<li>タイトル03
　　　　<ol>
　　　　　　<li><img src="" width="" height="" alt=""></li>
　　　　　　<li>説明</li>
　　　　</ol>
　　</li>
</ul>

などになるはずです。
箇条書きですから、その項目自体が見出しとしての意味を持ちます。

また、<div class="aaa">を複数使うのではなく、子孫セレクタで済むはずです。

お礼

詳しくありがとうございます。

ddを複数回登場させることが可能なんですね。
その点を知りませんでした。

ありがとうございました。