ハクソク

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

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

2026年5月23日原文(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年以上前かもしれないから ;)

└

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

└

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

Hacker Newsで議論の続きを見る