ハクソク

世界を動かす技術を、日本語で。

「On The」の日本語訳は「オン・ザ」です。文脈によって異なる意味を持つ可能性があるため、具体的な内容があれば教えていただければ、より適切な翻訳を提供できます。

2日前原文(benmyers.dev)

概要

  • <dl>要素 は、名前と値のペアリストを表現するためのHTML要素
  • <dt>・<dd>要素 を組み合わせて柔軟なレイアウトが可能
  • アクセシビリティ向上 や意味付けによる利点
  • divの代替 として推奨される理由
  • Dungeons & Dragonsの例 で応用の幅広さを実証

説明リスト（Description List）の基本

  • <dl>要素 は、名前と値のペア（name–value pairs）を表現するためのHTML要素
  • <dt>（description term） は名前、 <dd>（description detail） は値を表現
  • <dl>タグ でリスト全体を囲み、各ペアごとに<dt>と<dd>を記述
    • 例：
      • <dl> <dt>Title</dt> <dd>Designing with Web Standards</dd> </dl>
  • 複数の値 がある場合、1つの<dt>に対して複数の<dd>を並べて記述可能
  • <div>ラッパー で<dt>と<dd>のセットを囲むことで、スタイリングも柔軟に対応

セマンティクス（意味付け）の重要性

  • 従来の<div>構造 でもリストは作成可能だが、意味情報が不足
  • セマンティックな要素 を使うことで、機械や支援技術が情報構造を正しく解釈可能
    • 例：スクリーンリーダーはリストのグループ数や進捗を案内できる
    • ユーザーはリスト全体のスキップも容易
  • アクセシビリティ向上 や将来的な拡張性の観点から、<dl>の利用が推奨

Dungeons & Dragonsのステータスブロック例

  • D&Dのステータスブロック は、典型的なname–valueペアの集合体
  • <dl>を複数使い分け ることで、能力値や武器攻撃など異なる情報グループを明確化
    • 例：能力値、特性、アクションごとに<dl>を分割
    • <div>で<dt>と<dd>をグループ化し、aria-labelで用途を明示

まとめ

  • name–valueペア のリストはWeb上でよく使われるパターン
  • <dl>・<dt>・<dd> の3要素で、セマンティックなマークアップが可能
  • セマンティクス付与 で、ユーザー体験やアクセシビリティが向上
  • MDNの<dl>ドキュメント や公式仕様書で詳細を確認推奨

補足

  • HTML5以前 は、<dl>は「定義リスト」と呼ばれていた
  • <dt>・<dd> も「definition term」「definition detail」と呼ばれていた歴史

Hackerたちの意見

これ、フロントエンドのプロジェクトで結構使ったことあるんだ。初めて使ったときは、HTMLのセマンティクスのパズルを完成させたみたいな満足感があったよ。2018年にはJAWSが正しくアナウンスしてなかったのを覚えてるけど、今はどうなんだろうね。

└

2024年か2025年にチェックしたとき、Windows NarratorがChrome、Firefox、Edge（Chromiumモード）、Edge（IEモード）で違うアナウンスをしてて、どれも期待通りには動かなかったんだ。Adrian Roselliの見解（https://adrianroselli.com/2025/01/updated-brief-note-on-desc...）: > 定義リストのサポートは一般的に良好で（VoiceOverは例外だけど）、たとえサポートの仕方が気に入らなくても。HTMLを無理に修正しようとしない方がいいよ。理由は、(1) ユーザーは自分のスクリーンリーダーの癖に慣れているから、(2) こういう状況では、あるスクリーンリーダーで「ちょうどいい」ようにすると、別のスクリーンリーダーでは理解不能になる可能性が高いから。こういう癖を理解しておくことは大事だよ。そうしないと、あまり癖のない動作に依存したインターフェースをデザインしちゃうかもしれないから。

実際に仕様に「divでしかラップできない」って書いてあるのか気になるな。セマンティックHTMLが好きだから、要素を自分のドメインに特化して名前付けしたいんだよね。

└

うん、俺もそれにはちょっと驚いたけど、どうやら有効みたいだね。https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/...

└

そうだよ。https://html.spec.whatwg.org/multipage/grouping-content.html...

└

divが唯一の推奨ラッパー要素みたいだね。https://html.spec.whatwg.org/multipage/grouping-content.html... https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/... 追記：みんな一斉に返信してきたｗ divについても驚いたよ。それに、スクリーンリーダーのサポートもね。https://a11ysupport.io/tech/html/dl_element

└

カスタム名の要素はdivだよ。

└

他の人も言ってる通り、divだけが許可されてるよ。これは特別な状況じゃなくて、HTML仕様は構文には寛容だけど、動作にはかなり制限があるんだ。XHTML（とXMLパース）がデフォルトにならなかったのは残念だね。XHTMLは逆に、より制限のある構文だけど、動作には寛容だから。例えば、XHTMLではカスタム要素をテーブルの行やセルとして使えるよ（正しい役割とCSSの表示プロパティを与えればね）。これは、XHTMLがパース中にツリーを変更しないからで、HTMLはカスタム要素の子をテーブルの親に持ち上げちゃうからなんだ。

HTML5以前は、これは定義リストと呼ばれていた。これは、元々用語集とその定義を表すためだけに意図されていたからだ。今日、10年間間違った名前を付けていたことを知ったよ。

└

HTML5が標準化された年を調べたくないな、10年以上前かもしれないから ;)

└

今日学んだこと：名前が定義リストから変わったんだ。

└

あなたは一人じゃないよ。今週これを見たのは二回目で、最初は間違いだと思った。

DnDのスタットシートの最後の例を見て、sをネストするのは合法なのか考えちゃうな。つまり、アクションをやってもいいのかな…

└

うん、.の中にはどんなフローコンテンツも入れられるよ。見てみて： https://html.spec.whatwg.org/#the-dd-element https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/...

GOV.UKデザインシステムのサマリーリストコンポーネントは、説明リストだよ。https://design-system.service.gov.uk/components/summary-list... それに、スタイリングのためにラッパーdivも使ってる。

└

ラッパーdivがちょっと悲しい気持ちにさせる。最近はグリッドレイアウトを使えば、ほとんどの場合、必要ないんだよね。

スクリーンリーダーがDLをどれだけサポートしてるかについての役立つメモがあるよ。https://adrianroselli.com/2025/01/updated-brief-note-on-desc...

DLが大好き！昔はテーブルがDLとして誤用されてたことが多かったし、テーブルのマークアップの不便さは、たくさんのdivよりもひどかったと思う。

└

その通りだけど、テーブルをDLのコスプレさせるのは、テーブルが悪用されてた中でも最悪の方法ではなかったよね。

└

不要な閉じタグを省略すれば、そんなに不便じゃないよ。最初、次、何でも、マークダウンのテーブルマークアップよりもシンプルでクリーンだと思う。

└

俺はずっとDLをテーブルの一行だと思ってた。

世界初のウェブサイトは、sをたくさん使ってるよ。https://info.cern.ch/hypertext/WWW/TheProject.html https://info.cern.ch/ （実際の最初のウェブサイトについてのコンテキストとオリエンテーションを提供するためのランディングページみたいなもの。）

これは間違ってるよ。1. 対応する（つまり暗黙の）役割がないけど、役割として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"も必要）。 —⁂— 記事で見落とされてるのは、単にだけじゃなくて、複数を連続して使うこともできるってことだね。仕様にはいい例があるよ。 https://html.spec.whatwg.org/multipage/grouping-content.html... それは名前–値のペアじゃなくて、名前–値のグループなんだ。

└

わあ、そんなことに気づかなかった、教えてくれてありがとう！ちょっと気になるんだけど、要素を囲む要素にrole="listitem"を付けるのはどう思う？要素には`role="listitem"`が許可されてるみたいだけど、複数の要素がまとめられてる場合には正確じゃない気がするし、それが要素の解釈に影響するかどうかもわからないな。

ここではあまり人気がない意見かもしれないけど、セマンティックHTMLを書くのをやめたら、生活が楽になった。デザインが悪すぎるんだ、ごめん。毎回、<div>を使おうとすると、結局後悔することになる。複数のラッパーが必要だったり、セクションの間に区切りが欲しかったり、アイコンや複数のキー・バリューのペアを跨ぐ見出しが必要だったりするからね。これらの要素はある程度の柔軟性を持っているけど、実際にカバーできる範囲は全然足りない。もちろん、観察できるメリットがある時は、対応する要素を使うけど、データモデルにうまくフィットしなくて、すべてをオーバーライドしなきゃいけないなら、実用的な選択肢とは言えないよね。99%の使用があなたのAPIを回避しているなら、それはたぶんAPIのせいだって言っても、そんなに物議を醸すことじゃないはず。

└

じゃあ、CSSのせいってことかな。ラッパーを取り除くために display: contents を導入したみたいに、共通の親を持つかのように要素をグループ化する方法も導入すべきだと思う。:wrap(dt, dt+dd) {border: solid 1px}