dl要素

mixiのXHTML・CSS関連コミュニティでもたまに語られる【dl要素】は様々な使い方がされている。アットスタイルやBlogStyleでも積極的に使用している。

XHTML+CSS (r)evolution: dl要素の応用例、ご意見募集でも数件の利用方法がコメントがされ、その後のXHTML+CSS (r)evolutionでもプレゼンされている。

プレゼン資料（XHTML+CSS (r)evolution スライド）によると

  1. h1-h6要素はページ全体から見た文脈上の見出しでしかないため、個別的・直接的な見出しをdt要素で示し、対応する内容をdd要素で示す方法が好んで使われる。
  2. dt要素の子要素にはテキスト/インライン要素しか置けないが、dd要素の子要素にはさらにブロックレベル要素も置ける。この内容モデルの自由さが多目的利用のひとつの理由に。
  3. dl要素はtable要素の使用を避ける目的でも使われる。th要素をdt要素に、td要素をdd要素になぞらえる。

XHTML+CSS (r)evolution スライド

DTDを見てみる

<!-- definition lists - dt for term, dd for its definition -->
<!ELEMENT dl (dt|dd)+>
<!ATTLIST dl
  %attrs;
  >
<!ELEMENT dt %Inline;>
<!ATTLIST dt
  %attrs;
  >
<!ELEMENT dd %Flow;>
<!ATTLIST dd
  %attrs;
  >

接尾演算子に注目

(dt|dd)+であるため、順序には関係なくdtまたはddのいづれか一方が1回以上出現すればよい

あるサイトを見て最近気になったのが、以下の例

<dl>
  <dd>
    <pre>(ソースコード)</pre>
  </dd>
  <dt>(タイトル)</dt>
</dl>

dtより先にddが出現している。DTDから考えると間違いではないが、文書の構造的にはおかしくはないか...

1月22日追記：記事を一部修正いたしました。

Posted

Tags