<dl></dl>

更新日
仕様 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>

表示例
見積りは無料ですか?
はい、無料です。正式なご発注をいただくまでは料金はかかりません。
制作期間はどのくらいかかりますか?
制作物の規模により、制作期間は大きく異なります。一般的な規模のサイトでは、2~3ヶ月で納品が可能です。
納品後の手直しは無料で行ってもらえますよね?
申し訳ありませんが、納品後の手直しは有償での対応となっております。