HTML の dl 要素内のグループを明示する: Days on the Moon

HTML の dl 要素 (説明リスト、いわゆる定義リスト) は、名前と値 (用語と説明) からなるグループの連なりを表します。ひとつのグループには dt 要素と dd 要素がそれぞれひとつ以上含まれます。

よく見るのは dl 要素の直下に dt 要素と dd 要素が来る形でしょう。以下の例では dl 要素にふたつのグループが含まれます。

<dl>
  <dt>琥珀</dt>
  <dd>寒天を使い透明感のある菓子の総称。</dd>
  <dd>琥珀糖のこと。</dd>

  <dt>琥珀糖</dt>
  <dt>干琥珀</dt>
  <dd>寒天を煮て固め表面を乾燥させた菓子。シャリっとした表面とプルっとした中身の対比が癖になる。</dd>
</dl>

スタイルシートを適用したり、マイクロデータの項目を作成したりするために、グループひとつずつを表す要素が欲しくなるかもしれません。そのときは div 要素を使ってグループを明示できます。

<dl>
  <div>
    <dt>琥珀</dt>
    <dd>寒天を使い透明感のある菓子の総称。</dd>
    <dd>琥珀糖のこと。</dd>
  </div>
  <div>
    <dt>琥珀糖</dt>
    <dt>干琥珀</dt>
    <dd>寒天を煮て固め表面を乾燥させた菓子。シャリっとした表面とプルっとした中身の対比が癖になる。</dd>
  </div>
</dl>

dl 要素に含まれるグループを明示したいという要望は昔からあり、XHTML2 では di 要素が定義されていました。HTML5 に対しても di 要素 (または dli 要素) が何度も提案されましたが、スタイルに関することはスタイルシートで解決すべきという意見、および新要素を導入すると従来の HTML パーサでは意図しない結果になるという問題から、そのたびに見送られてきました。

最終的に、div 要素を使えば従来の HTML パーサでも問題なく、またブラウザのデフォルトスタイルシートの影響も受けづらいということで、div 要素を使う案が採用されました。

参考文献