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

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

Posted at July 30,2014 1:11 AM
Tag:[HTML5]

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

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

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

1.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要素が辞書全体といったところでしょうか。

2.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となります。

3.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>
関連記事
zenback
人気エントリー
トラックバックURL


コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)