More than 3 years have passed since last update.

HTMLの説明リストのタグ(dl dt dd)の使い方

Posted at 2020-08-20

プログラミングの勉強日記

2020年8月20日　Progate Lv.226

少し前までは、定義リストとしての役割を持っていた。
　dl（definition list）：定義リスト
　dt（definition term）：定義する言葉
　dd（definition description）：定義の説明

<dl>
  <dt>バスケットボール</dt>
  <dd>アメリカ発祥のスポーツ</dd>
</dl>

実行結果

HTML5では、説明リストとしての意味に変わり用途が広がった。
　dl（definition list）：説明リスト
　dt（definition term）：説明する言葉
　dd（definition / description）：定義文 / 説明文

<dl>
  <dt>バスケットボール</dt>
  <dd>アメリカ発祥のスポーツ</dd>
</dl>

実行結果

　使い方は、まず全体にdlを囲い、dtに説明したいものを書いて、ddにそれに対する説明を書く。dlの中にはdtとddはいくつ書いても大丈夫。

使い方(htmlファイル)

<dl>
  <dt>説明したいこと</dt>
  <dd>それに関する説明</dd>
  <dd>それに関する説明2</dd>

  <dt>説明したいこと2</dt>
  <dd>それ(2)に関する説明</dd>
</dl>

　HTML5では定義リストと説明リストの2つの役割がある。検索エンジンからはそれぞれ同じタグなので、その内容が定義リストとしてなのか説明リストとしてなのかがわからない。
　定義リストとして、事典的な意味を強調するためにはdfnタグを使う。

<dl>
  <dt><dfn>バスケットボール<dfn></dt>
  <dd>アメリカ発祥のスポーツ</dd>
</dl>

　単純なリストだけではul(ol)を使ったリストでいいが、リストに説明が必要な場合にdlを使う。

ulを使う例

<ul>
  <li>バスケットボール</li>
  <li>サッカー</li>
  <li>相撲</li>
</ul>

dlを使う例

<dl>
  <dt>バスケットボール</dt>
  <dd>アメリカ発祥のスポーツ</dd>
  <dt>サッカー</dt>
  <dd>イングランド発祥のスポーツ</dd>
  <dt>相撲</dt>
  <dd>日本発祥のスポーツ</dd>
</dl>