dl要素

dl要素は、説明リストを示す要素。

カテゴリー フロー・コンテンツ。
パルパブル・コンテンツ（１個以上のdt要素と１個以上のdd要素の組み合わせを１個以上含む場合）。
コンテキスト フロー・コンテンツを内包できる要素内で使用できる。
コンテンツ・モデル １個以上のdt要素と１個以上のdd要素の組み合わせを０個以上内包できる。
属性 グローバル属性。
ブラウザ対応

構文

<dl>
	<dt>用語</dt>
		<dd>説明</dd>
</dl>

要点

  • dl要素は、説明リストを示す要素である。
  • dl要素内には、dt要素とdd要素を配置できる。
  • dl要素は、用語と定義、質問と回答などに使う。用語や質問はdt要素、定義や解答はdd要素で括る。
  • リストは、入れ子にし、多階層にすることもできる。
  • HTML5より前は、定義リストと呼んでいた。定義リストにする場合は、dt要素内の定義用語を、更にdfn要素で括る。

サンプルコード

<dl>
	<dt>用語Ａ</dt>
		<dd>用語Ａの説明文。</dd>
	<dt>用語Ｂ</dt>
		<dd>用語Ｂの説明文１。</dd>
		<dd>用語Ｂの説明文２。</dd>
	<dt>用語Ｃ</dt>
		<dd>用語Ｃの説明文。</dd>
</dl>

入れ子（ネスト）

入れ子にする場合は、dd要素内にdl要素を配置する。

<dl>
	<dt>用語</dt>
		<dd>説明
			<dl>
				<dt>用語</dt>
					<dd>説明</dd>
			</dl>
		</dd>
</dl>

サンプル

１階層

HTMLソースコード
<dl>
	<dt>用語Ａ</dt>
		<dd>用語Ａの説明</dd>
	<dt>用語Ｂ</dt>
		<dd>用語Ｂの説明１</dd>
		<dd>用語Ｂの説明２</dd>
	<dt>用語Ｃ</dt>
	<dt>用語Ｄ</dt>
		<dd>用語Ｃと用語Ｄの説明</dd>
</dl>
<dl>
	<dt>質問Ａ</dt>
		<dd>質問Ａの回答</dd>
	<dt>質問Ｂ</dt>
		<dd>質問Ｂの回答１</dd>
		<dd>質問Ｂの回答２</dd>
	<dt>質問Ｃ</dt>
	<dt>質問Ｄ</dt>
		<dd>質問Ｃと質問Ｄの回答</dd>
</dl>
実際の表示
用語Ａ
用語Ａの説明
用語Ｂ
用語Ｂの説明１
用語Ｂの説明２
用語Ｃ
用語Ｄ
用語Ｃと用語Ｄの説明
質問Ａ
質問Ａの回答
質問Ｂ
質問Ｂの回答１
質問Ｂの回答２
質問Ｃ
質問Ｄ
質問Ｃと質問Ｄの回答

多階層

HTMLソースコード
<dl>
	<dt>用語</dt>
		<dd>説明</dd>
		<dd>説明
			<dl>
				<dt>用語</dt>
					<dd>説明</dd>
				<dt>用語</dt>
					<dd>説明</dd>
					<dd>説明</dd>
			</dl>
		</dd>
	<dt>用語</dt>
		<dd>説明</dd>
</dl>
実際の表示
用語
説明
説明
用語
説明
用語
説明
説明
用語
説明