<dl>

説明リスト

用語とその説明をセットで並べるリストです。用語集・FAQ・商品の仕様など、「名前と値」の組を表すのに向いています。

サンプルコード

HTML

1<dl>

2 <dt>HTML</dt>

3 <dd>Webページの構造をつくる言語</dd>

4 <dt>CSS</dt>

5 <dd>Webページの見た目を整える言語</dd>

6</dl>

ブラウザでの表示

dl は "description list" の略です。用語を dt、その説明を dd で書き、組にして並べます。

1つの用語に複数の説明を付けたり、複数の用語に1つの説明を付けたりもできます。

CSSで装飾するために、dt と dd の組を div で囲むこともできます。

grid を使うと、表のように2列で並べられます。

HTML

1<dl class="spec">

2 <dt>サイズ</dt><dd>M</dd>

3 <dt>重さ</dt><dd>200g</dd>

4</dl>

CSS

1.spec {

2 display: grid;

3 grid-template-columns: 6em 1fr;

4 gap: 4px 12px;

6.spec dd {

7 margin: 0;