2014年10月28日のHTML5.0勧告で<dl>要素の定義が、2017年12月14日にW3C勧告となったHTML5.2でその配置のルールが変わりましたが、この新しい定義と配置のルールについて誤解していた点があったので備忘録として書きます。

定義の変更

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!


  

    
Name

    
Otani

  

  

    
Born

    
1994

  

  

    
Birthplace

    
Iwate

これはNG


  
Name

  
Otani

これもNG


  
Name

  
Otani

というわけで、さようなら定義リスト。こんにちは説明リスト。
この呼称まだモヤモヤする。

参考

元記事はこちら

「HTML5.2のdl要素について誤解していたこと」