128人がいいねしました

更新日

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

web兄さん

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>

例えばこのコードのようにdtで囲った単語の定義をddに記述する、辞典のような書き方しかできませんでした。

りんご赤くてまるい果物。味は甘酸っぱい

しかし、html5になってからはdl・dt・ddのタグの持つ意味が「定義リスト」から「説明リスト」に変わったことで様々な用途で使用することができるようになりました。

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

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の使い方

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

dl・dt・ddの書き方

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

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

1つのdtに対し複数のdd

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

1つのdtに対して複数の説明をしたい場合はddを複数書くことができます。

複数のdtに対し1つのdd

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

定義する言葉のタイプが複数ある場合はdtを複数書けばdd1つでまとめて定義することができます。

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

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

もちろんdt(説明したい言葉)とdd(説明文)をセットで複数かいていくこともできます。

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

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

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

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

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

このように「定義リスト」として、辞書的な書き方をする場合はdtに書く言葉をdfnで囲うことでそのリストが定義リストであることを強調します。

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

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

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

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

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

各サービスとそのサービスに関する説明文をセットにしてdlで説明リストにしています。

質問とその回答

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

このように質問をdtその回答をddという質問に対する説明という形で書くのもOK。

人物の詳細を説明

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

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

このような項目とそのデータの組み合わせのことをメタデータと呼ぶので覚えておきましょう。

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

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

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

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

ul・olを使うケース

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

このように単純な項目のリストの場合はulolを使えば問題ありません。

dlを使うケース

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

「リスト」+「項目ごとの説明」を書く場合はdlを使いましょう。

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

tableを使うケース

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

「webサイトを作る言語の種類」となっていてhtmlとcssと複数の項目についての説明をしなければいけないのでdlではうまく表現ができません。この場合はtableを使います。

dlを使うケース

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

こちらはhtmlについてというテーマなのでhtmlという1つの項目に対しての説明だけでOKなので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を1行で横並びにしたい場合はdtにのみfloat : left;を適用させます。ddにも適用させてしまうとdlリスト内のすべての項目が横並びになるので注意してください。

また、横並びになると文字が繋がって見えてしまうのでdtの擬似要素afterに:という記号を挿入しています。

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: ":"
}

dtとddを複数かいた場合にdivで囲ってグループ化することで1行に対してcssを適用できるようにします。

そのdivに対してborderbackground-colorなどで装飾することでdtとddを見やすくわけることができます。いう記号を挿入しています。

横並びにする方法は先ほどと同じでdtfloat : left;を適用してます。

dlリストのまとめ

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

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

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

“WEB制作の勉強で失敗したくないあなたへ”

サイト制作をホントに0から学習できる教材を無料配布中!

\モダンなポートフォリオサイトが作れるように!/
  • 他のスクールなら確実に「有料級」のWEB制作の教材が今なら無料で閲覧可能!
  • ディレクター、デザイナー、エンジニアすべて一貫できる現役プロが1人で作成したから体系的に学習できる
  • 4つの課題にチャレンジしながら着実に基礎を固めていくから挫折がない

無料配布の講座では、このようにモダンなポートフォリオサイトが作れちゃいます!

特設ページで詳しくチェックする

スクール越えの圧倒的なコスパ1ヶ月でWeb制作を身に着ける

プロのメンターサポート付き実務レベルのコーディングカリキュラム

詳細を今すぐチェック!

ギャクサンで作成するポートフォリオサイトのイメージ

記事では見れない豆知識

圧倒的なコスパを体感1ヶ月でWeb制作を身に着ける

プロのメンターサポート付き実務レベルのコーディングカリキュラム

詳細を今すぐチェック!

ギャクサンで作成するポートフォリオサイトのイメージ