定義リストというのは、「言葉」とその「説明」が一覧になったリストを作成したいときに活用できるタグです。例えばこんな感じで使います。

ボタンで表示を切り替えてご覧ください。

See the Pen definition-list by kenichi (@ken81) on CodePen.

上記の言葉はウィキペディアから引用させていただきました。
ソースコードは次のようになっています。

<dl>
  <dt>SEO</dt>
    <dd>検索エンジン最適化（SEO）とは、検索結果において、ウェブページをより高い順位に表示させることを目的として行う取り組みのこと。</dd>

  <dt>スタイルシート</dt>
    <dd>スタイルシートとは、構造化文書などにおける表示形式を制御するしくみ。見栄えと構造を分離するという目的で提唱された。HTML、XML、SGMLといったマークアップ文書や、オフィスソフトにおいて広く使用されている。</dd>

  <dt>HTML</dt>
    <dd>HTMLは、ハイパーテキストを記述するためのマークアップ言語の1つである。World Wide Web (WWW)において、ウェブページ（1990年代後半頃からはコンテンツという語も利用されている。「中身」という意味の語であり、大層な意味は無い）を表現するために用いられる。</dd>

  <dt>マーケティング</dt>
    <dd>マーケティングとは、企業などの組織が行うあらゆる活動のうち、「顧客が真に求める商品やサービスを作り、その情報を届け、顧客がその価値を効果的に得られるようにする」ための概念である。</dd>
</dl>

こんな風に言葉とその説明を一覧にしたいときも使えますし、年表みたいなものをつくってもいいですね。今までテーブルやulタグなどで作っていたという方は、これからは定義リストも活用してみましょう。

dl要素はtableとul要素の間の子みたいな存在です。下記のようにデザインを入れることでいろんな表現ができそうです。

See the Pen definition-list01 by kenichi (@ken81) on CodePen.

定義リストの作り方

では、定義リストの仕組みについて見ていきましょう。

リスト要素には他にもul要素やol要素がありますが、これらと同じようにリスト全体をラップする要素があります。それが<dl>です。リスト系のタグはみな、リスト（list）の頭文字「l」が付きまして、dlの「d」は英語で定義（definition）の頭文字「d」になっています。

<dl>
  <!-- ここにリストを入れていきます -->
</dl>

このdl要素の中に最初にdt要素が入ります。dtは「Definition Term」つまり、「定義する用語」という意味から来ています。

<dl>
  <dt>定義する用語</dt>
</dl>

用語を入れたら、次にその説明（Definition Description）が入りますので、英語の頭文字をとったdd要素を入れます。

<dl>
  <dt>定義する用語</dt>
  <dd>用語の説明を入れる</dd>
</dl>

後は、dt要素とdd要素を繰り返し入れていき、最後にdlの終了タグでくくって１つの定義リストにします。
tableを作成するときと同じようにいろんなタグを使うので少しややこしいですが、意味と一緒に理解すれば覚えやすいと思いますので活用してみてください。