目次
dlタグとは？
dlタグとはdefinition list（デフィニション リスト）の略で、定義リストを表すタグです。dtタグとddタグを組み合わせて使用します。
定義リストとは辞書のように物事を説明することを言います。
例えば、果物の「リンゴ」。Wikipediaでは以下のように説明されています。
リンゴ（林檎、学名：Malus domestica, Malus pumila）とは、バラ科リンゴ属の落葉高木、またはその果実のこと。植物学上ではセイヨウリンゴと呼ぶ。春、白または薄紅の花が咲く。人との関わりは古く、紀元前から栽培されていたと見られ、16世紀以降に欧米での生産が盛んになり、日本においても平安時代には書物に記述がみられる。現在世界中で生産される品種は数千以上といわれ、栄養価の高い果実は生食されるほか、加工してリンゴ酒、ジャム、ジュース、菓子の材料などに利用されている。西洋美術、特に絵画ではモチーフとして昔からよく扱われる。
引用元：Wikipedia
これをdlタグを使用して書くと以下のようになります。
<!-- 定義したい内容全体をdlタグで囲む -->
<dl>
<!-- 定義する用語をdtタグで囲む -->
<dt>リンゴ</dt>
<!-- 用語の説明をddタグで囲む -->
<dd>リンゴ（林檎、学名：Malus domestica, Malus pumila）とは、バラ科リンゴ属の落葉高木、またはその果実のこと。植物学上ではセイヨウリンゴと呼ぶ。春、白または薄紅の花が咲く。人との関わりは古く、紀元前から栽培されていたと見られ、16世紀以降に欧米での生産が盛んになり、日本においても平安時代には書物に記述がみられる。現在世界中で生産される品種は数千以上といわれ、栄養価の高い果実は生食されるほか、加工してリンゴ酒、ジャム、ジュース、菓子の材料などに利用されている。西洋美術、特に絵画ではモチーフとして昔からよく扱われる。</dd>
</dl>- dl - definition list（デフィニション リスト）
- 定義する内容全体。
- dt - definition term（デフィニション ターム）
- 定義する用語。
- dd - definition description（デフィニション ディスクリプション）
- 用語の説明。デフォルトスタイルシートの影響で左側に余白（インデント）が設定されている。
使い方
See the Pen dl1 by DREAM NET WORKS (@dnw) on CodePen.
余白の削除
See the Pen dl2 by DREAM NET WORKS (@dnw) on CodePen.
横並び
See the Pen dl3 by DREAM NET WORKS (@dnw) on CodePen.