Updated / Published

dd要素(definition discription)は dl要素内で定義型リスト(説明付きリストともいう)の項目の定義(説明)部分を指定します。視覚環境の UAではdd要素の内容は左側に余白を設けたインデント表示になります(この余白はCSSmarginプロパティで調整することができます)。

定義型リストは "<dl><dt>用語</dt><dd>定義</dd></dl>" のように dt要素に用語を記述し、dd要素にはその用語の定義(説明)する場合等に用いられます。dl要素内で dd要素を単独で使用することもできますが、項目を与えるdt要素を先行させて使われるべきです。項目とその定義の関係は1対1である必要はありません。複数の定義をもつ場合には、ひとつのdt要素に対して複数のdd要素を指定すると良いでしょう。逆に複数のdt要素に対してひとつのdd要素でも、また、複数のdt要素に複数のdd要素で構成することもできます。

バージョン
  • HTML4.01(S,T,F)
  • XHTML1.0(S,T,F)
  • XHTML1.1
要素分類
dl要素の子要素
開始タグ
必須
終了タグ
  • XHTML 必須
  • HTML4.01 省略可
非推奨
-
内容モデル

dd要素に指定できる属性

共通属性
イベント属性

dd要素のサンプル

複数の定義をもつ場合は、次のようにひとつのdt要素に対して複数のdd要素を指定すると良いでしょう。

<dl>
<dt>background</dt>
<dd>1. 背景</dd>
<dd>2. 生い立ち, 経歴</dd>
</dl>

HTML5における定義型リスト

HTML5では、従来の用語 (dt要素)とその定義 (dd要素)としての用途だけではなく、メタデータの題目と値など名前と値のグループで構成されるリストととして定義されています。

用語とその定義として用いる場合には、より明確なセマンティクスを与えるためにdt要素に用語であることを示すdfn要素を組み合わせて使用します。

<dl>
<dt><dfn>HTML</dfn></dt>
<dd>Hyper Text Markup Languageの略。ウェブページを記述するためのマークアップ言語。</dd>
</dl>

また、1つのdl要素の中で、同じ内容を持つdt要素が複数あってはいけないという制約も加えられています。このため、たとえば従来は会話文を示したい場合にdl要素を使うケースがよく見受けられてきたと思われますが、このような用例は不適切であるということになりましたので注意が必要です。

<dl>
<dt>Costello</dt><dd>Look, you gotta first baseman?</dd>
<dt>Abbott</dt><dd>Certainly.</dd>
<dt>Costello</dt><dd>Who's playing first?</dd>
<dt>Abbott</dt><dd>That's right.</dd>
<dt>Costello</dt><dd>becomes exasperated.</dd>
<dt>Costello</dt><dd>When you pay off the first baseman every month, who gets the money?</dd>
<dt>Abbott</dt><dd>Every dollar of it.</dd>
</dl>

会話文では、dl要素を用いるのではなく、次のように段落の中でb要素を用いて、話し手と会話内容を区別するなどのマークアップが適切とされています。

<p><b>Costello</b> Look, you gotta first baseman?</p>
<p><b>Abbott</b> Certainly.</p>
<p><b>Costello</b> Who's playing first?</p>
<p><b>Abbott</b> That's right.</p>
<p><b>Costello</b> becomes exasperated.</p>
<p><b>Costello</b> When you pay off the first baseman every month, who gets the money?</p>
<p> <b>Abbott</b> Every dollar of it.</p>

ブロックレベル要素をdt要素に含められる

HTML4.01, XHTML1.0, XHTML1.1ではdt要素が内包できるのは、インライン要素とテキストのみでしたが、HTML5では、従来のブロックレベル要素も含むことができるようになりました。

<dl>
	<dt>...
		<dl>
			<dt>...</dt>
			<dd>...</dd>
		</dl>
	</dt>
	<dd>...</dd>
</dl>

従来はdl要素の入れ子にする場合は、dd要素に内包させなければなりませんでしたが、上記のようにdt要素にdl要素を内包することもできるようになっています。