1. Home
  2. Archive
  3. dl要素の仕様についての疑問

dl要素の仕様についての疑問

BLOCKQUOTE要素とCITE要素をめぐる考察
という記事をみて、元記事の内容とはまったく関係ないところに疑問をもってしまったんですが、定義リストの定義って微妙に手抜きがするなー気してきました。気になったのは以下の部分。

定義型リストは、通常は、項目と内容の2つの部分から成り立ち、DT要素に定義する語句を、DD要素にはその語句の説明を記述します。しかしながら、DL 要素は、使い方が柔軟で、DD要素あるいはDT要素のいずれか1つ以上を含めばよく、DDとDTの順番は問いません。また、DD要素ひとつに対して、複数のDT要素を含めても良いです。DT要素はインラインレベルの要素のみを含むことが出来て、DD要素は子要素として、ブロックレベルの要素のみを許可します。

確かにその通りですね。XHTML1.0StricのDTDを見ると、dl要素の定義は以下のようになっています。

<!ELEMENT dl (dt|dd)+>

これはdlの中にはdtとddのどちらかが最低一つ以上含まれるという意味です。柔軟と言えば柔軟ですけど、ちょっと緩すぎな気がします。この仕様だと以下のようなHTMLも許可されます。

<dl>
    <dt>項目1</dt>
    <dt>項目2</dt>
<dl>

これだとdtしかなくて定義リストとしての意味がまったくありません。

<dl>
    <dt>項目1</dt>
    <dd>項目1の説明</dd>
    <dd>項目2の説明</dd>
    <dd>項目2の説明</dd>
    <dt>項目2</dd>
</dl>

これはどのdtがどのddを説明しているかわかりませんよね。こんなわかりにくい書き方する人はいないと思いますけど、DTDでは許可されてるわけです。

で、これはできればこんな感じにしてほしかったという希望。

<!ELEMENT dl (di)+>
<!ELEMENT di (dt&dd)+>

di(Definition Item)という要素でグルーピングできるようにして、その要素にはdlとddがどちらも最低一つ以上ふくまれていなければならない。みたいな。

つまりさっきのソースはこんな感じなります。

<dl>
    <di>
        <dt>項目1</dt>
        <dd>項目1の説明</dd>
    </di>
    <di>
        <dd>項目2の説明</dd>
        <dd>項目2の説明</dd>
        <dt>項目2</dd>
    </di>
</dl>

これだとどのdtがどのddを対象にしてるか明確になりますよね。リストの中にdtだけとかddだけということも許可されません。

dtとddがグルーピングされてるとコーディングもやりやすいしなー。よくdlがずらっとならんでるの見るけど、もしこの仕様だったらそれも必要なかったのに、と思いました。

こんなこと言っても何にもならないはわかってます。はい、ただの愚痴です。

追記

deliciousのブクコメでxhtml2にdi要素があるというのがあったので調べたら確かにあった。
XHTML 2.0 - XHTML List Module

これは知らんかった。

コメント一覧

  1. Zoorasia 2009年1月30日 11時52分

    ごぶさたしております。

    dt dd要素のグループ化、私も以前考えてました。

    dl要素の話って、仕様上ではdtとddさえ存在すれば何でもアリって感じなんでね。

    以前から本当に正しいdl要素の使い方ってなんなのよ?という議論はありましたし。

    たとえば。連続するdd要素は不適切と考える人もいれば、dtで明示している定義に複数の意味があればddを連続させても良い思うという人もいる。仕様上はどちらも間違っていないので逆に混乱し、議論が生まれるんですね。

    余談ですが、dt要素の中にhn要素(見出し)を入れる人やサイトたまにみかけるんですが、そういう風に解説している書籍やサイトがあるのだろうか…?

  2. hokaccha 2009年1月30日 13時24分

    どもー。ひさしぶりです!

    連続したddは僕はありだと思ってますねー。辞書とかで一つの単語で複数の意味があることってよくあるし。

    >余談ですが、dt要素の中にhn要素(見出し)を入れる人やサイトたまにみかけるんですが、そういう風に解説している書籍やサイトがあるのだろうか…?

    これは見たことないですね。個人的にはないなーと思います。

  3. ゆう 2009年1月30日 14時57分

    こんにちは。

    仕様的に根本的な解決にはなっていませんが、一応 現状では以下のようにマークアップすることにして、なるべくdt, ddの順で1対1(もしくは1対0, 0対1)対応するようにしています。

    <dl>
    <dt>
    <ol>
    <li id="dt1-1"><dfn><a href="#dd1-1" rel="nofollow">用語1</a></dfn>< /li>
    <li id="dt1-2"><dfn><a href="#dd1-2" rel="nofollow">用語2</a></dfn>< /li>
    <li id="dt1-3"><dfn><a href="#dd1-3" rel="nofollow">用語3</a></dfn>< /li>
    </ol>
    </dt>
    <dd>
    <ol>
    <li id="dd1-1"><dd>説明文1</dd></li>
    <li id="dd1-2">
    <ol>
    <li><dd>説明文2-1</dd></li>
    <li><dd>説明文2-2</dd></li>
    </ol>
    </li>
    <li id="dd1-3"><dd>説明文3</dd></li>
    </ol>
    </dd>
    </dl>

    ゴチャゴチャしちゃってすみません。ご参考まで。

  4. ゆう 2009年1月30日 14時59分

    上のコメント、タグの部分が化けちゃいましたね。すみません、大変 失礼しました。

  5. hokaccha 2009年1月30日 15時12分

    >ゆうさん
    ありがとうございます。コメント修正しておきました。

    olと組み合わせて構造化するのは考えつきませんでした。参考にさせてもらいます!

    ただ、dtはインライン要素しか含めないのでこのマークアップだとvalidじゃなくなるような。。。

  6. ゆう 2009年1月30日 20時12分

    hokacchaさん

    まったくもっておっしゃる通りで、過去に一度、まさにそれで躓きかけたのを思い出しました。いやはや、赤面の極みです。(コメントの修正もありがとうございます。)

    今、ようやっと、その時のメールを掘り返して、修正後のソースも確認できました。今度は念を入れて仕様・DTD(HTML4.01)・Validator共に確認したので、大丈夫だと思います。


     <a href="#dd1-1" rel="nofollow">用語1</a>, <a href="#dd1-2" rel="nofollow">用語2</a>, <a href="#dd1-3" rel="nofollow">用語3</a>
     
      
       説明文1
       
        
         説明文2-1
         説明文2-2
        
       
       説明文3
      
     


    大変 失礼いたしました。

  7. ゆう 2009年1月30日 20時21分

    すみません。どうも化けちゃいますね。(そして、なぜかアンカーだけ化けないw)<>を全角で打ち込めば良かったのかな。なんかもうボロボロ..。(^ ^;)

    一応、ソースのみ再入力しておきます。

    <dl>
     <dt><dfn id="dt1-1"><a href="#dd1-1">用語1</a></dfn>, <dfn id="dt1-2"><a href="#dd1-2">用語2</a></dfn>, <dfn id="dt1-3"><a href="#dd1-3">用語3</a></dfn></dt>
     <dd>
      <ol>
       <li id="dd1-1">説明文1</li>
       <li id="dd1-2">
        <ol>
         <li>説明文2-1</li>
         <li>説明文2-2</li>
        </ol>
       </li>
       <li id="dd1-3">説明文3</li>
      </ol>
     </dd> 
    </dl>

  8. hokaccha 2009年1月31日 22時37分

    >ゆうさん

    なんかコメント入力わかりづらくてすいません、ホントに。普通にソース書けばエスケープされて表示されるはずなんですが。。。

    dfn要素使うのはいいかもしれないですね。参考にさせていただきます!

  9. 大杉 2009年2月12日 02時46分

    はじめてコメントさせてもらいます。
    いつも拝見していました。
    よろしくお願いします。

    <dl>は悩みますよね。
    私は仕様を良い様に解釈して、「CSSをあてやすく且つマークアップ的に間違っていない方法」をとることで妥協しています。
    <dt>を下にもってくることはないですねぇ。

    <di>は私も読ませてもらって初めて知りました。いいなアイデアだなぁ!と思ったら XHTML 2.0 にあったのですね。

    普段使わない要素など忘れてしまっていて、いざというときに出てこなさそうなので、XHTML 1.0 も再確認しようと思いました。

  10. 通りすがり 2010年9月2日 16時17分

    こんにちは
    <dl>について調べていたら辿り着きました。
    私も参加させてください。

    ■疑問

    構造的に<hx>を使わない見出しを

    <dl>
    <dt>〇〇について</dt>
    <dd>〇〇とは文書構造HTMLの~である</dd>
    </dl>

    のように<dt>に使用していますが、<dl>は定義リスト。リストの中に1セットのみでは正しい使い方ではないような気がしてきました。最低でも2セットは入れるべきなのでしょうか。

    どうぞご教授くださいませ。

  11. hokaccha 2010年9月2日 19時41分

    リストだから項目が一つしかないといけないということはないと思います。そのコンテンツの意味を考えたときにリストが一番近いけれど項目が一つしかないということもあると思うからです。

    例えばこのブログのコメント一覧はリストでマークアップしていますが、一つのときもあれば複数のときもあります。しかし、エントリーの中でコメントを引用するときなどはp要素とblockquote要素などと使うと思います。このように同じコンテンツでも前後の文脈によって使用する要素は変わるべきだと考えます。

    なので例に挙げられているようなコンテンツは、その前後の文脈によってhnを使うのが正しい可能性もあるのではないでしょうか。

  12. 通りすがり 2010年9月3日 14時21分

    ご返答ありがとうございます!

    とても勉強になりました!
    文脈によってマークアップを使い分ける事に気がつきました。ddの内容が多く詳細に説明していたのでdtではなく、h4を使用する事にしました。

    詳細な解説感謝します。

コメントフォーム

※HTMLタグは使用できません。