HyperText Markup Language dl element.
dl要素は、「description list(記述リスト)」の略で、名前(説明する言葉)と値(定義文もしくは説明文)がセットになったリストを表します。ul要素や ol要素は単一の項目のリストだったのに対して、dl要素は各項目として名前と値をセットできる点が違います。
dl要素の項目として使う名前と値は、それぞれ対応付けられたものでなければいけません。dl要素で表す名前と値は、それぞれ、dt要素「description Term(説明する言葉)」と dd要素「definition / description(定義文もしくは説明文)」を使って表します。これらはセットで使う要素なので、セットで覚えてしまいましょう。
名前と値は1対1である必要はありません。1対多数でも構いません。また、多対1でも、多対多でも構いません。
dl {
display: block;
margin-top: 1em;
margin-bottom: 1em;
}
dl要素のマークアップ例
<dl>
<dt>タイトル</dt>
<dd>錯覚の科学</dd>
<dt>出版社</dt>
<dd>文藝春秋</dd>
<dt>著者</dt>
<dd>クリストファー・チャブリス</dd>
<dd>ダニエル・シモンズ</dd>
<dt>訳者</dt>
<dd>木村博江</dd>
</dl>
dl要素のマークアップ例のサンプル
ブラウザ上の見た目は「項目名に、字下げされた内容が表示されたもの」ですが、コンピューター上では <dl>タグでかこまれた部分がまとまりを持った1つのコンテンツとして意味を持つものになります。
見た目が変わらないからといって p要素や br要素を使ってリストをつくるよりも、タグを正しく使い分けたほうが、ページがすっきりして管理がしやすくなる上に、Web上でもきちんと整理された質の高いページだと認識されます。
もし、上記のサンプルで出版社が不明の場合、それに対応する dd要素を削除してしまうのは不適切な記述となります。
不適切なマークアップ例
<dl>
<dt>タイトル</dt>
<dd>錯覚の科学</dd>
<dt>出版社</dt>
<dt>著者</dt>
<dd>クリストファー・チャブリス</dd>
<dd>ダニエル・シモンズ</dd>
<dt>訳者</dt>
<dd>木村博江</dd>
</dl>
これは、HTML5の文法上は間違っていませんが、セマンティクスが期待通りではありません。このマークアップでは、著者欄にマークアップされた2人が、著者でもあり出版社でもある事を意味してしまいます。このような場合には、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>
用語定義のマークアップ例のサンプル