dl要素：HTML Living Standard各要素別メモ

概要

カテゴリー

• Flow content
• Palpable content（1個以上のdt要素-dd要素セットを子孫に含む場合に限る）

配置できる場所

• 上記カテゴリーの要素が置ける場所。

内容モデル

• 下記のいずれか。混在も可。下記に、0個以上のScript-supporting contentの混在も可。
  • 0個以上の下記のセット。下記に、0個以上のScript-supporting contentの混在も可。
    1. 1個以上のdt要素。
    2. 上記に続いて、1個以上のdd要素。
  • 1個以上のdiv要素。

• main要素の規定による制限
  • main要素を子孫に含んではならない。

属性

• グローバル属性

HTML構文におけるタグの省略

• 省略不可。

WAI-ARIA

• デフォルトroleは、なし。
• デフォルトrole以外では、group、list、presentation、noneを指定可。

視覚系ブラウザのデフォルトとして期待されるCSS

  dl {
    display: block;
    unicode-bidi: isolate;
    margin-block: 1em;
  }

  :is( dl,menu,ol,ul) dl {
    margin-block: 0;
  }
  

意味・用法

0個以上の「name-value group」による連想リストを表す。

1個の「name-value group」は、1個以上の「name」（dt要素）と1個以上の「value」（dd要素）で構成される。

連想リストは、用語と定義、題目と値、質問と回答といった組み合わせに用いることができる。

dl要素を会話文に用いるのは、不適切である。

単一のdl要素内に、それぞれの「name」に対して複数のdt要素が存在すべきでない（1個のdl要素内に、同一内容のdt要素が複数存在すべきではない）。

私見・補足

「name」と「value」の対応関係は、一対一、一対多、多対一、多対多のいずれであってもよい。

複数の「name-value group」をdl要素内部で明示的にグループ分けしたい場合は、内容モデルにしたがってdiv要素を用いる。

表示確認

ソース１

  <dl>
  <dt>2015年03月20日更新</dt>
    <dd>○○を××に訂正。</dd>
  <dt>2015年03月19日更新</dt>
    <dd>○○を追加。</dd>
    <dd>××を削除。</dd>
  </dl>
  

表示結果１

2015年03月20日更新

○○を××に訂正。

2015年03月19日更新

○○を追加。

××を削除。

ソース２

  <dl>
  <div style="background-color:yellow">
    <dt>2017年01月02日更新</dt>
    <dd>○○を××に訂正。</dd>
  </div>
  <div>
    <dt>2016年12月31日更新</dt>
    <dd>○○を××に訂正。</dd>
    <dd>××を削除。</dd>
  </div>
  </dl>
  

表示結果２

2017年01月02日更新

○○を××に訂正。

2016年12月31日更新

○○を××に訂正。

××を削除。