HTMLのマークアップの際に言葉や文章などを分類し、情報としてまとめていく場面に多々出くわします。
dlタグは、dl、ddをともなって語句を定義する「定義リスト」でしたが、HTML5では「記述リスト」と定義が変わっています。
今回は、その違いや使い方などをご紹介します。

dl,dt,dd要素の基本をおさらい

dl要素はdt要素(用語),dd要素(その用語に対する説明)をともなう記述型リストです。

<dl>
<dt> ソフトドリンク</dt>
<dd>一般の飲料</dd>
<dt> お酒</dt>
<dd>アルコール入り飲料</dd>
</dl>

tag01.png

dt要素とdd要素の間には、改行が入ります。HTML4ではcompactという属性で改行させなくすることができましたが、HTML5ではcompact属性は廃止となり、CSSで見た目を調整する作業が発生します。

HTML4では、「definition list(dl)= 定義リスト」「definition term(dt)= 定義する言葉」「definition description(dd)= 定義の説明」という形でdt要素をdd要素として定義する、というルールでした。HTML5においては「description list(dl)= 説明リスト」「description term(dt)= 説明する言葉」「definition / description(dd)= 定義分もしくは説明文」という形でdt要素をdd要素で説明する「記述リスト」に変更されました。

HTML5は人間にとっても、コンピュータにとってもわかりやすいことを指針としているので、コードを見ただけでもその定義が見えるように格式ばったものを取り払ったと思われます。現在のdl・dt・ddタグは「説明リスト」の書き方ができるようになりましたが、一方で従来通り「定義リスト」である辞書的な書き方でも問題ありませんので、単純に使い方が増えたという認識をすることも可能ですね。

SEO的には、olタグ、ulタグ(順序リスト・順不同リスト)に比べ、セマンティック(意味的)である配慮が必要となります。

dl,dt,ddタグの正しいマークアップ方法

dl要素の内容にはdt要素が1つ以上先に、dd要素が1つ以上続いてその後に記述されなければなりません。

<dl>
<dt> ソフトドリンク</dt>
<dd>一般の飲料</dd>
<dt> お酒</dt>
<dd>アルコール入り飲料</dd>
</dl>

また、必ずしもdt要素とdd要素は1つの対でなくとも構いません。

<dl>
<dt> ソフトドリンク</dt>
<dd>一般の飲料</dd>
<dd>オレンジジュースなど</dd>
</dl>


<dl>
<dt> ソフトドリンク</dt>
<dt>ノンアルコールビール</dt>
<dd>未成年者が飲むこと可</dd>
</dl>

dl要素を入れ子構造にすることもできます。

<dl>
  <dt>ソフトドリンク</dt>
    <dd>紅茶やコーヒー・果物ジュースなど
      <dl>
        <dt>アイスコーヒー</dt>
        <dd>冷やしたコーヒー飲料</dd>
  </dl>
  </dd>
</dl>