HTMLのdl,dt,ddタグ使い方まとめ

html

HTMLのdl,dt, ddタグは、定義リスト（description list）をマークアップするために使用されます。

dlタグは定義リスト全体を囲み、dt(definition term) タグは定義される用語を、dd(definition description) タグはその用語の説明を表します。
この記事では、これらのタグの基本的な使い方から、構造、CSSとの連携など、サンプルコードを交えながら書いています。

dl, dt, ddタグの基本的な使い方

dlタグは定義リストのコンテナとして使用され、その中に dtタグで用語を、ddタグでその用語の説明を記述します。

<dl>
  <dt>コーヒー</dt>
  <dd>温かい、または冷たい飲み物。カフェインを含んでいます。</dd>
  <dt>紅茶</dt>
  <dd>茶葉から作られる、世界中で飲まれている飲み物。</dd>
</dl>

上記のHTMLは、ブラウザで以下のように表示されます。（chromeのデフォルト）
dt要素は左側に、dd要素は少しインデントされて表示されることが多いです。

ブラウザでの表示は、下記のようになります。
dl,dt,ddタグのデフォルト表示を確認

dl, dt, ddタグの構造

定義リストは、一つ以上の用語 (dt)と、それに続くその用語の説明 (dd)のペアで構成されます。
一つの用語に対して複数の説明ddを記述することも可能です。

また、複数の用語に対して一つの説明ddを記述することも可能です。

一つの用語に複数の説明

ddタグを複数使っている例です。

<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language の略です。</dd>
  <dd>Webページの構造を記述するために使用されるマークアップ言語です。</dd>
</dl>

ブラウザでの表示は、下記のようになります。
ddタグを複数使って表示確認

複数の用語に一つの説明（意味的には注意が必要）

<dl>
  <dt>猫</dt>
  <dt>犬</dt>
  <dd>一般的なペットとして知られています。</dd>
</dl>

上記の例は、意味的には「猫」と「犬」の両方が「一般的なペットとして知られています」という説明を持つと解釈されます。
ですが、構造としては dtが連続しているため、CSSでのスタイリングが意図通りにならない可能性があります。

通常は、それぞれの用語にddを記述する方が適切です。
ブラウザでの表示は、下記のようになります。
dtタグを複数使って表示確認

dl ,dt ,ddタグとCSS

dl, dt, ddタグのデフォルトのスタイルは、CSSで柔軟にカスタマイズできます。

基本的なスタイルの変更

dl, dt, ddタグにCSSを適用してみます。

dl {
  width: 50%;
  border: 1px solid #ccc;
  padding: 10px;
}

dt {
  font-weight: bold;
  color: navy;
}

dd {
  margin-left: 20px;
  color: green;
}

<dl>
  <dt>色</dt>
  <dd>物体が光を吸収・反射する特性。</dd>
  <dt>形</dt>
  <dd>物体の外観の輪郭。</dd>
</dl>

dlタグにたいして、表示領域の半分の幅(width:%50)を指定して、詰め物(padding)と枠線(boder)を指定しています。
dtタグはフォント太字で紺色、ddタグはテキストの左から余白をとって、フォント色を緑にしています。

結果、ブラウザでの表示は、下記のようになります。
dl, dt, ddタグに対してCSSを適用する

レイアウトの変更

CSS Gridを使用して、dtとddを横並びに配置するなど、より複雑なレイアウトを実現することも可能です。

CSS Grid を使用した例:

dl {
  display: grid;
  grid-template-columns: 100px 1fr; /* `<dt>` の幅と `<dd>` の残りの幅 */
  gap: 5px; /* `<dt>` と `<dd>` の間のスペース */
}

dt {
  grid-column: 1;
}

dd {
  grid-column: 2;
  margin-left: 0; /* デフォルトのインデントをリセット */
}

<dl>
  <dt>名前</dt>
  <dd>山田 太郎</dd>
  <dt>年齢</dt>
  <dd>30歳</dd>
  <dt>職業</dt>
  <dd>Webデザイナー</dd>
</dl>

ブラウザでの表示は、下記のようになります。
dl, dt, ddタグでGridを使って横並び

dl, dt, ddタグの使用例

定義リストは、用語とその説明という本来の用途以外にも、以下のような場面で意味的に適切なマークアップとして使用されることがあります。

  • メタデータ: ブログ記事の作成者、公開日、キーワードなどを記述する。
  • FAQ (よくある質問): 質問を <dt>、回答を <dd> でマークアップする。
  • レシピ: 材料を <dt>、分量を <dd> でマークアップする。
  • 会話リスト: 発言者を <dt>、発言内容を <dd> でマークアップする（ただし、より意味的に適切な <dialog> タグが利用できる場合はそちらを検討します）。

FAQ の例

<dl>
  <dt>送料はいくらですか？</dt>
  <dd>ご注文金額や配送地域によって異なります。詳しくは<a href="/shipping">送料について</a>をご覧ください。</dd>
  <dt>支払い方法は何がありますか？</dt>
  <dd>クレジットカード、銀行振込、代金引換がご利用いただけます。</dd>
</dl>

レシピの例

<dl>
  <dt>小麦粉</dt>
  <dd>200g</dd>
  <dt>砂糖</dt>
  <dd>50g</dd>
  <dt>卵</dt>
  <dd>1個</dd>
</dl>

まとめ

dl, dt, ddタグは、用語とその説明を構造的にマークアップするための HTML 要素です。

定義リストは、デフォルトの表示形式だけでなく、CSS を活用することで様々なレイアウトやスタイルを適用できました。
本来の用途である用語の定義だけでなく、メタデータやFAQなど、意味的に適切な場面で活用することで、Webページのセマンティクスとアクセシビリティを向上させることができます。

HTML
yasuaki

コメント