プロが教えるわが家の防犯対策術!

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で囲ってしまうべきなのでしょうか??

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

A 回答 (2件)

dlはdt,ddしか子供を持てないのでdivを置くのはNGですね


構造的にどうしてもdtとddの組み合わせを確定的に表示したいなら
dlをわけるのが妥当ですね。
    • good
    • 0
この回答へのお礼

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

お礼日時:2012/12/25 13:39

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-html4 … )

したがって、そのようなマークアップは文法上も間違っていますが、それ以上にDIVやDT,DDの使い方が間違っています。
※divはidやclass名を使って文書構造を補完します。
 ⇒id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
※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-html4 … )
※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">を複数使うのではなく、子孫セレクタで済むはずです。
    • good
    • 0
この回答へのお礼

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

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

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

お礼日時:2012/12/25 14:18

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!