dl要素とは

<dl>要素は、description listの略で用語説明型リストを表す要素です。なお、HTML5より前は、definition listの略で定義リストを表す要素でしたが、HTML5より意味が変更になりました。会社概要やよくある質問、お問い合わせフォームなどのように、用語とその用語にに対しての説明をセットで繰り返す箇所に使います。 なお、用語説明リストの 用語は、<dt>要素を使い、用語に対しての説明は、<dd>要素を使って表します。

意味・役割

用語説明型リストを表す要素。
（HTML5より前：定義リスト）

利用できるバージョン（HTML4.01以降）

全てのバージョン

コンテンツ・カテゴリ

フロー・コンテンツ。
子要素に1つ以上の <dt>要素と、<dd>要素のグループがある場合は、パルパブル・コンテンツ
（HTML5より前：ブロックレベル要素）

コンテンツ・モデル（梱包できる要素）

<dt>要素とその後に続く<dd>要素のグループが0個以上

この要素を配置できる親要素

フロー・コンテンツを配置できる要素

dl要素で使える属性

どの要素にでも使えるグローバル属性と以下の属性が使えます。

compact属性 廃止

リストをコンパクトな表示にする属性です。HTML4.01以降は非推奨、XHTML1.1で廃止になりました。

属性値

"compact"： コンパクトに表示

利用できるバージョン（HTML4.01以降）

HTML4.01 （Transition/Frameset）、XHTML1.0 （Transition/Frameset）

<dl compact="compact">

dl要素のサンプル

基本的な用語説明リストの例

<dl>
  <dt>HTML</dt>
  <dd>WEBページの文章構造を記す言語</dd>
  <dt>CSS</dt>
  <dd>WEBページの視覚的表現を行う言語</dd>
</dl>

複数の用語に説明する例

<dl>
  <dt>HTML</dt>
  <dt>XHTML</dt>
  <dd>WEBページの文章構造を記す言語</dd>
  <dt>CSS</dt>
  <dt>スタイルシート</dt>
  <dd>WEBページの視覚的表現を行う言語</dd>
</dl>

1つの用語（<dt>要素）に対して、複数の説明（<dd>要素）を付けることも可能です。

仕様

HTML5.1

4.4.8. The dl element

HTML5

4.4.8 The dl element

HTML4.01

10.3 Definition lists: the DL, DT, and DD elements

関連する要素

• <dt>要素
• <dd>要素

関連するレッスン

用語説明型リストの要素 HTML 入門#10

用語説明型リストのdl要素、dt要素、dd要素の使い方について見ていきましょう。