dt要素

dt要素は、説明リストにおける用語や質問など説明対象を示す要素。

カテゴリー どのカテゴリーにも属さない。
コンテキスト dl要素内におけるdd要素かdt要素の前で使用できる。
コンテンツ・モデル フロー・コンテンツを内包できる。
ただし、header要素footer要素セクショニング・コンテンツヘッディング・コンテンツを子孫要素に持つことはできない。
属性 グローバル属性
ブラウザ対応

構文

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

要点

  • dt要素は、説明リストにおける用語や質問など説明対象を示す要素である。
  • dl要素内におけるdd要素かdt要素の前で使用できる。
  • 定義リストにする場合は、dt要素内の定義用語を、更にdfn要素で括る。

サンプルコード

説明リスト

<dl>
	<dt>用語A</dt>
		<dd>用語Aの説明文。</dd>
	<dt>用語B</dt>
		<dd>用語Bの説明文1。</dd>
		<dd>用語Bの説明文2。</dd>
	<dt>用語C</dt>
	<dt>用語D</dt>
		<dd>用語Cと用語Dの説明文。</dd>
</dl>

質問と回答

<dl>
	<dt>質問A</dt>
		<dd>質問Aの回答文。</dd>
	<dt>質問B</dt>
		<dd>質問Bの回答文1。</dd>
		<dd>質問Bの回答文2。</dd>
	<dt>質問C</dt>
	<dt>質問D</dt>
		<dd>質問Cと質問Dの回答文。</dd>
</dl>

定義リスト

定義リストにする場合は、dt要素内の定義用語を、更にdfn要素で括る。これにより、定義用語が明確になる。

<dl>
	<dt><dfn>用語A</dfn></dt>
		<dd>用語Aの定義文。</dd>
	<dt><dfn>用語B</dfn></dt>
		<dd>用語Bの定義文1。</dd>
		<dd>用語Bの定義文2。</dd>
	<dt><dfn>用語C</dfn></dt>
	<dt><dfn>用語D</dfn></dt>
		<dd>用語Cと用語Dの定義文。</dd>
</dl>

サンプル

説明リスト

HTMLソースコード
<dl>
	<dt>用語A</dt>
		<dd>用語Aの説明</dd>
	<dt>用語B</dt>
		<dd>用語Bの説明1</dd>
		<dd>用語Bの説明2</dd>
	<dt>用語C</dt>
	<dt>用語D</dt>
		<dd>用語Cと用語Dの説明</dd>
</dl>
実際の表示
用語A
用語Aの説明
用語B
用語Bの説明1
用語Bの説明2
用語C
用語D
用語Cと用語Dの説明

質問と回答

HTMLソースコード
<dl>
	<dt>質問A</dt>
		<dd>質問Aの回答</dd>
	<dt>質問B</dt>
		<dd>質問Bの回答1</dd>
		<dd>質問Bの回答2</dd>
	<dt>質問C</dt>
	<dt>質問D</dt>
		<dd>質問Cと質問Dの回答</dd>
</dl>
実際の表示
質問A
質問Aの回答
質問B
質問Bの回答1
質問Bの回答2
質問C
質問D
質問Cと質問Dの回答

定義リスト

HTMLソースコード
<dl>
	<dt><dfn>用語A</dfn></dt>
		<dd>用語Aの定義</dd>
	<dt><dfn>用語B</dfn></dt>
		<dd>用語Bの定義1</dd>
		<dd>用語Bの定義2</dd>
	<dt><dfn>用語C</dfn></dt>
	<dt><dfn>用語D</dfn></dt>
		<dd>用語Cと用語Dの定義</dd>
</dl>
実際の表示
用語A
用語Aの定義
用語B
用語Bの定義1
用語Bの定義2
用語C
用語D
用語Cと用語Dの定義