128人がいいねしました
更新日
HTMLの説明リストタグ【dl・dt・dd】の使い方を徹底解説
HTMLの以前は定義リストタグであったdl・dt・ddというタグですが、今は説明リストタグへと意味が変わり使い方にも柔軟性が出て来ました。ただ、その分使い方があやふやになっている方も多いタグですよね。
本記事ではそんなdlタグについての「そもそもどんな意味があってどう使うの?」や「tableタグやulタグとの違いは?」といった疑問を解消していきます。
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の使い方
基本的な用途と意味がわかったところでコードの書き方を学習しましょう。
使い方はとっても簡単です。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
を複数書けばdd
1つでまとめて定義することができます。
複数の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>
人物や商品の細かなデータをdt
とdd
で紐づけてdl
でまとめることができます。
このような項目とそのデータの組み合わせのことをメタデータと呼ぶので覚えておきましょう。
tableやulとはどう使い分ける?
「役割が似ているtableやulとどう使い分けたらいいの?」と思っている人もいるはず。
htmlのタグの定義は決して正解があるとというわけではないですが、以下のことを判断基準にすることで正解に近いタグ付けをできるはずです。
単純なリストはul、リストに説明が必要ならdl
ul・olを使うケース
<ul>
<li>りんご</li>
<li>ぶどう</li>
<li>メロン</li>
</ul>
このように単純な項目のリストの場合はul
やol
を使えば問題ありません。
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に対してborder
やbackground-color
などで装飾することでdtとddを見やすくわけることができます。いう記号を挿入しています。
横並びにする方法は先ほどと同じでdt
にfloat : left;
を適用してます。
dlリストのまとめ
本記事で学習したことのまとめです。
- dlは辞書的な定義リストとしての使い方と説明リストの使い方がある
- dtの内容をddで説明している形式であればOK
- 1つのdtに1つのddというルールはなく複数になることもある
- よくある使い方としては「商品とその説明」「質問とその回答」「人物とその説明」などがある
dl
はweb制作現場の人でも意外ときちんとした使い方を知らないままの人が多いので基本を抑えて自信を持って使えるようにできるといいですね。