HTMLの定義リスト（dl・dt・dd）の使い方

用語集、よくある質問、プロフィールの項目——「名前」と「その中身」がペアで並ぶ場面って、けっこう多いですよね。そういうときにぴったりなのが、定義リスト。<ul> のリストとはまた別の、専用のリストです。

書いてみよう

「用語 → 説明」のペアを2つ並べてみます。

<dl>
  <dt>HTML</dt>
  <dd>Webページの骨組みをつくる言葉。</dd>

  <dt>CSS</dt>
  <dd>ページの見た目を整える言葉。</dd>
</dl>

読み解くとこうです。

タグ	意味
`<dl>`	definition list、定義リスト全体の“いれもの”
`<dt>`	definition term、説明される言葉（見出しがわ）
`<dd>`	definition description、その説明（中身がわ）

多くのブラウザでは、<dd>（説明）が少し右に字下げされて表示され、「この言葉の説明だな」と見た目でも伝わります。実際の表示がこちら。

<dt>（言葉）の下に、<dd>（説明）が一段さがってぶら下がる——ペアの関係が見た目にも表れます。

<dt> ひとつに対して、<dd> をいくつもつけることもできます。

<dl>
  <dt>シマエナガ</dt>
  <dd>北海道にすむ小さな鳥。</dd>
  <dd>まっ白でまるい姿から「雪の妖精」とも呼ばれる。</dd>
</dl>

ひとつの言葉に、説明を何行か添えたいときに便利です。