HTML［dl要素］記述リストを表す

<dl></dl>

更新日	2022/06/27
仕様	HTML Living Standard
分類	フロー・コンテンツ / 内容にdt要素とdd要素で構成されたグループを含む場合：パルパブル・コンテンツ
利用場所	フロー・コンテンツが置ける場所
内容	1つ以上のdt要素と、それに続く1つ以上のdd要素で構成されたグループを0個以上 / 1つ以上のdiv要素 / 必要に応じてスクリプトサポート要素

dl要素は、名前（dt要素）と値（dd要素）のグループで構成される記述リストを表します。（ここで言う名前とは人名に限定したものではありません）

デフォルトスタイル（上下マージン）


<dl>
<dt>名前</dt>
<dd>名前に対する値</dd>
</dl>

この記述リストは、様々な用途で使用することができます。

例えば、更新情報の日付と内容を表したり、

<dl>

<dt>9月24日</dt>
<dd>HTMLリファレンスを更新しました</dd>

<dt>10月5日</dt>
<dd>CSSリファレンスを更新しました</dd>

</dl>

リンクメニューのタイトルと説明を表したり、

<dl>

<dt><a href="html/">HTMLリファレンス</a></dt>
<dd>HTMLに関する情報が満載です。各要素を簡単に探せます！</dd>

<dt><a href="css/">CSSリファレンス</a></dt>
<dd>CSSに関する情報が満載です。各プロパティーを簡単に探せます！</dd>

</dl>

Q&Aの質問と回答を表したりすることもできます。

<dl>

<dt>見積りは無料ですか？</dt>
<dd>はい、無料です。正式なご発注をいただくまでは料金は ...</dd>

<dt>制作期間はどのくらいかかりますか？</dt>
<dd>制作物の規模により、制作期間は大きく異なります。一般的な ...</dd>

</dl>

上記のように、dl要素内には複数のグループ（名前と値の組み合わせ）を配置することができます。

定義リストとして使用する場合

用語と定義を表したい場合は、次のように用語の部分でdfn要素を使用します。

dt要素だけでは、定義する用語を表したことにはなりません。

<dl>
<dt><dfn>スマートフォン</dfn></dt>
<dd>高機能な携帯電話のこと。スマホと略されることもある。</dd>
</dl>

組み合わせについて

名前と値は、必ずしも1対1である必要はありません。例えば、1対2、2対1、といった組み合わせも可能です。

次の例では、それぞれのリストが1つのグループを表しています。（1つ目は1対2、2つ目は2対1、3つ目は2対2）

<dl>
<dt>編集者</dt>
<dd>山田太郎</dd>
<dd>鈴木花子</dd>
</dl>

<dl>
<dt>著作者</dt>
<dt>編集者</dt>
<dd>山田太郎</dd>
</dl>

<dl>
<dt>著作者</dt>
<dt>編集者</dt>
<dd>山田太郎</dd>
<dd>鈴木花子</dd>
</dl>

配置のルール

dl要素の内容には、dt要素とdd要素の組み合わせを配置することができます。また、グループ単位で見た場合は、dt要素（1つ以上）を先に、dd要素（1つ以上）を後に配置する必要があります。

例えば、次の定義リストは適切な配置となりますが、

<dl>
<dt>グループA 用語</dt>
<dd>グループA 説明1</dd>
<dd>グループA 説明2</dd>
</dl>

<dl>
<dt>グループA 用語1</dt>
<dt>グループA 用語2</dt>
<dd>グループA 説明</dd>
</dl>

次のリストは文法違反となり、

<dl>
<dt>グループA 用語</dt>
</dl>

<dl>
<dd>グループA 説明</dd>
</dl>

<dl>
<dd>グループA 説明</dd>
<dt>グループB 用語</dt>
</dl>

次のリストは意味的に不適切な配置となります。（グループAの説明が配置されていないため）

<dl>
<dt>グループA 用語</dt>
<dt>グループB 用語</dt>
<dd>グループB 説明</dd>
</dl>

また、複数の段落からなる1つ説明を、段落ごとにdd要素で表現するのも意味的に不適切な配置となります。

<dl>
<dt>グループA 用語</dt>
<dd>グループA 説明1 段落1</dd>
<dd>グループA 説明1 段落2</dd>
</dl>

上記の場合、次のように記述するのが適切です。

<dl>
<dt>グループA 用語</dt>
<dd>
<p>グループA 説明1 段落1</p>
<p>グループA 説明1 段落2</p>
</dd>
</dl>

div要素でまとめる

現行のHTMLでは、dt要素とdd要素のグループをdiv要素でまとめることができます。これは、スタイルの設定やグローバル属性を指定する際に役立ちます。

次の例では、2つのグループをdiv要素によってまとめています。

<dl>

<div>
<dt>グループA 用語</dt>
<dd>グループA 説明</dd>
</div>

<div>
<dt>グループB 用語</dt>
<dd>グループB 説明</dd>
</div>

</dl>

要素のデフォルトスタイル

一般的なブラウザでは、この要素の上下に1em程度のマージンが入ります。

名前のテキスト: 値のテキスト

値の左マージンは、dd要素のデフォルトスタイルによるものです。

旧HTMLからの変更点

HTML5：要素の定義が微妙に変わりました。（定義リスト → 記述リスト）
HTML5：compact属性が廃止されました。
HTML5.2：dl要素内にdiv要素を配置できるようになりました。

使用例

定義リストとして使用した例


<dl>
<dt><dfn>dl要素</dfn></dt>
<dd>記述リストを表す要素</dd>
<dt><dfn>dt要素</dfn></dt>
<dd>記述リストの名前部分を表す要素</dd>
<dt><dfn>dd要素</dfn></dt>
<dd>記述リストの値部分を表す要素</dd>
</dl>

表示例

dl要素: 記述リストを表す要素
dt要素: 記述リストの名前部分を表す要素
dd要素: 記述リストの値部分を表す要素

div要素でまとめて、スタイルを設定した例


<!DOCTYPE html>
<html>
<head>

<title>文書のタイトル</title>

<style>

dl div {
margin: 0 0 20px;
padding: 10px;
background-color: #ffffff;
}

</style>

</head>
<body>

<dl>

<div>
<dt>見積りは無料ですか？</dt>
<dd>はい、無料です。正式なご発注をいただくまでは料金はかかりません。</dd>
</div>

<div>
<dt>制作期間はどのくらいかかりますか？</dt>
<dd>制作物の規模により、制作期間は大きく異なります。一般的な規模のサイトでは、2～3ヶ月で納品が可能です。</dd>
</div>

<div>
<dt>納品後の手直しは無料で行ってもらえますよね？</dt>
<dd>申し訳ありませんが、納品後の手直しは有償での対応となっております。</dd>
</div>

</dl>

</body>
</html>