dl要素とは

dl要素は「名前：値」の１つのペアとして、それをリストにしたものです。内部にdt要素かdd要素のいずれかを含み、また、１つか複数のdd要素が後に続きます。

dlの要素名は「Description List」に由来します。また、dtは「Term」, dd は「Description、Definition」の頭文字だと覚えるとよいでしょう。

dl要素の記述例

上述の通り、１つのdt要素にたいして１つ以上のdd要素が続く形となります。

<h1>限定炙りほたて皿</h1>
<dl>

  <dt>名前</dt>
  <dd>炙りほたて皿</dd>

  <dt>値段</dt>
  <dd>300円</dd>

  <dt>取扱店舗</dt>
  <dd>渋谷明治通り店</dd>
  <dd>新宿新南口店</dd>
  <dd>新宿東口店</dd>

</dl>

dl要素を使う場面

dl要素を実際に利用する場面は必ずしも多くはないのですが、なにか「名前：値」の連続を表現する場合は、最初の選択肢として検討できます。「名前：略歴」「本のタイトル：サマリ」、なんでも構いません。

dl要素の別の利点は「レイアウトの柔軟さ」と考える場合があります。下記は、タグの構造を変えることなく、レイアウトを切り替えています。このようなレイアウトパターンはレスポンシブに切り替える際に役立ちます。

See the Pen gmvaXP by Joe (@akajoe) on CodePen.

もし２列のtable要素と比較すると、多様なスタイルを施しやすいタグです。もちろん、レイアウト上の構造と、HTML本来の「意味付け」の側面からとは分けて考える必要がありますが、覚えておくと役立ちます。