dl要素
Updated / Published
dl
要素(definition list)は定義型リスト(説明付きリスト)を作ります。定義型リストは項目とその内容から成り立ち、dt
要素に用語をdd
要素にはその用語の定義(説明)を記述する場合等に用いられます。
dl
要素内には dt
要素、または dd
要素のどちらか1つを単独で含めて使用することができますが、項目部分のdt
要素を先行させ、そのあとに続いてそれを定義するdd
要素を組み合わせた形で使われるべきです。項目とその定義の関係は1対1である必要はありません。複数の定義をもつ場合には、ひとつのdt
要素に対して複数のdd
要素を指定すると良いでしょう。逆に複数のdt
要素に対してひとつのdd
要素でも、また、複数のdt
要素に複数のdd
要素で構成することもできます。
- バージョン
- HTML4.01(S,T,F)
- XHTML1.0(S,T,F)
- XHTML1.1
- 要素分類
- ブロックレベル要素
- 開始タグ
- 必須
- 終了タグ
- 必須
- 非推奨
- -
- 内容モデル
- 1個以上の
dt
要素,dd
要素
compact属性
- バージョン
- HTML4.01(T,F)
- XHTML1.0(T,F)
- 指定要素
- 必須
- -
- 非推奨
- 非推奨
- HTML4.01 strict 廃止
- XHTML1.0 strict 廃止
- XHTML1.1 廃止
- 属性値
- compact
- compact="compact"(XHTML)
compact
属性が設定された場合、視覚環境のUA はリストの表示をなるべく狭い範囲でコンパクトに表示しようとします。 コンパクト表示とは dt
要素に語句を dd
要素にその定義(説明)を記述した際に、特に説明文にあたる dd
要素の内容が短い場合には dd
要素の内容に前後の改行を置くのではなく、dt
要素の内容と同じ行に表示しようとする働きです。ただし、非推奨属性で、どの UA も対応していません。HTML4.01では compact
、XHTMLでは compact="compact"
と記述します。HTML5では廃止されました。
その他の属性
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
要素を内包することもできるようになっています。