dt要素

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

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

構文

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

要点

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

サンプルコード

説明リスト

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

定義リスト

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

<dl>
	<dt><dfn>用語Ａ</dfn></dt>
		<dd>用語Ａの定義文。</dd>
	<dt><dfn>用語Ｂ</dfn></dt>
		<dd>用語Ｂの定義文１。</dd>
		<dd>用語Ｂの定義文２。</dd>
	<dt><dfn>用語Ｃ</dfn></dt>
	<dt><dfn>用語Ｄ</dfn></dt>
		<dd>用語Ｃと用語Ｄの定義文。</dd>
</dl>

サンプル

説明リスト

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

質問と回答

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

定義リスト

HTMLソースコード
<dl>
	<dt><dfn>用語Ａ</dfn></dt>
		<dd>用語Ａの定義</dd>
	<dt><dfn>用語Ｂ</dfn></dt>
		<dd>用語Ｂの定義１</dd>
		<dd>用語Ｂの定義２</dd>
	<dt><dfn>用語Ｃ</dfn></dt>
	<dt><dfn>用語Ｄ</dfn></dt>
		<dd>用語Ｃと用語Ｄの定義</dd>
</dl>
実際の表示
用語Ａ
用語Ａの定義
用語Ｂ
用語Ｂの定義１
用語Ｂの定義２
用語Ｃ
用語Ｄ
用語Ｃと用語Ｄの定義