このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

dl要素:説明リスト

記事Apr. 18th,2015
July 7th,2020
説明リストを表す要素
この記事はHTML Living Standardに対応しています。
この記事はHTML Living Standardに対応しています。

要素について

カテゴリー フロー・コンテンツ
dt”要素dd”要素の組みを1個以上含む場合はパルパブル・コンテンツ
利用場所 フロー・コンテンツが置ける場所
内容 本文参照
タグの省略 不可

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

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

サンプルコード

説明リスト

<dl>
<dt>地球</dt>
<dd>太陽から3番目の惑星</dd>
<dd>“月”と呼ばれる衛星がある</dd>
<dt>土星</dt>
<dd>太陽から6番目の惑星</dd>
<dd>太陽系で2番目に大きい</dd>
<dd>特徴的な環がある</dd>
<dt>冥王星</dt>
<dd>惑星から外された</dd>
</dl>
地球
太陽から3番目の惑星
“月”と呼ばれる衛星がある
特徴的な環がある
土星
太陽から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個以上です。

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

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

仕様書

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

HTML 4 HTML 5 HTML 5.1 HTML 5.2 HTML Living Standard
<dl>
定義あり

定義あり

定義あり

定義あり

定義あり
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク