share facebook facebook twitter menu hatena pocket slack

2018.06.19 TUE

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

工藤 響己

WRITTEN BY 工藤 響己

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要素について誤解していたこと

cloudpack

cloudpackは、Amazon EC2やAmazon S3をはじめとするAWSの各種プロダクトを利用する際の、導入・設計から運用保守を含んだフルマネージドのサービスを提供し、バックアップや24時間365日の監視/障害対応、技術的な問い合わせに対するサポートなどを行っております。
AWS上のインフラ構築およびAWSを活用したシステム開発など、案件のご相談はcloudpack.jpよりご連絡ください。