基礎

HTML

ディスクリプション・リスト

dl要素

最終更新日：2023-09-18
公開日：2016-01-21

定義リストを表します。dt要素で定義語を書き、dd要素で解説をしたり、属する項目リストを並べます。

HTML サンプルコード

<dl>
  <dt>HTML（Hypertext Markup Language</dt>
  <dd>Webページを記述するための言語。</dd>
</dl>

カテゴリー
フローコンテンツ、パルパブルコンテンツ（子要素に、dt要素とdd要素の組み合わせを1組以上持つ場合はパルパブルコンテンツ）
コンテンツモデル
1個以上のdt要素と1個以上のdd要素の組み合わせ。
使用ケース
フローコンテンツが期待される場所

属性

グローバル属性: グローバル属性のみ使用することができます。
グローバル属性について詳しくは、「HTMLのグローバル属性」をご覧ください。

使用例

dt要素とdd要素の組み合わせ

全国紙を使ったdl要素のマークアップ例を紹介します。次のように1つのdt要素に対して、複数のdd要素を並べることができます。

HTML コード例

<dl>
  <dt>朝刊</dt>
  <dd>毎日新聞</dd>
  <dd>朝日新聞</dd>
  <dd>読売新聞</dd>
  <dd>日本経済新聞</dd>
  <dt>夕刊</dt>
  <dd>夕刊フジ</dd>
  <dd>東京スポーツ</dd>
  <dd>日刊ゲンダイ</dd>
</dl>

ブラウザでの表示例

dl要素の中にdiv要素を入れる

CSSやJavaScriptを使う都合でdl要素とdt要素、dd要素の間に別の要素で囲みたいときは、次のようにdiv要素を使って囲むことができます。

HTML コード例

<dl>
  <div>
    <dt>朝刊</dt>
    <dd>毎日新聞</dd>
    <dd>朝日新聞</dd>
    <dd>読売新聞</dd>
    <dd>日本経済新聞</dd>
  </div>
  <div>
    <dt>夕刊</dt>
    <dd>夕刊フジ</dd>
    <dd>東京スポーツ</dd>
    <dd>日刊ゲンダイ</dd>
  </div>
</dl>

ca-pub-6292870682629488