Help us understand the problem. What is going on with this article?

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

<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>

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

参考

cloudpack
Amazon Web Services (AWS) の導入設計、環境構築、運用・保守をサポートするマネジドホスティングサービス
https://cloudpack.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away