<dl> 要素内の <div> 配置を必須化してみるテスト

投稿

<dl> 要素は <dt> と <dd> の組み合わせで連想リストを表すものですが、<div> 要素を使ってグループ化することもできます。

<dl>
  <div>
    <dt>名前</dt>
    <dd>値</dd>
  </div>
  <div>
    <dt>名前</dt>
    <dd>値</dd>
  </div>
</dl>

もともとは XHTML 2.0 の Working Draft 2004年7月22日版において定義リスト（※当時の呼び方）のグループ化に <di> 要素(W3C)が登場しており、HTML5 でも策定当初は同様に <di> 要素が検討(lists.w3.org)されていました。

その後も議論が続くのですが、新要素を追加することはパーサー変更のコストや後方互換性の観点から問題があること、また HTML のセマンティクスはすでに明確でグループ化は CSS の問題に過ぎないことから既存の <div> 要素を活用する流れとなります。ちょっと変わった理由としては di は div のタイプミスに見える(GitHub)なんてのもありました。

そして2016年10月31日には HTML Living Standard にて <dl> 要素のコンテンツモデルに <div> 要素が追加(GitHub)され、W3C 側でも HTML 5.2 Working Draft 2017年2月28日版(W3C)にて追従しています。

このような経緯があるので、<dl> 要素内に <div> を配置するか否かは基本的に CSS レイアウトの複雑性によって使い分ければ良く、単純なレイアウトでは省略してなんら問題がありません。もちろん以下のようにスタイル以外の理由で使うことも可能です。

<dl>
  <div lang="en">
    <dt>name</dt>
    <dd>value</dd>
  </div>
  <div lang="ja">
    <dt>名前</dt>
    <dd>値</dd>
  </div>
</dl>

一方、現状の <dl> 要素の使われ方を見るに、グループ化をしない場合は dt + dd に続けて並列に dt + dd が続くその特異性が原因で不適切な使用がされているケースがよく見られます。昔からよく見るのは、1グループごとに <dl> を分割してしまうもの。

<dl>
  <dt>名前</dt>
  <dd>値</dd>
</dl>
<dl>
  <dt>名前</dt>
  <dd>値</dd>
</dl>

またひとつの <dt> に対して複数の <dd> を並べるべきところ、<dt> と <dd> は 1:1 しかできないと思い込んでいるのか、無駄に <dd> の中に <ul> を入れるケースもまま見かけます。

<dl>
  <dt>名前</dt>
  <dd>
    <ul>
      <li>値1</li>
      <li>値2</li>
    </ul>
  </dd>
</dl>

私は現状の <dl> 要素の HTML 仕様に不満はなく、<di> でなく <div> になった経緯にも納得をしているのですが、一方でこのような不適切な使われ方が未だ横行している現状を見るに、<dl> 要素の構造の特異性に本質的な問題があるとも感じます。

こればかりは今さら言っても仕方のない話ではあるのですが、HTML 仕様を抜本から変えるのは無理でも狭い範囲内の個別ルール（e.g. 社内ルールやプロジェクトルール）を変えることは可能です。すなわち HTML 仕様としては <dl> 要素内の <div> 配置は任意であるものの、あえてそれを強制するルールを課すことで、不適切な使われ方が軽減できるのではと思う次第です。

みんな大好き Markuplint(markuplint.dev) であれば以下の設定で実現可能です。

/** @type {import('@markuplint/ml-config').Config} */
export default {
	rules: {
		...
	},
	nodeRules: [
		{
			selector: 'dl',
			rules: {
				'required-element': ['div'],
			},
		},
	],
};

私は先日より自分用の Markuplint 設定ファイル(GitHub)にこれを追加しています。まあ自分自身のことだけで言えば前述のような <dl> 要素の不適切な使用をすることはさすがにないと思うのですが、それはそれとして <div> を常に入れることを習慣化しておいて別に損はないだろうと。