応用43. dl要素、dt要素、dd要素-定義型（関連）リスト

定義型（関連）リストとは

定義型リストは箇条書きリスト（ul要素、li要素）と違い、「見出し」と「段落」に似た構造をつくることができます。見出しタグを使うほどではないが、リスト構造で見出しが必要な場合に使用できます。
構成としてはdl要素（Definition List）内に「用語」であるdt要素（Definition Term）と「用語の説明」であるdd要素（Definition Description）で定義します。

<dl>
  <dt>用語</dt>
  <dd>用語の説明</dd>
</dl>

dl要素、dt要素、dd要素の初期値はdisplay:block;です。
箇条書きリストのような行頭マーカーの指定はできません。

入れ子のルール

• dlタグ内の子要素は、dtタグ、ddタグのみ。
  ただし、dtタグ、ddタグ内は他の要素を使用できる。
• dtタグ、ddタグを必ず1回使用する。
• dtタグの次にddタグを使用する。
• dlタグ内にdtタグ、ddタグはいくつ使用しても良い。

間違った使用方法として、下記のようなものがあります。

<!-- dl要素の子要素がdiv -->
<dl>
  <div>
    <dt>用語</dt>
    <dd>用語の説明</dd>
  </div>
</dl>

<!-- dd要素が先にある -->
<dl>
  <dd>用語の説明</dd>
  <dt>用語</dt>
</dl>

下記の使い方は問題ありません。

<!-- dd要素が複数ある -->
<dl>
  <dt>用語</dt>
  <dd>用語の説明</dd>
  <dd>用語の説明</dd>
  <dd>用語の説明</dd>
</dl>

<!-- 交互に用語と説明を入れる -->
<dl>
  <dt>用語</dt>
  <dd>用語の説明</dd>
  <dt>用語</dt>
  <dd>用語の説明</dd>
  <dd>用語の説明</dd>
</dl>

<!-- 商品の説明 -->
<dl>
  <dt>商品名</dt>
  <dd><img src="item.jpg" alt="商品画像"></dd>
  <dd>
    <ul>
      <li>商品の説明</li>
      <li>商品の在庫数</li>
      <li>商品の大きさ</li>
    </ul>
  </dd>
</dl>

下記のように「日付」と「その日の出来事」のようなパターンにも使えます。

<!-- 日付と説明 -->
<dl>
  <dt>2016/7/1</dt>
  <dd>新商品を入荷しました。</dd>
  <dt>2016/7/2</dt>
  <dd>ブログを更新しました。</dd>
</dl>

まとめ

• 定義型リストは、「見出し」と「段落」に似た構造をつくることができる
• dlタグ内の子要素は、必ずdtタグとddタグ