HTMLの説明リストタグ【dl・dt・dd】を活用しよう

CSS
スポンサーリンク

こんにちは!最近やっと模写コーディングを2つ達成したところです。マダラ蝶です!
今日はHTMLの基本要素である説明リストについて話していきたいと思います(*´∀`)

今日の備忘録はこんな方におすすめ!

  • HTMLの説明リストってなに?
  • <ul>と<ol>は知ってるけど<dl>はどんなときに使うの?
  • 用語集をマークアップしたい
スポンサーリンク

説明リストってなに?

HTML の <dl> 要素は、説明リストを表します。この要素は、一連の用語(<dt> 要素を使用して指定)と説明(<dd> 要素によって提供)をリスト化したものです。一般的な使用例として、用語集の作成やメタデータ(キーと値のペアのリスト)の表示が挙げられます。

MDNより

HTML の <dt> 要素は、説明又は定義リストの中で用語を表す部分であり、 <dl> の子要素としてのみ用いることができます。普通は <dd> 要素が続きます。しかし、複数の <dt> 要素が続くと、複数の用語がすぐ後に続く <dd> 要素で定義されていることを表します。後に続く <dd> (詳細説明) 要素は、 <dt> を用いて指定した用語について、定義やその他の関連する文字列を表します。

MDNより

MDNのリファレンスにはこのように書かれています。
どうやら用語集の作成に使われることが多いタグのようです。
詳しく見ていきましょう。

<dl>タグとは

<dl>タグとは、英語でdescription listという意味を持つタグです。
情報がセットになったリストと言う意味で、<dt>タグと<dd>タグをセットにまとめて一つのリストをつくります。

なお、dlタグは以前はdefinition list(定義リスト)として扱われていましたが、最新バージョンのHTML5ではdescription list(記述する・描写するリスト)というより汎用性をもった意味に変わりました。

<dt>タグとは

<dt>タグとは、英語でdescription termという意味を持つタグです。
<dd>タグで説明される用語や文章を意味するマークアップです。

<dd>タグとは

<dd>タグとは、英語でdescription,definitionという意味を持つタグです。
dt>タグを説明する言葉や文章を意味するマークアップです。

実際に使用してみる

ddタグの使用例

画像のように<dd>タグで書かれた要素はインデント(字下げ)されます。
りんご→赤い、フルーツ
ぶどう→紫、フルーツ   のように<dt>タグでマークアップされた内容を<dd>タグが説明しています。

こんな使い方も…

この画像は僕が模写したサイトの一部なのですが、実際にコードを確認してみると説明リストのマークアップが使用されていました!
こんな使い方もあるんだなぁφ(..)とびっくりしました。

まとめ

【dl・dt・dd】のダグは説明リストを意味するタグで、用語集などに使用される。
<dd>タグでマークアップされた内容はインデント(字下げ)される。

今回調べて初めて知ったタグだったのですが、これからどんどん活用していきたいです(*´∀`)

コメント

タイトルとURLをコピーしました