小粋空間  -  a cheap joke and a play on words site

HTML5のdl要素/dt要素/dd要素について

HTML5のdl要素/dt要素/dd要素について調べましたので紹介します。

dt要素とdd要素の記述条件がHTML4.01から変わっています。

内容に認識誤り等ありましたらどこかでつぶやいてください。

１．dl要素/dt要素/dd要素とは

まず、HTMLにおけるdl/dt/ddの各要素の意味は次のとおりです。

• dl要素：Definition List（定義リスト）で、dt要素とdd要素のセットをまとめたもの
• dt要素：Definition Term（定義する用語）
• dd要素：Definition Description（定義する用語の説明）

マークアップ例は下記のとおりです。

<dl>
  <dt>項目1</dt>
  <dd>項目1の説明</dd>
  <dt>項目2</dt>
  <dd>項目2の説明</dd>
　…略…
  <dt>項目n</dt>
  <dd>項目nの説明</dd>
</dl>

たとえるなら、dt要素の内容が辞書の単語ひとつに該当し、dd要素の内容がその単語の説明、dl要素が辞書全体といったところでしょうか。

２．HTML4.01でのdl要素/dt要素/dd要素

HTML4.01のDTDにおける、dl要素/dt要素/dd要素の定義は次のようになっています。

<!ELEMENT DL - - (DT|DD)+              -- definition list -->

このDTDより「dl要素の中にdt要素またはdd要素のいずれかが1つ以上あればよい」と読み取れます。

つまり、先ほどの例、

<dl>
  <dt>項目1</dt>
  <dd>項目1の説明</dd>
  <dt>項目2</dt>
  <dd>項目2の説明</dd>
　…略…
  <dt>項目n</dt>
  <dd>項目nの説明</dd>
</dl>

の他に、

<dl>
  <dt>項目1</dt>
  <dt>項目2</dt>
　…略…
  <dt>項目n</dt>
</dl>

や、

<dl>
  <dd>項目1の説明</dd>
  <dd>項目2の説明</dd>
　…略…
  <dd>項目nの説明</dd>
</dl>

も、文法上はOKとなります。

３．HTML5でのdl要素/dt要素/dd要素

HTML5の仕様では、dl要素の子要素としてdt要素・dd要素を記述する場合、「1つ以上のdt要素」と、それに続く「1つ以上のdd要素」が必要、と規定されています。

4.4.8 The dl element（和訳）

つまりHTML4.01でOKとなっていた、dl要素内でのdt要素のみ（またはdd要素のみ）のマークアップは文法違反となります。

前述の具体例となりますが、次の場合も文法違反となるようです。

• dl要素の一番目の子要素がdd要素
• dl要素の最後の子要素がdt要素

また、次のように「ひとつのdl要素内に同じ内容のdt要素が複数あるべきでない」とも規定されています。

<dl>
  <dt>項目1</dt>
  <dd>～略～</dd>
  <dt>項目1</dt>
  <dd>～略～</dd>
</dl>

ただし、「1つ以上のdt要素」「1つ以上のdd要素」と記したとおり、次のような関連づけは可能なようです（4.4.8 The dl elementのCode Exampleより抜粋）。

以下は、ひとつの定義を複数の説明に結び付けた例です（赤色部分）。

<dl>
  <dt>Authors
  <dd>John
  <dd>Luke
  <dt>Editor
  <dd>Frank
</dl>

以下は、複数の定義をひとつの説明に結び付けた例です（赤色部分）。

<dl>
  <dt lang="en-US"><dfn>color</dfn></dt>
  <dt lang="en-GB"><dfn>colour</dfn></dt>
  <dd>A sensation which (in humans) derives from the ability of
  the fine structure of the eye to distinguish three differently
  filtered analyses of a view.</dd>
</dl>