定義リスト「DL」「DT」「DD」タグの使い方

HTML初心者にとって「リスト」といえばUL（箇条書き）かOL（番号付き）になるかと思いますが、もう1つ、定義リストというタグがあります。

Definition Listのイニシャルを取って<dl>タグとなっています。

リストタグの書き方

普通のリストであればULタグ、番号付きリストの場合はOLタグを使いますが、その構造は極めてシンプルなものです。

ULタグの書き方

<ul>
  <li>ホニャララ</li>
  <li>ホニャララ</li>
  <li>ホニャララ</li>
</ul>

まず「ここからここまでをリスト化するよ」という宣言のため、リスト全体を<ul>タグで囲みます。

次に「ここからここまでで項目ひとつだよ」という宣言のため、リストの項目1つ1つを<li>タグで囲みます。

たったこれだけ。

番号付きリストの場合、<ul>部分が<ol>と置き換わるだけです。

OLタグの書き方

<ol>
  <li>ホニャララ</li>
  <li>ホニャララ</li>
  <li>ホニャララ</li>
</ol>

こんなふうになりますよね。

ところが定義リスト<dl>タグはもう1つセンテンスを持っています。

DLタグの特徴

DLタグの書き方

<dl>
  <dt>名前</dt>
    <dd>説明<dd>
</dl>

このように、リスト領域を定義する<dl>タグの中に<dt>と<dd>タグの2つを表記できます。

また定義リストの便利な点として、内側の2つのタグは両方必須ではない、という部分も覚えておきましょう。

こういう書き方でもOK

<dl>
  <dt>名前</dt>
    <dd>説明<dd>
  <dt>名前</dt>
    <dd>説明<dd>
    <dd>説明<dd>
</dl>

こんなふうに、1つのdlの中に複数の組み合わせを入れたり、ddが何個か続いてもいいんです。リストタグでありながら<table>に近い特徴を持っていると捉えることもできるかもしれませんね。

定義リストの使い道

定義リストはいわゆるQ&Aのように、リストのそれぞれ（DTとDD）に異なる意味を持たせられるところが特徴です。

「これは（DT）」「こういうものだよ（DD）」という構造をリストアップ形式で表示できるので、その用途で使うのが好ましいと思います。

たとえば、テクノロジー観測所ではソースコードの表示を行う時に定義リストを使っています。

HTML部分

<dl class="simple_style">
<dt>HTML部分</dt>
<dd>

<pre><code>

<!-- ここにソースコードを記述 -->

</code></pre>
</dd>
</dl>

<pre><code>タグにCSSが入るので緑色のボーダーや背景色などがつきます。

箇条書きしたテキストに補足説明をつける時に便利

<ul><ol>タグを使う場合、項目の間に補足を加えることは困難です。

買い物リストの例

<ul>
  <li>しょうゆ1L</li>
  <li>無洗米1キロ</li>
  <li>卵1パック</li>
  <li>豆腐2パック</li>
</ul>

HTMLでの表示

• しょうゆ1L
• 無洗米1キロ
• 卵1パック
• 豆腐2パック

このようなリストを作ったとします。

<ul>タグを使う場合、項目に補足説明をつける時は次のようにマークアップすることになるはずです。

買い物リストに補足をつけた例

<ul>
  <li>しょうゆ1L
    <ul>
      <li>このメーカーのものにする</li>
    </ul>
  </li>
  <li>無洗米1キロ
    <ul>
      <li>このメーカーのものにする</li>
    </ul>
  </li>
  <li>卵1パック
    <ul>
      <li>タイムセールが終わってたら買わない</li>
    </ul>
  </li>
  <li>豆腐2パック
    <ul>
      <li>木綿1、絹1</li>
    </ul>
  </li>
</ul>

このように、<li>の中に<ul>を入れ子にします。

HTMLでの表示

• しょうゆ1L
  • このメーカーのものにする
• 無洗米1キロ
  • このメーカーのものにする
• 卵1パック
  • タイムセールが終わってたら買わない
• 豆腐2パック
  • 木綿1、絹1

するとこのように、1段下がったリストが挿入されます。

ただ、補足説明という意味では<dl>タグを使ったほうがいい場合もあります。

買い物用定義リストの例

<dl>
<dt>しょうゆ1L</dt>
<dd>このメーカーのものにする</dd>

<dt>無洗米1キロ</dt>
<dd>このメーカーのものにする</dd>

<dt>卵1パック</dt>
<dd>タイムセールが終わってたら買わない</dd>

<dt>豆腐2パック</dt>
<dd>木綿1、絹1</dd>
</dl>

このように記述します。

HTMLでの表示

しょうゆ1L

このメーカーのものにする

無洗米1キロ

このメーカーのものにする

卵1パック

タイムセールが終わってたら買わない

豆腐2パック

木綿1、絹1

「説明」の役割を持った<dd>タグがあるため入れ子にする必要がなく、シンプルに記述できます。

また定義リストは標準でプレフィックス（接頭辞）を持たないことが多いので、スタイルの指定をしなくても項目の頭に何も付きません。

<ul style="list-style-type:none;">とか書くのが面倒な場合にも使えます。