dl・dt・dd！説明リストタグの使い方

2021 2/13

2020.03.02 2021.02.13

HTML5から新しく幅の広がったdlタグ。でも、ulタグやtableタグとの区別がちょっと難しいのではないでしょうか？

この記事では、dl・dt・ddタグの使い方や、ulタグやtableタグとの違いを解説して行きたいと思います！

dl・dt・ddってどんな意味があるの？

元々、dl・dt・ddというタグはそれぞれ定義リストという役割を持っていました。

dl	definition list	定義リスト
dt	definition term	定義する言葉
dd	definition description	定義文

<dl>
  <dt>かりんとう</dt>
  <dd>棒状の生地を蜜をからめて乾燥させた、和菓子の一種。</dd>
</dl>

かりんとう
棒状の生地を蜜をからめて乾燥させた、和菓子の一種。

dtで囲った単語をddで説明していますね。以前まではdl・dt・ddタグはこのような使い方しかできませんでした。

辞書を思い浮かべていただくと分かりやすいと思います

しかしHTML5になってから、dl・dt・ddタグが定義リストから説明リストに意味が変わりました。

説明リストになったことで幅が広がり、様々な用途で使用できるようになりました！

説明リストって？

それでは、説明リストとは一体何なのでしょうか。

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

HTML5からはこのように変わりましたが、これだけだと少し分かりづらいですよね。ここからは例を交えて説明して行きますね。

<dl>
  <dt>光回線の料金</dt>
  <dd>初期費用10,000円、月額4,000円</dd>
</dl>

光回線の料金
初期費用10,000円、月額4,000円

dtの「光回線の料金」について、ddで説明していますね。

先ほどのような、辞書のような使い方ではないのがお分かりいただけましたでしょうか。

かもめ

dtの内容をddで説明していれば問題ないので、辞書的な使い方じゃなくてもOK！もちろん、以前までと同様に辞書的な使い方でもOKです！

dl・dt・dtタグの使い方

基本的な意味や役割はご理解いただけましたでしょうか？ここからはHTMLの書き方を解説していきます！

<dl>
  <dt>説明したいこと</dt>
  <dd>説明文</dd>
</dl>

使い方は簡単です。

全体を囲うdlを書く
説明したいことをdtへ書く
dtに対する説明文をddへ書く

この３つのルールさえ守っていればOKです！

ulとliの関係と同様、dlの中にはdt・ddをいくつ書いてもOKです！

dt…１つ / dd…複数

<dl>
  <dt>かりんとう</dt>
  <dd>和菓子の一種</dd>
  <dd>駄菓子〜高級和菓子まで幅が広い</dd>
</dl>

1つのdt（説明したい言葉）に対していくつも説明をしたい場合、dd（説明文）を複数書くことができます。

「１つのdtに対し、ddは１つだけ」というルールはありません！

dt…複数 / dd…１つ

<dl>
  <dt>かりんとう</dt>
  <dt>かりん糖</dt>
  <dt>花林糖</dt>
  <dd>棒状の生地を蜜をからめて乾燥させた、和菓子の一種。</dd>
</dl>

定義する言葉のタイプが複数ある場合、dt（説明したい言葉）を複数書くことも可能です。

dtが複数ある場合でもdd１つだけでまとめて定義することができます。

dt…複数 / dd…複数

<dl>
  <dt>かりんとう</dt>
  <dd>棒状の生地を蜜をからめて乾燥させたもの。</dd>

  <dt>ぼたもち</dt>
  <dd>米を蒸したものに餡をまぶしたもの。</dd>

  <dt>みたらし団子</dt>
  <dd>砂糖醤油の葛餡をかけた串団子。</dd>

  <dt>和三盆</dt>
  <dd>四国東部で伝統的に生産されている砂糖の一種。</dd>
</dl>

dt（説明したい言葉）とdd（説明文）をセットにし、複数をdlにまとめて書くことも可能です！

Googleから見たら？

HTML5において、dl・dt・ddタグは定義リストと説明リスト、２つの役割があると説明しましたね。

ところが、検索エンジンからしてみれば同じタグなので、

Google

これは定義リストと説明リスト、どっちだ？

となってしまいます。

それを解決するのがdfnタグです。

<dl>
  <dt><dfn>かりんとう</dfn></dt>
  <dd>棒状の生地を蜜をからめて乾燥させた、和菓子の一種。</dd>
</dl>

定義リスト（辞書的な書き方）として書く場合、dtの内容をdfnで囲うことにより、定義リストであることを伝えることができます！

dl・dt・ddタグのサンプル

ここで、dl・dt・ddタグは実際どんなシーンで使われているのか、例をいくつか紹介したいと思います。

かもめ

一応おさらいですが、dtの内容をddで説明していればOKです！

事業概要

<h2>事業概要</h2>
<dl>
  <dt>オフィス移転サービス</dt>
  <dd>オフィス移転のご提案</dd>
  <dt>OA機器</dt>
  <dd>設備や什器の販売</dd>
</dl>

dlで説明リストを作成し、各事業内容をdtに書き、それに関する説明文ddに書いています。

dt	事業内容
dd	事業内容の説明文

更新履歴

<h2>更新履歴</h2>
<dl>
  <dt>2020−12−01</dt>
  <dd>会社ホームページ開設</dd>
  <dt>2020−12−20</dt>
  <dd>冬期休業のご案内</dd>
</dl>

dlで説明リストを作成し、更新日付をdtに書き、内容をddに書いています。

dt	更新日
dd	お知らせのタイトル

プロフィール

<dl>
  <dt>名前</dt>
  <dd>アンパンマン</dd>
  <dt>声優</dt>
  <dd>戸田恵子</dd>
  <dt>種類</dt>
  <dd>粒あんパン</dd>
  <dt>得意技</dt>
  <dd>アンパンチ</dd>
</dl>

人物・商品の細かなデータをdtとddで紐づけてdlでまとめることができます！

項目とデータの組み合わせをメタデータと呼びます！

table/ulとの使い分け

実際のサンプルをご覧いただくと「これはtableやulでも作れるのでは？」と疑問が浮かんだ方も多いはず。

ここではtableやulとの使い分ける際の判断基準をご紹介できればと思います。

HTMLを書く際、どのタグを使用するのかという点においては正解がありません。様々な意見がありますので、自分なりの判断基準を見つけましょう！

ulを使用したほうがいい場合

<ul>
  <li>アンパンマン</li>
  <li>カレーパンマン</li>
  <li>しょくぱんまん</li>
  <li>メロンパンナ</li>
</ul>

ただ項目を並べるリストの場合はulやolを使用します。

tableを使用したほうがいい場合

<p>パン工場の仲間たち</p>
<table>
  <tr>
    <th>名前</th><td>アンパンマン</td><td>カレーパンマン</td>
  </tr>
  <tr>
    <th>種類</th><td>粒あんパン</td><td>カレーパン</td>
  </tr>
  <tr>
    <th>声優</th><td>戸田恵子</td><td>柳沢三千代</td>
  </tr>
</table>