HTML要素 ・ リスト・テーブル
<dt>
説明リストの用語
dl の中で、説明される側の用語や名前を表します。直後の dd がその説明です。
01
サンプルコード
HTML
1<dl>
2 <dt>営業時間</dt>
3 <dd>10:00〜18:00</dd>
4 <dt>定休日</dt>
5 <dd>水曜日</dd>
6</dl>
CSS
1dt {
2 font-weight: bold;
3}
4dd {
5 margin: 0 0 8px;
6}
02
実行結果
ブラウザでの表示
03
解説
dt は "description term" の略で、説明リストの「用語」の部分です。必ず dl の中に書き、後ろに説明の dd を続けます。
dt を続けて複数書くと、それらすべてに次の dd の説明が当てはまります。
ブラウザの既定では太字にはならないため、見出しのように見せたいときはCSSで font-weight を指定します。
04
応用例・注意点
書き方のパターン
| パターン | 説明 |
|---|---|
dt ＋ dd | 1つの用語に1つの説明 |
dt ＋ dd ＋ dd | 1つの用語に複数の説明 |
dt ＋ dt ＋ dd | 複数の用語（別名など）に1つの説明 |
用語に別名を並べる
同じ意味の用語を続けて書けます。
HTML
1<dl>
2 <dt>余白</dt>
3 <dt>マージン</dt>
4 <dd>要素の外側の空き</dd>
5</dl>
注意点
- 01dt の中に見出し（h1〜h6）は入れられません。
- 02dl の外で dt は使えません。