今さら聞けない<dl>要素：その正しい使い方とテクニックを徹底解説

HTMLの<dl>（定義リスト）要素について深掘りした記事です。リストやdivタグで代用しがちなこの要素ですが、実は正しく使うことでアクセシビリティや意味論（セマンティクス）が向上します。2021年時点でのベストプラクティスを網羅しており、適切なマークアップを心がけたいWebエンジニア必読の内容です。

HTML5より前は、これは定義リスト（definition list）と呼ばれていたよ。理由は<dl>がもともと用語集とその定義を表すことだけを意図していたからだ。

TIL（今日学んだこと）：自分は10年間ずっと間違った呼び方をしていた。

DnDのステータスシートの最後の例を見て思ったんだけど、<dl>をネストするのって仕様的にOKなのかな？

つまり、こんな感じにできるのかってこと。

スクリーンリーダーがDLをどれくらいサポートしているかについての役立つメモがここにあるよ：https://adrianroselli.com/2025/01/updated-brief-note-on-description-list-support.html

DLはいいよね。少なくとも過去においては、tableがDLの代わりとして誤用されるケースがもっと多かったと思う。tableのマークアップの面倒くささは、divの山よりもひどいからね。

世界初のウェブサイトは<dl>を多用しているよ。

https://info.cern.ch/hypertext/WWW/TheProject.html

https://info.cern.ch/ （実際の最初のウェブサイトについての背景や方向性を示すためのランディングページのようなもの）

これは正しくないよ：

1. <dl>自体には対応するロール（暗黙的なもの）はないけれど、group、list、none、またはpresentationロールを付与することはできる <https://w3c.github.io/html-aria/#el-dl>

2. aria-labelを定義していいのは、暗黙的または明示的に互換性のあるロールを持つ要素だけだ https://w3c.github.io/html-aria/#docconformance-naming

3. aria-labelは一部の例外を除いてほぼ全てのロールで使える https://www.w3.org/TR/wai-aria-1.2/#aria-label。今回の場合、presentationとnoneは除外されるから、groupかlistが残る。

4. groupはしっくりこないし、listなら許容範囲かな。

結論：aria-labelをやめるか、role="list"を追加する（その場合、子要素にrole="listitem"も必要になる）のがよさそう。

—⁂—

この記事で触れられていないこととして、<dt>も<dd>だけでなく、連続して複数並べることができるよ。仕様書にいい例がある：https://html.spec.whatwg.org/multipage/grouping-content.html#the-dl-element:the-dl-element-5

これらは名前と値の「ペア」ではなく、名前と値の「グループ」なんだ。

ここでは人気のない意見かもしれないけど、セマンティックなHTMLを書こうとするのをやめたら人生が楽になった。残念だけど、あれは設計がひどいんだ。<dl>を使おうとするたびに、結局後悔することになる。階層を深くしたかったり、セクションの間に線を引きたかったり、アイコンを入れたかったり、見出しが複数のキーバリューペアにまたがってほしかったりするからだ。柔軟性を持たせようとはしているけど、提唱している概念をカバーするには程遠い。もちろん、<button>や<h1>など、目に見えるメリットがある場合は対応する要素を使うけれど、データモデルにうまく当てはまらなくて結局全部上書きしなきゃいけないような状況なら、実用的な選択肢とは言えないよ。

利用者の99%がAPIを避けて使うようなら、それはたぶんAPIのせいだ、と言っても論争にはならないはず。

リストの歴史（リストリー？）の授業だよ。以下の1985年のIBMメインフレームDCF/GMLマニュアルのリンクを見ればわかる通り、DL-DT-DDはウェブができる前から存在していた。40年以上前のこのドキュメントでは、定義リスト（DL）に加えて、用語集リスト（GL）、順序付きリスト（OL）、順序なしリスト（UL）、単純リスト（SL）についても説明されている。

ibm :: 370 :: DCF :: SH35-0050-2 Document Composition Facility Generalized Markup Language Implementation Guide Rel 3 Mar85

https://archive.org/details/bitsavers_ibm370DCFSpositionFacilityGeneralizedMarkupLanguag_15844220/page/97/mode/2up

HTMLでコンテンツを表現するのに最適なセマンティックな方法は何か、パズルみたいに考えるのが大好きだったな。いい時代だった。

記事で言及されているアクセシビリティのメリットはさておき、こういったセマンティックなHTMLを使うことは、AIツールがコードを理解する際にも有効になるんじゃないかと思う。