【勉強メモ】HTML dl dt ddタグ

基本

HTML5においては
「description list(dl）= 説明リスト」
「description term(dt）= 説明する言葉」
「definition / description(dd）= 定義分もしくは説明文」
という形でdt要素をdd要素で説明する「記述リスト」に変更されました。

https://ferret-plus.com/5063

※以前は「定義リスト」だった。

使い方

<dl>
<dt> ソフトドリンク</dt>
<dd>一般の飲料</dd>
<dt> お酒</dt>
<dd>アルコール入り飲料</dd>
</dl>

引用：https://ferret-plus.com/5063

1. dlが親でdtとddが子。dlで括ってdt（用語）とdd（説明）が交互にくる。

2. dtとddは必ず一対一でなくて良い。

3. dlの中にdlを入れられる。

4. ddに画像を入れて良い。　　　　　　出典：https://ferret-plus.com/5063

定義要素として使用する時

dl要素を定義リストとして利用する場合は、dt要素にdfn要素を内包させます。
一般的なブラウザでは定義する用語はイタリックになります。

https://ferret-plus.com/5063?page=4

<dl>
<dt><dfn>定義する用語</dfn></dt>
<dd>用語の定義</dd>
</dl>

引用：https://ferret-plus.com/5063?page=4

レイアウト CSS

dtとddの一対は横並び、複数のdt・ddが縦に並ぶようにする。

dt{
display: flex; 　　　　　　　　　　dt、ddを横並びにする
flex-wrap: wrap; 　　　　　　dtとddが100%になったら、横並びを折り返す
}

dt {width: 25%;}
dd {　width: 75%;}

dtとddに計100％になるようにwidthをつけることで折り返しされ、縦に整列する。

引用：https://code-step.com/photo-code/