なぜ <dl> 要素は会話のマークアップとして不適切なのか

<dl> 要素は HTML の黎明期から存在しており、HTML Tags（1992年）(info.cern.ch) や Hypertext Markup Language Internet Draft（1993年） ではglosary (or definition list)とされていました。

一方、HTML4 では「定義リスト」という主軸はそのままでありながら、応用例の一つとして会話のマークアップにも使用できるとされました。

ただ、本来は「用語」を表す <dt> 要素が会話における話者を表しても良いというのは理解に苦しむところで、どういった経緯でこのような緩和が行われたのかは気になります。

HTML5 ではこれまでの「定義リスト」の意味合いがなくなり、name-value グループを表すdescription listとされ、定義以外の用途にも使用できるようになりました。従来どおり用語の定義に使用する際は <dfn> 要素と組み合わせる例が挙げられています。

<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>

また会話のマークアップとして、初期の Working Draft では新要素の <dialog> 要素 が提案されていました。現在のインタラクティブ UI を表現する <dialog> 要素 と同名ながらその用途はまるで異なり、<dt>, <dd> 要素と組み合わせて使うことが想定されていたものとなります。

<dialog>
 <dt> Costello
 <dd> Look, you gotta first baseman?
 <dt> Abbott
 <dd> Certainly.
 <dt> Costello
 <dd> Who's playing first?
 <dt> Abbott
 <dd> That's right.
 <dt> Costello
 <dd> When you pay off the first baseman every month, who gets the money?
 <dt> Abbott
 <dd> Every dollar of it. 
</dialog>

このため、従来からある <dl> 要素は会話のマークアップには不適切とされたのですが、注目すべきは当初はその理由が明記されていたことです。

しかしながら会話には順序があるためとしたこの理由付けはどういうわけか2009年8月25日付けのアップデート で削除されてしまいました。

その直後、2009年9月には <dialog> 要素が削除されることになりました。

その経緯は The WHATWG Blog の記事(blog.whatwg.org) においてThe art of conversation is, like, dead and stuffとの刺激的な見出しでまとめられています。曰く、インタビュー動画のテキスト起こしのような単純なケースでは有用であるものの、映画脚本で伝統的に採用されているフォーマットを実現することができず、会話に付随する指示などの複雑なセマンティクスも表現できないためとされており、その結果 2010年3月4日版 において <dialog> 要素は消滅しました。

そして、これに合わせて <dl> 要素の定義 には以下の一文が追加されました。これは最新の HTML Living Standard でも同じ記述が踏襲されてします。

すなわち、会話のマークアップに <dl> 要素を使うのが不適切な理由が「会話には順序があるため」から「会話は同じ名前の <dt> 要素が複数回出現しうるため」に変更されたと見なすことができます。

日々のマークアップで「このコンポーネントは <dl> 要素を使うべきか、それとも <ul> や <p> にするべきか」と迷うことがあると思います。会話については前述のように HTML 仕様で不適切と名指しされており、会話の具体的なマークアップ方法の指南 もあるくらいですが、それ以外の場合はどのように考えれば良いのでしょうか。

例えばトップページによくある新着情報に <dl> 要素を使うのは不適切です。日付を <dt> 要素として以下のようなマークアップをしてしまいがちですが、同一日に複数の更新があるケースも存在し、日付はユニークなキーになり得ないからです。

<h2>新着情報</h2>

<!-- これは不適切な例です -->
<dl>
	<div>
		<dt><time datetime="2023-12-01">2023年12月1日</time></dt>
		<dd>○○を△△しました</dd>
	</div>
	<div>
		<dt><time datetime="2023-12-02">2023年12月2日</time></dt>
		<dd>□□を××しました</dd>
	</div>
	<div>
		<dt><time datetime="2023-12-02">2023年12月2日</time></dt>
		<dd>☆☆を◎◎しました</dd>
	</div>
</dl>

しかし、残念ながら現状はこういった <dl> 要素の不適切な使い方を機械的にチェックできるツールは存在せず（少なくとも私は知りません）、上記のマークアップは Nu Html Checker(validator.w3.org) や Markuplint(markuplint.dev) でも警告されません。ただ、ちょっとした工夫でツールの力を借りることは可能です。

2023年12月20日追記Markuplint はさっそく検証ルール追加の Issue が立ちました!

<dl> 要素内で同じ名前の <dt> 要素が存在してはいけないということは、 <dt> 要素あるいはその親の <div> 要素に <dt> 要素の内容を元にした id 属性を設定してしまえば、機械的にチェックできるということでもあります。先の新着情報を例に取ると、以下のように id 属性を追加すれば機械的チェックが可能になります。

<h2>新着情報</h2>

<!-- これは不適切な例で、かつ機械的チェックが可能なマークアップです -->
<dl>
	<div id="news_2023-12-01">
		<dt><time datetime="2023-12-01">2023年12月1日</time></dt>
		<dd>○○を△△しました</dd>
	</div>
	<div id="news_2023-12-02">
		<dt><time datetime="2023-12-02">2023年12月2日</time></dt>
		<dd>□□を××しました</dd>
	</div>
	<div id="news_2023-12-02"><!-- ここで ID 重複エラーになる -->
		<dt><time datetime="2023-12-02">2023年12月2日</time></dt>
		<dd>☆☆を◎◎しました</dd>
	</div>
</dl>

無論、たまたま重複する名前が存在しないときはエラーが発生しませんから、この対策に甘んじることはできません。マークアップの際にはあくまで「<dl> 要素内で同じ名前の <dt> 要素が存在してはいけない」ことを知識として知っておく必要があります。これはあくまで保険的対策としての不完全な手段の一つに過ぎませんが、「会話を <dl> 要素でマークアップする」ような誤用はたいていの場合防げると思います。

• Unwebbable – A List Apart(alistapart.com)
• dialog要素がHTML5から削除されました。代わりにp要素を使う？ « HTML5.JP ブログ(web.archive.org)
• HTML5 の dl 要素(terkel.jp)