dl/dt/ddタグ 説明リストを表す

catnose catnose · に最終更新

<dl>・<dt>・<dd>の3つのHTMLタグは、説明リストや定義リストを作るために使います。具体的には「用語の説明」や「Q & A」などに使います。

<dl>
 <dt>りんご</dt>
 <dd>甘い果物。</dd>

 <dt>みかん</dt>
 <dd>酸っぱくて甘い果物。</dd>
</dl>

👆この例は「果物」と「その説明」のリストです。

目次
このページの目次

使い方

それぞれのタグの意味

3つのタグは合わせて使いますが、名前が似ているので頭が混乱してしまいがちです。まずはそれぞれの意味と役割を頭に入れておきましょう。

dlタグ
「definition list」の略。リスト全体を<dl>で囲みます。
dtタグ
「definition term」の略。「term」は英語で「用語」の意味。その名の通り<dt>は用語や名前に使います。
ddタグ
「definition description」の略。「description」は英語で「説明」の意味。その名の通り<dd>は用語の説明に使います。

説明リストの作り方

具体的には以下のように説明リストを作成します。

1. dlで全体を囲う

<dl>
  ここに名前・説明を書く
</dl>

👆まず、リスト全体を囲う<dl>タグを設置します。

2. 名前（dt）→ 説明（dd）の順に書く

<dl>
  <dt>りんご</dt><!--👈名前-->
  <dd>甘い果物。</dd><!--👈説明-->
</dl>

👆続いて、<dt>でモノの名前を書きます。つづいてモノについて説明を<dd>で書きます。

3. 複数のモノを説明する

<dl>
  <dt>りんご</dt><!--👈名前-->
  <dd>甘い果物。</dd><!--👈説明-->

  <dt>みかん</dt><!--👈名前-->
  <dd>酸っぱくて甘い果物。</dd><!--👈説明-->

  <dt>ぶどう</dt><!--👈名前-->
  <dd>紫のツブツブの果物。</dd><!--👈説明-->
</dl>

👆<dt>（名前）と<dd>（説明）は好きな数だけ入れることができます。複数のモノについて説明できるわけですね。

✍️dd（説明）は、その前のdt（名前）にひも付きます。分かりやすくするために改行を入れていますが、改行を入れても入れなくてもHTMLの意味は変わりません。

複数の説明（dd）を並べてもOK

<dd>タグ（説明）は並べることができます。たとえば「著者」と「編集者」の一覧を作るサンプルを紹介します。

<p>本の執筆に関わった人の一覧です。</p>
<dl>
  <dt>著者</dt>
  <dd>ジョン</dd>
  <dd>ニック</dd>
  <dd>ジェシカ</dd>

  <dt>編集者</dt>
  <dd>ハリー</dd>
</dl>

👆著者は「ジョン、ニック、ジェシカ」、編集者は「ハリー」ということが分かります。<dd>（説明）は複数並んでいても、その前の近い<dt>にひも付きます。「ジョン、ニック、ジェシカ」は3つとも「著者」にひも付くわけですね。

😺見やすくするために、HTMLで<dd>を字下げしています（ブラウザ上の見た目は変わりません）。

複数の名前（dt）を並べてもOK

上の例では、<dd>（説明）を複数並べましたが、<dt>（名前・用語）の方を複数並べることもできます。複数の用語に対して、同じ説明をしたい場合にこのような書き方をします。

<dl>
  <dt>Google</dt>
  <dt>Apple</dt>
  <dt>Facebook</dt>
  <dt>Amazon</dt>
  <dd>GAFAと呼ばれる4社は、世界の時価総額ランキングで上位を占めています。</dd>
</dl>

👆複数の名前に対して、同じ説明が成り立つときにのみ、このような書き方をします。

dlの中でdivタグを使ってもOK

<dl>タグの中には、<dt>と<dd>の他に、<div>タグを入れることもできます。なぜ<div>を使うかというと、CSSで見た目を整えるためです。

<p>本の執筆に関わった人の一覧です。</p>
<dl>
  <div class="persons">
    <dt>著者</dt>
    <dd>ジョン</dd>
    <dd>ニック</dd>
  </div>

  <div class="persons">
    <dt>編集者</dt>
    <dd>ハリー</dd>
  </div>
</dl>

👆<div>タグにCSSを指定して、見た目を整えています。<div>自体は何の意味を持たないタグなので、CSSの都合で必要にならない限り、使う必要はありません。説明リストの見た目を整える方法は、後ほど詳しく取り上げます。

なお、説明リスト（<dl>）内では、以下のような他の意味を持つタグを使ってはいけません。

dlに入れてはいけないもの

  • 段落タグ（<p>）
  • 見出しタグ（<h1>~<h6>）
  • リストタグ（<ul>、<ol>）
    など

Q & Aで使うこともできる

<dl>・<dt>・<dd>は、用語集だけでなく、さまざまな用途で使うことができます。例えば「よくある質問（Q & A）」です。

<h2>よくある質問</h2>
<dl>
  <dt>hrefってなんて読むの？</dt>
  <dd>エイチレフって読みます。</dd>

  <dt>alignってなんて読むの？</dt>
  <dd>アラインって読みます。アリグンじゃないよ。</dd>

  <dt>columnってなんて読むの？</dt>
  <dd>カラムって読みます。</dd>
</dl>

👆<dt>に質問を、<dd>に回答を書くわけですね。このように「タイトル - それについての説明」が一覧で並ぶときに使うと便利です。

✍️必ずしも「Q & Aなら、説明リストを使うべき」というわけではありません。質問に見出しタグ、回答に段落を使っても良いでしょう。

定義語リストを作るときはdfnを使う

これは少しあいまいなルールなので、参考程度にしていただければと思います。

  • <dt>で用語
  • <dd>で定義文

というように定義語リストを作る場合、用語をさらに<dfn>タグで囲むと、定義語であることをより強調できます。

関連するページを読む
dfnタグの使い方 - HTML
開く
dfnで定義語リスト
<dl>
  <dt><dfn>HTML</dfn></dt>
  <dd>Hyper Text Markup Languageの略。ハイパーテキストを記述するためのマークアップ言語。</dd>

  <dt><dfn>CSS</dfn></dt>
  <dd>Cascading Style Sheetsの略。HTMLをどのように装飾するか指示する。</dd>
</dl>

👆「用語」に対して<dfn>を使います。辞書のようなものを作るときに使うと良いですね。

ulとolとの使い分け方

HTMLの<ul>タグと<ol>タグもリストを作るために使われます。

関連するページを読む
ulタグの使い方 - HTML
開く
関連するページを読む
olタグの使い方 - HTML
開く
<ul>
  <li>りんご</li>
  <li>みかん</li>
  <li>ぶどう</li>
</ul>

<ol>
  <li>用を足す</li>
  <li>水を流す</li>
  <li>手を洗う</li>
</ol>

これらのタグと、説明リストタグとの違いは以下のようになります。

タグ 使いどころ
<dl> 各項目に「名前」と「説明文」が必要なリストに使う
<ul> 順序が入れ替わっても、意味が伝わるリストに使う
<ol> 順序が必要なリストに使う

👆「名前」と「説明文」の組み合わせが必要なときは、<dl>・<dt>・<dd>を使うと覚えおきましょう。

説明リストを使うメリット

<dl>・<dt>・<dd>を使うべき理由は、検索エンジンなどのプログラムが、ページの内容を把握するときのヒントになるからです。説明リストタグを見れば「名前：説明」という構造が明確になります。内容を読み解きやすいHTMLを使うことはSEO（検索エンジン最適化）の基本です。

また、後から自分やチームメンバーが後からソースコードを見たときに「用語集や説明のリストを表しているんだな」とひと目で分かります。

  • 見た目のためだけに<dl>・<dt>・<dd>を使うべきではありません。見た目はCSSを使って変えるべきです。

上級者向け：SEOのために構造化データを指定

✍️初心者の方は読み飛ばすことをおすすめします

検索エンジンに対して、より明確に「何についての説明か」を伝えたい場合は、構造化マークアップを行います。

📙
参考リンク
構造化データに関するガイドライン - Google
開く

リッチスニペットのイメージ

これにより、Googleの検索結果ページで、リッチな表示をしてくれることがあります。例えば、レストランの評価や、本の著者などが表示されます。

構造化マークアップにはいくつかの形式があるのですが、今回のサンプルで紹介するのは「マイクロデータ」と呼ばれるものです。

例：本の説明
<dl itemscope itemtype="http://schema.org/Book">
  <dt itemprop="name">リーダブルコード</dt>
  <dd itemprop="author">Dustin Boswell</dd>
  <dd itemprop="description">より良いコードを書くためのシンプルで実践的なテクニック</dd>
</dl>

👆たとえば、書籍の説明をのせる場合、このように構造化マークアップします。author（著者）やdescription（説明文）というように「何を表しているのか」を明確に伝えられるわけですね。

😺他にもいろいろな指定の仕方ができます。詳しくは、Googleの書籍の構造化マークアップをチェックしてみてください。

CSSで説明リストのデザインを整える

デフォルトのスタイル

<dl>
 <dt>りんご</dt>
 <dd>甘い果物。</dd>

 <dt>みかん</dt>
 <dd>酸っぱくて甘い果物。</dd>
</dl>

👆CSSで何も指定しなかった場合、説明リストはこのように表示されます。ブラウザではデフォルトで<dd>の左側にmarginが指定されており、字下げされたような見た目になります。

字下げを解除する

dt {
  margin-top: 15px; /* 上に隙間 */
  font-weight: bold; /* 太字に */
}
dd {
  margin: 0; /* 字下げ解除 */
}

👆デフォルトのスタイルはCSSで簡単に上書きできます。ddにmargin: 0を指定すれば、字下げを解除できます。

Q & Aらしくする

.faq dt {
  margin-top: 25px;
  font-weight: bold;
}
.faq dd {
  margin: 10px 0 0;
}
/* 疑似要素でQとAを表示 */
.faq dt:before,
.faq dd:before  {
  display: inline-block;
  margin-right: 5px;
  width: 25px;
  height: 25px;
  line-height: 25px;
  text-align: center;
  color: #FFF;
  font-weight: bold;
  border-radius: 50%;
  font-size: 15px;
}
.faq dt:before {
  content: 'Q';
  background-color: #1aa1ff;
}
.faq dd:before {
  content: 'A';
  background-color: #ffa51a;
}

👆この例では、<dt>と<dd>それぞれに疑似要素を使うことで「Q」と「A」というマークを挿入しています。

すべての説明リストが「Q & A」になってしまっては困るので、faqというクラス名を持つものにだけCSSが効くようにしています（HTMLで<dl class="faq">と指定した場合だけ「Q & A」風に表示されます）。

読者にとって分かりやすい見た目になるように、CSSで自由にアレンジしましょう。

HTMLの記事をもっと見る