HTML

HyperText Markup Language dl element.

dl要素

　dl要素は、「description list（記述リスト）」の略で、名前（説明する言葉）と値（定義文もしくは説明文）がセットになったリストを表します。ul要素や ol要素は単一の項目のリストだったのに対して、dl要素は各項目として名前と値をセットできる点が違います。

　dl要素の項目として使う名前と値は、それぞれ対応付けられたものでなければいけません。dl要素で表す名前と値は、それぞれ、dt要素「description Term（説明する言葉）」と dd要素「definition / description（定義文もしくは説明文）」を使って表します。これらはセットで使う要素なので、セットで覚えてしまいましょう。

　名前と値は１対１である必要はありません。１対多数でも構いません。また、多対１でも、多対多でも構いません。

dl要素の概要

カテゴリー

フロー・コンテンツ

コンテンツ･モデル

０個以上の dtおよび dd要素のグループ。ただし、そのグループには、１個以上の dt要素に １個以上の dd要素が続かなければいけません。

利用可能な場所

フロー・コンテンツが期待される場所

タグの省略

不可。開始と終了タグの両方が必要。

要素固有の属性

なし

標準的なスタイル

dl {
	display: block;
	margin-top: 1em;
	margin-bottom: 1em;
}

Sample

<dl>
	<dt>タイトル</dt>
	<dd>錯覚の科学</dd>

	<dt>出版社</dt>
	<dd>文藝春秋</dd>

	<dt>著者</dt>
	<dd>クリストファー・チャブリス</dd>
	<dd>ダニエル・シモンズ</dd>

	<dt>訳者</dt>
	<dd>木村博江</dd>
</dl>

　ブラウザ上の見た目は「項目名に、字下げされた内容が表示されたもの」ですが、コンピューター上では <dl>タグでかこまれた部分がまとまりを持った１つのコンテンツとして意味を持つものになります。

　見た目が変わらないからといって p要素や br要素を使ってリストをつくるよりも、タグを正しく使い分けたほうが、ページがすっきりして管理がしやすくなる上に、Web上でもきちんと整理された質の高いページだと認識されます。

　もし、上記のサンプルで出版社が不明の場合、それに対応する dd要素を削除してしまうのは不適切な記述となります。

<dl>
	<dt>タイトル</dt>
	<dd>錯覚の科学</dd>

	<dt>出版社</dt>

	<dt>著者</dt>
	<dd>クリストファー・チャブリス</dd>
	<dd>ダニエル・シモンズ</dd>

	<dt>訳者</dt>
	<dd>木村博江</dd>
</dl>

　これは、HTML5の文法上は間違っていませんが、セマンティクスが期待通りではありません。このマークアップでは、著者欄にマークアップされた２人が、著者でもあり出版社でもある事を意味してしまいます。このような場合には、dd要素を省略せず、不明である事を、dd要素の中に記載するべきでしょう。

用語定義としての利用

　dl要素は用語定義として使われる事があります。この場合、dt要素に入れる用語は dfn要素でマークアップします。こうする事で、dl要素が表すリストは、用語定義と言う事がセマンティクス上でも明確になります。

<dl>
	<dt><dfn>アメリカ</dfn></dt>
	<dt><dfn>米国</dfn></dt>
	<dd>正式名称は United States of America で、 US と表記される場合もあります。</dd>

	<dt><dfn>イギリス</dfn></dt>
	<dt><dfn>英国</dfn></dt>
	<dd>正式名称は、 United Kingdom of Great Britain and Northern Ireland で、 UK と表記される場合もあります。</dd>
</dl>