サイト制作

HTMLのdl・dt・ddは用語集だけ？名前と値の組を読みやすく整理する

慈愛妃きづな

2026-11-07

この記事には広告・アフィリエイトリンクが含まれます。

用語と説明、名前と値を組にする説明リスト。dl・dt・ddの役割と、単なる字下げのために使わない理由を紹介します。

名前と、その説明を組にする

用語の意味を並べるページでは、用語と説明がどの組なのかをはっきりさせたいですね。HTMLのdl要素は、こうした関連付けのリストを表せます。dtが名前や用語、ddが対応する説明や値の役割を持ちます。

用語集だけでなく、作品名とその情報、項目名と設定値など、名前と値の組を伝えたい場面でも検討できます。普通の箇条書きと違い、何についての説明なのかという関係が構造に含まれます。

一つの用語に複数の説明がある場合や、複数の呼び名に共通の説明を付ける場合もあります。常にdt一個とdd一個だけを機械的に繰り返すという理解にせず、情報の対応関係を先に整理しましょう。

見た目をまとめるために、各グループをdivで包む形式も使えます。ただし、どこが名前でどこが説明なのかがあいまいになるほど、装飾用の構造を増やす必要はありません。

ブラウザーの標準表示ではddが字下げされることがありますが、その見た目だけを目的にdlを使うのは避けます。説明の組ではない普通の段落は、CSSで余白を調整する方が内容に合います。

公開前には、装飾を控えた状態でも名前と説明の対応が追えるかを確認しましょう。情報量が多い場合は表の方が比較しやすいこともあります。組として読むのか、行や列を比べるのかで選ぶと整理しやすいです。