HTML dl・dt・dd 説明リストタグ意味と使い方を解説

本記事は広告が含まれる場合があります HTML

【dl・dt・dd】HTML説明リストタグの意味と使い方

HTMLのdl・dt・ddタグは説明リストタグといい、「用語の説明」や「Q&A」「お知らせ(日付とタイトル)」などでよく用いられます。

今回はdl・dt・ddの使い方について解説します。
 

この記事を読むと分かること

  • dl・dt・ddタグの概要について
  • dl・dt・ddタグの使い方について
  • ul・olタグとの使い分けについて

 

 

dl・dt・ddタグの概要

dl・dt・ddタグは説明リストタグといい、「用語の説明」や「Q&A」「お知らせ(日付とタイトル)」などでよく用いられる、HTMLタグです。
 
説明リストタグについて解説している図。
 

■dl・dt・ddタグ(説明リストタグ)が使用される例

  • 用語の説明
  • Q&A
  • お知らせ

など

 

定義リストと説明リスト

HTML4ではdlタグは「definition list = 定義リスト」と定義されており「意味と用語」のセットのような辞典のような使い方を想定していましたが、HTML5になってからは「description list = 説明リストタグ」と定義を改められ、より色々なシーンでで使われるようになりました。

以下ではdl・dt・ddタグの使い方を説明していきます。

 

dl・dt・ddタグの使い方

dl・dt・ddタグを使って説明リストタグを作るには、以下のように先にdtタグで説明対象となる用語を囲い、その後でddタグで用語の説明文を囲った後、全体をdlタグで囲ってあげればOKです。

dl・dt・ddタグのマークアップデモ。
 

dl・dt・ddタグは、下記のような文法が利用することもできます。

■dl・dt・ddタグの使い方に関するポイント

  • dlタグ内に複数のdt・ddタグのペアがあっても良い
  • 1つのdtタグに対してddタグが複数あっても良い
  • 1つのddタグに対してdtタグが複数あっても良い
  • dlタグの中でdivタグを使用できる
  • dt・ddタグの中に画像も使用できる

 

許可されている内容
1 個以上の <dt> 要素とそれに続く 1 個以上の <dd> 要素、任意で <script> 要素や <template> 要素が混在するもの。
または (WHATWG HTML や W3C HTML 5.2 以降では) 1 個以上の <div> 要素、任意で <script> 要素や <template> 要素が混在するもの。
説明リスト要素(MDN Web Docs)より引用

 

dlタグ内に複数のdt・ddタグのペアがあっても良い

まず1つ目のポイントは、dlタグ内に複数のdt・ddタグのペアがあっても良いという点です。

dlタグ内に複数のdt・ddタグのペアがあるデモ。
 

1つのdtタグに対してddタグが複数あっても良い

2つ目のポイントは、1つのdtタグに対してddタグが複数あっても良いという点です。

1つのdtタグに対してddタグが複数あるデモ。

1つ目のポイントでdlタグ内に1個以上のdt要素とdd要素が使用できるということについては前述しましたが、これは「dt・ddタグの数 = 1:1」になっていなければならないという訳ではありません。

 

1つのddタグに対してdtタグが複数あっても良い

3つ目のポイントは、1つのddタグに対してdtタグが複数あっても良いという点です。

1つのddタグに対してdtタグが複数あるデモ。

 

dlタグの中でdivタグを使用できる

4つ目のポイントは、dlタグの中でdivタグを使用できるという点です。

dlタグの中でdivタグを使用し、dt・ddタグのペア毎に異なる装飾を指定しているデモ。

これはHTML5.2へとマイナーアップデートされてからdlタグ直下でのdivタグの使用が許容されるようになった為です。

許可されている内容:または (WHATWG HTML や W3C HTML 5.2 以降では) 1 個以上の <div> 要素、任意で <script> 要素や <template> 要素が混在するもの。

引用:<dl>: 説明リスト要素(MDN Web Docs)

その為、例のようにdt・ddタグのペア毎に異なる装飾をしたいといった場合に便利です。

 

dt・ddタグの中に画像も使用できる

5つ目のポイントは、dt・ddタグの中に画像を使用できるという点です。

dt・ddタグの中に画像を使用しているデモ。

dtタグと・ddタグの中では「フローコンテンツ」の使用が許可されているので、imgタグを使用して画像を使用することも可能です。

許可されている内容:フローコンテンツ。ただし <header>、<footer>、区分コンテンツ、見出しコンテンツを除く。

引用:<dt>: 説明用語要素(MDN Web Docs)

許可されている内容:フローコンテンツ

引用:<dd>: 詳細説明要素(MDN Web Docs)

 

 

ul・olタグとの使い分け

ここまででdl・dt・ddタグを使って説明リストを作る方法を紹介しましたが、リストを作るだけならul・olタグでも作ることができます。

そこで、ul・olタグとdlタグの使い分けについて解説しておくと、それぞれは以下のように使い分けられるのが一般的です。

タグ名 使いどころ
dlタグ 「用語」と「説明文」のように対(セット)でにしたいリストにはdlタグを使用する
ulタグ 順序のない箇条書きリストを作りたい場合にはulタグを使用する
olタグ 順序のある箇条書きリストを作りたい場合にはolタグを使用する

なおul・olタグについて詳しく知りたい方は別記事にて詳しく解説しておりますので、こちらも参考にされると良いかと思います。

 

 

まとめ

まとめです。今回は説明リストタグを作ることができるdl・dt・ddタグの使い方について解説しました。

dl・dt・ddタグは説明リストタグといい、「用語の説明」や「Q&A」「お知らせ(日付とタイトル)」などでよく用いられる、HTMLタグです。
 
説明リストタグについて解説している図。
 

dl・dt・ddは、よく使いますのでぜひ覚えておきましょう。

なお、これからサーバーやドメインを契約してホームページを作りたいという方は「【総まとめ】個人ホームページの作り方・Webサイト自作方法」をご参考ください。

今回は以上になります。最後までご覧頂き、ありがとうございました。
 

 

「業者に任せたけど、更新ができない」「本で独学は時間がかかりすぎる・・」そんなお悩みの方も多いのではないでしょうか。

個別指導形式のスクールでは、自分の知りたいことをピンポイントで学習・達成でき、自分で更新もできるというメリットもあります。

教室の無料事前相談もしておりますので、まずはお気軽にご登録ください。

詳細はこちら

YouTubeチャンネル開設しました!

WEBST8 YouTube Channel 開設
最大月間50万PVの当ブログをベースに、Youtube動画配信にてWordPress、ホームページ作成、ブログのことについてお役立ち情報を随時配信していきます。

ご興味ある方はぜひチャンネル登録をしていただけますと幸いです。

検索して記事を見つける

探したいキーワードを入力・検索して記事を見つけたい方はこちら

-HTML