“dl”要素:説明リスト

要素について

“dl”要素は用語とその用語の説明をリスト化した説明リストを表す要素です。説明される用語は“dt”要素、用語の説明は“dd”要素で表します。

用語とその定義、メタデータのキーと値、質問と回答などの組み合わせをリスト化するために使用することができます。

サンプルコード

説明リスト

<dl>

<dt>地球</dt>
<dd>太陽から3番目の惑星</dd>
<dd>“月”と呼ばれる衛星がある</dd>
<dd>塩水で満たされた海という領域が地表の70.8%を占める</dd>
<dt>土星</dt>
<dd>太陽から6番目の惑星</dd>
<dd>太陽系で2番目に大きい</dd>
<dd>特徴的な環がある</dd>
<dt>冥王星</dt>
<dd>惑星から外された</dd>

</dl>

地球

太陽から3番目の惑星

“月”と呼ばれる衛星がある

塩水で満たされた海という領域が地表の70.8%を占める

土星

太陽から6番目の惑星

太陽系で2番目に大きい

特徴的な環がある

冥王星

惑星から外された

一般的なブラウザでは説明が用語よりも大きな字下げを伴って表示されます。

複数の用語に同じ説明を加えることもできます。

<dl>

<dt>冥王星</dt>
<dt>エリス</dt>
<dt>マケマケ</dt>
<dt>ハウメア</dt>
<dd>惑星に次ぐ存在とされる準惑星。</dd>

</dl>

冥王星

エリス

マケマケ

ハウメア

惑星に次ぐ存在とされる準惑星。

“div”要素を子要素に配置するとマイクロデータと関連づけやすくなります。

<dl>

<div itemscope itemtype="http://schema.org/Person">

<dt itemprop="name">紫式部</dt>
<dd itemprop="description">平安時代の<span itemprop="jobTitle">女流歌人</span></dd>
<dd itemprop="description">代表作は“<span itemprop="subjectOf">源氏物語</span>”</dd>

</div>
<div itemscope itemtype="http://schema.org/Person">

<dt itemprop="name">清少納言</dt>
<dd itemprop="description">平安時代の<span itemprop="jobTitle">女流歌人</span></dd>
<dd itemprop="description">代表作は“<span itemprop="subjectOf">枕草子</span>”</dd>

</div>

</dl>

紫式部

平安時代の女流歌人

代表作は“源氏物語”

清少納言

平安時代の女流歌人

代表作は“枕草子”

定義リスト

<dl>

<dt><dfn>りんご</dfn></dt>
<dd>バラ科リンゴ属の落葉高木樹</dd>
<dt><dfn>もも</dfn></dt>
<dd>バラ科モモ属の落葉小高木樹</dd>
<dt><dfn>マンゴスチン</dfn></dt>
<dd>フクギ科フクギ属の常緑高木樹</dd>

</dl>

りんご

バラ科リンゴ属の落葉高木樹

もも

バラ科モモ属の落葉小高木樹

マンゴスチン

フクギ科フクギ属の常緑高木樹

属性と値

要素の内容

“dl”要素の内容は以下のいずれかを0個以上です。

• 1個以上の“dt”要素に続く1個以上の“dd”要素の組み合わせ
• 1個以上の“div”要素

任意でスクリプト支援要素を混在させることができます。

“div”要素はマイクロデータとの関連付けやグローバル属性の指定、スタイルの適用などを目的として“dt”要素と“dd”要素の組を囲むために使用できます。

仕様書

“dl”要素はHTML2.0から定義されている要素です。現行の仕様であるHTML Living Standardでも定義されています。

定義されている仕様書

<dl>