「ただのリスト」だと思ってない？ `dt`要素が持つ本来のセマンティクスと、現場で迷わない使い分け
フロントエンドの現場で「リスト」と聞くと、多くの人は反射的に `ul` や `ol` を思い浮かべるはずです。しかし、データの構造が「名前と値」のペアになった瞬間に、多くのエンジニアが `div` の羅列や中途半端なマークアップで済ませてしまう……。そんな光景を何度も見てきました。
今回は、HTMLの記述リスト（Description List）において、最も誤解されやすく、かつ最も強力な「`dt`要素」にスポットを当てます。単なる「見出し」ではない、`dt`が背負っている本来の役割を深掘りしてみましょう。
`dt`は「定義のラベル」であり、ただの太字ではない
まず、仕様（HTML Living Standard）における `dt` 要素の定義を再確認しましょう。`dt`（Definition Term）は、`dl` 要素の中で「用語」や「名前」を提示する役割を持ちます。
ここで重要なのは、「`dt`は単なる装飾のためのタグではない」という点です。スクリーンリーダーなどの支援技術は、`dt` を見つけると「これから何かの名前が来るぞ」とブラウザのアクセシビリティツリーを構築します。これを `div` や `span` で置き換えてしまうと、文脈が断絶し、ユーザーは情報の構造を理解できなくなります。
ブラウザが裏側でやっていること
ブラウザのレンダリングエンジンにとって、`dt` はデフォルトで `display: list-item;` ではありません。多くのブラウザでは `display: block;` が適用されており、`ul` の `li` とは明確に異なる存在として扱われます。
また、`dt` と `dd` はセットであり、`dl` 内での親子関係は論理的に結びついています。このセマンティクスを正しく利用することは、SEOの観点だけでなく、将来的にそのデータ構造をJavaScriptでパース（解析）する際にも、圧倒的なメンテナンス性を発揮します。
複数の `dt` が並ぶとき、何が起きているのか？
実務でよくあるのが、「一つの定義に対して、複数の用語を当てたい」というケースです。例えば、同じ意味を持つ複数のキーワードや、別名（エイリアス）を表示したいときですね。
- JavaScript
- ECMAScript
- Webブラウザで動作する標準的なスクリプト言語。
このように `dt` を連続させることは、仕様上完全に合法です。これは「これらの用語（JavaScript, ECMAScript）は、いずれも次の `dd` で定義される内容と同じ意味（あるいは同じグループ）である」ことを示唆しています。これを `div` で囲ったり、無理やり一つの `dt` に詰め込む必要はありません。HTMLは私たちが思っているよりも柔軟で、賢いのです。
実践：現場で使える「美しい記述リスト」のコード例
現場でそのまま使える、アクセシブルかつスタイリッシュな実装例です。CSS Gridを使うと、`dt` と `dd` の関係性が視覚的にも明確になります。
- フロントエンド
- ユーザーの目に触れるインターフェースを構築する領域。
- CI
- 継続的インテグレーション
- コードの変更を頻繁にリポジトリに統合し、自動テストを行う開発手法。
この実装のポイント
1. CSS Gridの活用: `grid-template-columns` を使うことで、`dt` の幅を固定しつつ、`dd` が可変するレイアウトを簡単に実装できます。従来の `float` 頼みの崩れやすいレイアウトとはおさらばしましょう。
2. `margin: 0` のリセット: `dd` はデフォルトでブラウザのユーザーエージェントスタイルシートにより `margin-left` が設定されています。これを `0` にリセットすることで、レイアウトの制御が格段に楽になります。
最後に：HTMLは「文書の構造」を伝える手段
「`div` で囲んでクラス名を付ければ見た目は同じになるからいいや」――そう思ってしまう気持ちも分かります。しかし、フロントエンドエンジニアの仕事は「見た目を作ること」以上に「情報の意味をブラウザやツールに伝えること」にあります。
`dt` を正しく使うことは、情報の「名前」を明確にすること。その一手間が、アクセシビリティを向上させ、検索エンジンの理解を助け、何より半年後の自分がコードを見返したときに「ああ、ここは用語集なんだな」と一瞬で理解できる資産になります。
次の開発では、ぜひ意識して `dt` を選んでみてください。細かいことの積み重ねが、一流のエンジニアを創るのです。
コメント