dl要素内のdivの使い方についてメモ

HTML5.2よりdl要素内でdiv要素が使用できるようになったのですが、誤解していた部分があったのでメモ。

単純に「dl要素の子孫要素としてdivが使える」と覚えておりdiv要素をdd要素のラッパーとして使おうとしていたのですが、HTML Living Standardに反する使い方だったようです¹。

<!-- これはNG -->
<dl>
  <dt></dt>
  <div>
    <dd></dd>
    <dd></dd>
    <dd></dd>
  </div>
</dl>

dd要素の前に配置される兄弟要素はdtまたはdd要素と決まっており、この点が仕様違反となっていました。

つまり、dl要素内でdivを使う際には、dtおよびdd要素をまとめてラップする形で使用するのが仕様に沿った使い方となります。

<!-- これはOK -->
<dl>
  <div>
    <dt></dt>
    <dd></dd>
    <dd></dd>
    <dd></dd>
  </div>
</dl>

ただ上記の形では、dd要素群をひとまとまりに扱いたい場合に少し不都合があります。そのため今回は仕様に合った形で下記のように書き換えました。

<!-- 仕様に合う形に書き換え -->
<dl>
  <dt></dt>
  <dd>
    <ul>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </dd>
</dl>

ネストが増えているのが少し気持ち悪いですが、そこは仕方ないということで。

参考

これはメモです