MENU

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

2021 2/13
dl・dt・dd!説明リストタグの使い方

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

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

目次

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

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

dldefinition list定義リスト
dtdefinition term定義する言葉
dddefinition description定義文
<dl>
  <dt>かりんとう</dt>
  <dd>棒状の生地を蜜をからめて乾燥させた、和菓子の一種。</dd>
</dl>

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

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

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

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

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

説明リストって?

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

dldefinition list説明リスト
dtdefinition term説明する言葉
dddefinition 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>

使い方は簡単です。

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

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

ulliの関係と同様、dlの中にはdtddをいくつ書いてもOKです!

dt…1つ / dd…複数

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

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

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

dt…複数 / dd…1つ

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

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

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

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において、dldtddタグは定義リスト説明リスト、2つの役割があると説明しましたね。

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

Google Google

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

となってしまいます。

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

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

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

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

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

かもめ かもめ

一応おさらいですが、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>

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

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

table/ulとの使い分け

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

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

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

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

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

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

あわせて読みたい
ul・ol・liタグの基礎知識から書き方まで!
ul・ol・liタグの基礎知識から書き方まで!今回は、リストを作成の際に使用するul・ol・liタグ使い方を解説したいと思います。リストのマークのデザインを変更する方法など、ul・ol・liタグを使うときに悩みやす...

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>
名前アンパンマンカレーパンマン
種類粒あんパンカレーパン
声優戸田恵子柳沢三千代

こういったtableの場合、項目に対して全く別の2つのもの(アンパンマンとカレーパンマン)について説明していますよね。

dtddはセットでないといけないので、この場合はtableを使用します。

表っぽくなりそうなものにはtableを使用します!

あわせて読みたい
tableタグの使い方+応用テクニックを解説!
tableタグの使い方+応用テクニックを解説!今回はHTMLでテーブル(表)を作成できるtableタグをご紹介したいと思います!テーブルの基本的な作り方から、CSSを使用した見た目の変更方法まで解説してきます。【tab...

dl・dt・ddのまとめ

  • dl定義リスト説明リスト2つの使い方がある
  • dtについてddで説明していればOK
  • dtddに数のルールはなく、複数書くことも可能
  • 事業概要、更新履歴、プロフィールなどでよく使用される

この記事が気に入ったら
フォローしてね!

この記事を書いた人

都内勤務のフロントエンドエンジニア。初心者の方向けにブログを更新中。webに萌えてもっと楽しく、もっと素敵に!

目次
閉じる