<dl></dl>

ブラウザ
  • IE
  • Cr
  • Sf
  • Fx
  • O
分類 フロー・コンテンツ / 内容にdt要素dd要素で構成されたグループを含む場合:パルパブル・コンテンツ
利用場所 フロー・コンテンツが置ける場所
内容 1つ以上のdt要素と、それに続く1つ以上のdd要素で構成されたグループを0個以上 / スクリプトサポート要素

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">HTMLリファレンス</a></dt>
<dd>HTMLに関する情報が満載です。各要素を簡単に探せます!</dd>

<dt><a href="css.html">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つ説明を、段落ごとにdt要素で表現するのも意味的に不適切な配置となります。

<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>

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

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

名前のテキスト
値のテキスト
  • 値の左マージンは、dd要素のデフォルトスタイルによるものです。
HTML5における変更点
  • 要素の定義が微妙に変わりました。(定義リスト → 記述リスト)
  • compact属性が廃止されました。

使用例


<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要素
記述リストの値部分を表す要素