<dl>定義リスト

<dl>タグは、その範囲が定義リスト(definition list)である事を表す際に使用します。 定義リストとは、定義する用語(<dt>)とそれに対する説明文(<dd>)をセットにした形式のリストの事です。

使い方は<dl>~</dl>内にdt要素(定義する用語)とdd要素(その用語に対する説明文)を組み合わせて定義リストを構成します。 これらは必ずしも一対一にする必要はなく、それぞれ必要な数だけ配置することが可能です。

また<dl>タグは用語の定義に限定せずに使用することができます。 例えば、対話を表現する場合など、幅広く応用することができます。

HTML5での変更点

<dl>はHTML4.01ではdefinition list(定義リスト)の略でしたが、HTML5ではdescription list(用語説明リスト)に変更されました。 なのでHTML5では、「定義する用語とその説明文」という意味から「用語とその説明文」という意味に変わっています。

また<dl>~</dl>内のdt要素とdd要素は必ずしも一対一にする必要はないため、一つの<dt>に対して複数の<dd>を設定する事などができ、その逆にする事も可能です。 例えば1対2、あるいは2対1などの組み合わせができます。

ただし<dl>~</dl>内の最初の要素はdt要素にする必要があります。 最初にdd要素を配置した場合は、そのdd要素に対応するdt要素がありません。 ですので、順序を間違えないようにして下さい。

また定義語という事を明確に示すには、dt要素内に<dfn>~</dfn>を配置します。
なおHTML5では、compact属性が廃止されています。

書式

  • <dl 属性="値">~</dl> ……… 定義・説明リストを表示する

使用した時の例

<dl>
  <dt>果物</dt>
  <dd>リンゴ</dd>
  <dd>イチゴ</dd>
</dl>

<dl>
  <dt>果物</dt>
  <dt>デザート</dt>
  <dd>イチゴ</dd>
</dl>

<dl>
  <dt lang="ja"><dfn>果物</dfn></dt>
  <dt lang="en-US"><dfn>fruit</dfn></dt>
  <dd>強い甘味を有し、調理せずそのまま食することが一般的であるもの</dd>
</dl>

<dl>~</dl>内に複数のリストがある場合、その並び順が意味を持つ場合もあります。 下記はその例です。

<dl>
  <dt>質問1</dt>
  <dd>その答え1</dd>
  <dt>質問2</dt>
  <dd>その答え2</dd>
  <dt>質問3</dt>
  <dd>その答え3</dd>
</dl>

<p>ビンゴは次のようなルールとなります</p>
<dl>
  <dt>1列揃った場合</dt>
  <dd>10万円プレゼント</dd>
  <dt>2列揃った場合</dt>
  <dd>20万円プレゼント</dd>
  <dt>3列揃った場合</dt>
  <dd>30万円プレゼント</dd>
  <dt>1列も揃わなかった場合</dt>
  <dd>100万円プレゼント</dd>
</dl>

ブラウザ上の表示例

果物
リンゴ
イチゴ
果物
デザート
イチゴ
果物
fruit
強い甘味を有し、調理せずそのまま食することが一般的であるもの
質問1
その答え1
質問2
その答え2
質問3
その答え3

ビンゴは次のようなルールとなります

1列揃った場合
10万円プレゼント
2列揃った場合
20万円プレゼント
3列揃った場合
30万円プレゼント
1列も揃わなかった場合
100万円プレゼント

対応ブラウザなどのデータ

形式 <dl>~</dl> カテゴリ フローコンテンツ
親要素 フローコンテンツが期待される場所 子要素 dt,dd
開始タグ 必須 終了タグ 必須
グローバル属性 accesskey / class / contenteditable / contextmenu / dir / draggable / hidden / id / lang / spellcheck / style / tabindex / title / translate
対応ブラウザ Internet Explorer8~ , Google Chrome14~ , Firefox7~ , Opera11.5~ , Safari5.1~