【説明リストタグ】dl・dt・ddタグの正しい使い方を解説

公開日：2021-05-15 / 更新日：2025-11-04

HTML

今回はHTMLタグの中で説明リストを作る際に使用されるdl・dt・ddタグの正しい使い方を解説していきます。

dl・dt・ddタグは情報の整理や意味づけに役立つため、ぜひ覚えておくと良いでしょう。

dl・dt・ddタグとは？

dl・dt・ddタグは、説明リストを作る際に使われるHTMLタグです。

HTML4では「定義リストタグ」と呼ばれ、主に辞書のように用語の意味を説明するために使用されていました。

しかし、HTML5からは「説明リストタグ」として位置づけが見直され、より柔軟な使い方ができるようになっています。

基本的には、dtタグで示した内容をddタグで説明する構造になっていれば、問題なく使用できます。

dl・dt・ddタグはそれぞれ単独では使用せず、以下のようにdlタグの子要素としてdtタグ、ddタグが配置されるような形で使用します。

<dl>
  <dt>8月15日は何の日ですか?</dt>
  <dd>終戦記念日です。</dd>
</dl>

dl・dt・ddタグの使い方・ルール

dl・dt・ddタグを使う際はいくつか使い方・ルールがあります。

dl・dt・ddタグの使い方・ルール

dlタグの中には、1つ以上のdt・ddタグを含める必要がある
dlタグの直下にdivタグを入れてグループ化できる
dtとddの数は1対1である必要はない
dt・ddタグの中には、テキストだけでなく画像も含められる

1. dlタグの中には、1つ以上のdt・ddタグを含める必要がある

1つ目はdlタグの中には、1つ以上のdt・ddタグを含める必要があるということです。

そのため、以下のように1つのdlタグ内に複数のdt・ddタグがペアで存在していても問題ありません。

<dl>
  <dt>HTML・CSS基礎コース</dt>
  <dd>HTMLとCSSの基本構文を学び、1ページのWebサイトを自分でコーディングできるようになることを目指すコースです。</dd>
  <dt>JavaScript実践コース</dt>
  <dd>Webサイトに動きをつけるJavaScriptを基礎から学び、簡単なアニメーションなどを実装できることを目指すコースです。</dd>
  <dt>WordPress構築コース</dt>
  <dd>テーマ制作やカスタマイズの基本を学び、オリジナルデザインのWordPressサイトを構築できるスキルを身につけることを目指すコースです。</dd>
</dl>

2. dlタグの直下にdivタグを入れてグループ化できる

2つ目は、dlタグの直下にdivタグを入れてグループ化できるということです。

ul・olタグの直下にはliタグ以外を使用できませんが、dlタグでは、直下にdivタグを使用することが許容されています。

Zero or more groups each consisting of one or more dt elements followed by one or more dd elements, optionally intermixed with script-supporting elements.Or: One or more div elements, optionally intermixed with script-supporting elements.
引用：HTML Standard

そのため、以下のようにCSSで見た目を整えたい場合に便利です。

<dl class="course-items">
  <div class="course-item">
    <dt>HTML・CSS基礎コース</dt>
    <dd>HTMLとCSSの基本構文を学び、1ページのWebサイトを自分でコーディングできるようになることを目指すコースです。</dd>
  </div>
  <div class="course-item">
    <dt>JavaScript実践コース</dt>
    <dd>Webサイトに動きをつけるJavaScriptを基礎から学び、簡単なアニメーションなどを実装できることを目指すコースです。</dd>
  </div>
  <div class="course-item">
    <dt>WordPress構築コース</dt>
    <dd>テーマ制作やカスタマイズの基本を学び、オリジナルデザインのWordPressサイトを構築できるスキルを身につけることを目指すコースです。</dd>
  </div>
</dl>

.course-item {
  border-bottom: 3px dotted #aaa;
  margin-bottom: 30px;
  padding-bottom: 30px;
}

3. dtとddの数は1対1である必要はない

3つ目は、dtとddの数は1対1である必要はないということです。

そのため、以下のようにdtタグが複数でddタグが1つだけのパターンや、dtタグが1つでddタグが複数あるパターンでも使えます。

<!-- 1つ以上のdtタグに対して1つのddタグが存在するパターン -->
<dl>
  <dt>Google Chrome</dt>
  <dt>Safari</dt>
  <dt>Firefox</dt>
  <dd>これらはすべてWebブラウザの名前です。</dd>
</dl>

<!-- 1つのdtタグに対して1つ以上のddタグが存在するパターン -->
<dl>
  <dt>りんご</dt>
  <dd>赤くて丸い果物</dd>
  <dd>日本のスーパーでは大体100円~200円程度で買うことができます。</dd>
</dl>

4. dt・ddタグの中には、テキストだけでなく画像も含められる

4つ目は、dt・ddタグの中には、テキストだけでなく画像も含められるということです。

<!-- dtタグの中に画像が使用されている例 -->
<dl>
  <dt><img src="kiyomizu-temple.jpg" alt="清水寺の写真"></dt>
  <dd>清水寺（きよみずでら）は、京都市東山区清水にある北法相宗の大本山です。</dd>
</dl>

参考：ある用語を定義したい場合はdfnタグを使用する

用語が定義されていることを明示したい場合には、dfnタグを使用して定義リスト的な使い方をすることもできます。

<dl>
  <dt><dfn>HTML</dfn></dt>
  <dd>Hyper Text Markup Languageの略です。</dd>
</dl>

実際のdl・dt・ddタグの使用例

1. お知らせ一覧

<h2 class="title">お知らせ</h2>
<dl>
  <div class="news-list">
    <dt><time>2021年XX月XX日</time></dt>
    <dd>メディア掲載情報を追加しました。</dd>
  </div>
  <div class="news-list">
    <dt><time>2021年XX月XX日</time></dt>
    <dd>ホームページを開設しました。</dd>
  </div>
</dl>

2. Q&A

<h2 class="title">Q&A</h2>
<dl>
  <div class="question-list">
    <dt>dlタグはいつ使いますか?</dt>
    <dd>定義リスト・説明リストなどを作りたいときに使います。</dd>
  </div>
  <div class="question-list">
    <dt>この記事を読むと何が分かるようになりますか?</dt>
    <dd>dl・dt・ddタグの正しい使い方が分かるようになります。</dd>
  </div>
</dl>

3. 商品・サービス説明

<dl class="course-items">
  <div class="course-item">
    <dt>HTML・CSS基礎コース</dt>
    <dd>HTMLとCSSの基本構文を学び、1ページのWebサイトを自分でコーディングできるようになることを目指すコースです。</dd>
  </div>
  <div class="course-item">
    <dt>JavaScript実践コース</dt>
    <dd>Webサイトに動きをつけるJavaScriptを基礎から学び、簡単なアニメーションなどを実装できることを目指すコースです。</dd>
  </div>
  <div class="course-item">
    <dt>WordPress構築コース</dt>
    <dd>テーマ制作やカスタマイズの基本を学び、オリジナルデザインのWordPressサイトを構築できるスキルを身につけることを目指すコースです。</dd>
  </div>
</dl>