HTMLの説明リストタグ【dl・dt・dd】の使い方を徹底解説

HTMLの以前は定義リストタグであったdl・dt・ddというタグですが、今は説明リストタグへと意味が変わり使い方にも柔軟性が出て来ました。ただ、その分使い方があやふやになっている方も多いタグですよね。

本記事ではそんなdlタグについての「そもそもどんな意味があってどう使うの？」や「tableタグやulタグとの違いは？」といった疑問を解消していきます。

web兄さん

本記事を読むことでdl・dt・dtタグを自信をもって使うことができるようになりますよ。

dl・dt・ddってどんな意味？

実は、このdl・dt・ddというタグは少し前まではそれぞれ

• dl（definition list）= 定義リスト
• dt（definition term）= 定義する言葉
• dd（definition description）= 定義の説明

という意味で「定義リスト」としての役割を持っていました。

<dl>
  <dt>りんご</dt>
  <dd>赤くてまるい果物。味は甘酸っぱい</dd>
</dl>

定義リストから説明リストへ

HTML5からそれぞれ

• dl（description list）= 説明リスト
• dt（description term）= 説明する言葉
• dd（definition / description）= 定義文 or 説明文

というように「説明リスト」へとタグの持つ意味に変わり用途の幅が広がりました。

<dl>
  <dt>明日の天気</dt>
  <dd>午前中は晴れ、夕方頃から曇り</dd>
</dl>

つまり「dtの内容をddで説明しているような形になっていれば問題ない」ので、単語の解説をするような辞典的な書き方でなくてもOKになりました。

dlタグを理解するポイント

ポイントとしては現在のdl・dt・ddタグは「定義リスト」である辞書的な書き方と「説明リスト」の書き方どちらの役割も持っているという点。html5になった現在でも「定義リスト」として使うことは問題はないんだ。
とにかくdlタグは以前と比べて使える場面が増えたということを覚えておこう！

つまり「dtの内容をddで説明しているような形になっていれば問題ない」ので、単語の解説をするような辞典的な書き方でなくてもOKになりました。

dlタグを理解するポイント ポイントとしては現在のdl・dt・ddタグは「定義リスト」である辞書的な書き方と「説明リスト」の書き方どちらの役割も持っているという点。html5になった現在でも「定義リスト」として使うことは問題はないんだ。 とにかくdlタグは以前と比べて使える場面が増えたということを覚えておこう！

dl・dt・dtの使い方

基本的な用途と意味がわかったところでコードの書き方を学習しましょう。

使い方はとっても簡単です。dtに説明したいことを書き、ddでそれに対しての説明文を書きます。その全体をdlで囲うだけです。

dlの中にdtとddはいくらかいてもOKです。また、「dtが1つに対して、ddも1つ」というルールはなく、内容によっては数にばらつきがうまれます。詳しくは後述します。

1つのdtに対し複数のdd

<dl>
  <dt>りんご</dt>
  <dd>赤くてまるい果物</dd>
  <dd>味は甘酸っぱい</dd>
</dl>

複数のdtに対し1つのdd

<dl>
  <dt>りんご</dt>
  <dt>リンゴ</dt>
  <dt>林檎</dt>
  <dd>赤くてまるい果物</dd>
</dl>

複数のdtに対して複数のdd

<dl>
  <dt>りんご</dt>
  <dd>赤くてまるい果物</dd>
  <dt>ぶどう</dt>
  <dd>紫で房状の果物</dd>
  <dt>めろん</dt>
  <dd>緑で固い皮に包まれている</dd>
</dl>

dfnタグで辞典的な意味を強調

さきほどhtml5では「定義リスト」と「説明リスト」の2つの役割があると説明しました。

ですが、検索エンジン（Goolge）からしたら同じdl・dt・ddタグなので、その内容が「定義リスト」として使われているのか「説明リスト」として使われているのかを理解することができません。

それを解決するためにdfnタグを使用します。

<dl>
  <dt><dfn>りんご</dfn></dt>
  <dd>赤くてまるい果物。味は甘酸っぱい</dd>
</dl>

dl・dt・ddの実例サンプル

dl・dt・ddの基本的な使い方がわかったところで実際どんなシーンで使うのが適切なのかサンプルをいくつか紹介していきます。

一応おさらいですが、dlは「dtがddによって説明されている」という関係が成り立っていればOKです。それを踏まえて自身でもどんな使い方が適切かイメージしてみましょう。

サービス名とサービスの説明

<p>サービスの紹介</p>
<dl>
  <dt>ホームページ制作</dt>
  <dd>オリジナルホームページの制作</dd>
  <dt>webコンサルティング</dt>
  <dd>ホームページの集客をアドバイス</dd>
</dl>

質問とその回答

<p>サービスに関するFAQ</p>
<dl>
  <dt>ホームページ制作のサービスにはどんな作業が含まれていますか？</dt>
  <dd>コンテンツ企画・文章作成、オリジナルWEBデザインの制作〜コーディングまですべて含まれています。</dd>
</dl>

人物の詳細を説明

<dl>
  <dt>名前</dt>
  <dd>イチロー</dd>
  <dt>職業</dt>
  <dd>プロ野球選手</dd>
  <dt>生年月日</dt>
  <dd>1973年10月22日</dd>
  <dt>身長</dt>
  <dd>180cm</dd>
</dl>

tableやulとはどう使い分ける？

「役割が似ているtableやulとどう使い分けたらいいの？」と思っている人もいるはず。

htmlのタグの定義は決して正解があるとというわけではないですが、以下のことを判断基準にすることで正解に近いタグ付けをできるはずです。

単純なリストはul、リストに説明が必要ならdl

<ul>
  <li>りんご</li>
  <li>ぶどう</li>
  <li>メロン</li>
</ul>

<dl>
  <dt>りんご</dt>
  <dd>赤くてまるい果物</dd>
  <dt>ぶどう</dt>
  <dd>紫で房状の果物</dd>
  <dt>めろん</dt>
  <dd>緑で固い皮に包まれている</dd>
</dl>

1つの項目に対しての説明ならdlを使う

<p>webサイトを作る言語の種類</p>
<table>
  <tr>
    <th>言語名</th><td>html</td><td>css</td>
  </tr>
  <tr>
    <th>役割</th><td>論理構造を定義</td><td>見た目の調整</td>
  </tr>
</table>

<p>htmlについて</p>
<dl>
  <dt>言語の種類</dt>
  <dd>マークアップ言語</dd>
  <dt>役割</dt>
  <dd>論理構造の定義</dd>
</dl>

この部分については説明が難しいので、腑に落ちていない方もいるかもしれません…

そんな時は「表っぽくなりそうならtableを使う」という考え方でもOKです。

dlの見た目をcssで調整する

dlでのリストははデフォルトでは以下のような見た目になっているのでいくつかcssでの調整方法を紹介します。

dtとddを横並びにする

<dl>
  <dt>りんご</dt>
  <dd>赤い果物</dd>
  <dt>ぶどう</dt>
  <dd>紫の果物</dd>
  <dt>めろん</dt>
  <dd>緑の果物</dd>
</dl>

dt{
  float: left;
}

dt::after{
  content: "："
}

dtとddに下線をつける

<dl>
  <div>
    <dt>りんご</dt>
    <dd>赤くてまるい果物</dd>
  </div>
  <div>
    <dt>ぶどう</dt>
    <dd>紫で房状の果物</dd>
  </div>
</dl>

dl div{
  border-bottom:dashed 1px #333333;
  margin:5px 0;
}

dt{
  float: left;
}

dt::after{
  content: "："
}

dlリストのまとめ

本記事で学習したことのまとめです。

• dlは辞書的な定義リストとしての使い方と説明リストの使い方がある
• dtの内容をddで説明している形式であればOK
• 1つのdtに1つのddというルールはなく複数になることもある
• よくある使い方としては「商品とその説明」「質問とその回答」「人物とその説明」などがある

dlはweb制作現場の人でも意外ときちんとした使い方を知らないままの人が多いので基本を抑えて自信を持って使えるようにできるといいですね。