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では、dl要素は「定義型リスト」であり、dt要素をdd要素として定義する、というルールでした。
ただ、HTML5勧告によれば表現が少し緩やかになり、dt要素をdd要素で説明する「記述リスト」に変更されました。
HTML5は人間にとっても、コンピュータにとってもわかりやすいことを指針としているので、コードを見ただけでもその定義が見えるように格式ばったものを取り払ったと思われます。

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>

スタイルシートで横並びにする

dt要素とdd要素には改行が入ります。改行しないようにするcompact属性はHTML5では廃止されています。
デザインをスタイルシートで一元的に管理する流れが波及したのでしょう。

tag02.png

dl要素を横並びにするには以下のようにCSSで調整します。

[HTML]

<dl>
<dt> ソフトドリンク</dt>
<dd>一般の飲料</dd>
<dt> お酒</dt>
<dd>アルコール入り飲料</dd>
<dd>20歳未満は飲めない飲料</dd>
<dt>炭酸飲料</dt>
<dd>炭酸ガスの入った飲料</dd>
</dl>

[CSS]

dt {
	    /左に寄せる/
	    float: left ;
	    /後続の左寄せを解除/
	    clear: left ;
	    margin-right: 0.5em ;
	    width: 120px ;
}

dd {
	    float: left ;
	    margin-left: 1em ;
}

dd要素にclearを指定すると、dd要素が複数連なるときに左寄せが崩れてしまいます。dt要素にwidthを指定することによって、dd要素の頭を揃えることができます。