<dl>要素の新しい定義と配置のルールについて誤解していた点があったので備忘録として書きます。
<dl>要素は2014年10月28日のHTML5.0勧告でその定義が、2017年12月14日にW3C勧告となったHTML5.2でその配置のルールが変わりました。
<dl>要素の定義変更について
- HTML4までの<dl>要素の定義
- definition list
- 日本語訳: 定義リスト
- HTML5からの<dl>要素の定義
- term-description groups (W3C) / Name-value groups (WHATWG)
- 日本語訳: 説明リスト(MDN)
「説明リスト」ってなんだよみたいな。
よくわからないので原文を見ます。
W3CとWHATWGの説明をそれぞれ翻訳すると、呼称=説明が対になったグループ、名前=値が対になったグループとなります。直訳するとなんとなく理解できますね。
配置のルールに注意
<dl>要素直下に入れられる要素について
- ×
<dl>要素直下に入れられる要素は<dt>要素<dd>要素だけ - ◯
<dl>要素直下に入れられる要素は<dt>要素<dd>要素と<div>要素
HTML5.2では<dl>要素直下での<div>要素の使用が許容されました。
「<div>要素が許容される」の意味
- ×
<dt>要素、<dd>要素は今後<div>要素で囲めばよく、<dl>要素で囲む必要はない - ◯
<dt>要素、<dd>要素は<div>要素でグルーピングすることが許容されたが、あくまでも<dl>要素で囲む必要がある
<dl>要素直下での<div>要素の使用が許容されたとはいえ、<div>要素はグルーピング目的に限られ、<dl>要素を代替できるようになったわけではありません。
これはOK!
<dl>
<div>
<dt>Name</dt>
<dd>Ohtani</dd>
</div>
<div>
<dt>Born</dt>
<dd>1994</dd>
</div>
<div>
<dt>Birthplace</dt>
<dd>Iwate</dd>
</div>
</dl>
これはNG
<div>
<dt>Name</dt>
<dd>Ohtani</dd>
</div>
これもNG
<dl>
<div>Name</div>
<dd>Ohtani</dd>
</dl>
というわけで、さようなら定義リスト。こんにちは説明リスト。
この呼称まだモヤモヤする。