86
44

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2018-06-04

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

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

参考

86
44
4

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
86
44

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?