dl要素

HTMLでは、用語と説明をリストにすることができます。

本ページでは、dl要素について説明します。

dl要素とは

dl要素は、説明リストと呼ばれます。用語を示すdt、用語の説明を示すdd要素といっしょに使われます。

dlの定義は、以下のとおりです。

【dlの定義】
コンテンツカテゴリ フローコンテンツ認知可能コンテンツ(dtとddが含まれている場合)
可能な親要素 フローコンテンツを包含できる要素
可能なコンテンツ dtとそれに続くdd、またはdiv。
スクリプトサポート要素を含んでもよい。
タグの省略 不可
DOMインターフェース HTMLDListElement

dlは、データの表示でも使えます。例えば、dtでキーを記述して、ddをその値にしてリスト化します。

利用例

以下は、dlを使ったHTMLの例です。

【dlの利用例】
<dl>
<dt>テント</dt>
<dd>テントは、キャンプでの寝場所です。</dd>
<dt>ランタン</dt>
<dd>ランタンは、明かりです。</dd>
</dl>

これをブラウザで表示すると、以下になります。

ブラウザの画面で、「テント」の下に「テントは、キャンプでの寝場所です。」が表示されています。その下に「ランタン」が表示されていて、さらにその下に「ランタンは、明かりです。」が表示されています。

以下のように、1つのdtに対して説明のddを複数持つこともできます。また、説明というよりは更新日のデータを表示しています。

【複数のdd】
<dl>
<dt>更新日</dt>
<dd>2020/11/1</dd>
<dd>2020/11/10</dd>
</dl>

逆に、複数のdtに対して1つのddにすることもできます。

divを子要素にする例は、以下です。

【divを子要素とするdl】
<dl>
<div>
<dt>作成日</dt>
<dd>2020/11/1</dd>
</div>
<div>
<dt>最終更新日</dt>
<dd>2020/12/1</dd>
</div>
</dl>

これは、divでグループ化してスタイルを設定したりする時に使います。

属性

グローバル属性が使えます。

ブラウザのサポート状況

各ブラウザの最新バージョンでのサポート状況は、以下のとおりです。

【パソコン】
項目 IE Ed Fx Ch Sa Op
dl
【スマートフォン】
項目 Sa An Op Ch Fx Sm
dl
サポート
制限あり
×
未サポート
不明
IE
Internet Explorer
Ed
Edge
Fx
Firefox
Ch
Chrome
Sa
Safari
Op
Opera
An
Android Browser
Sm
Samsung Internet

※スマートフォンのFirefoxとChromeは、Android版です。

サイト内で関連ページをチェック

ホームページ作成「HTMLに説明リストを挿入する

HTML要素(タグ)一覧」に戻る