【入門編】dtとddの多対多関係 – HTML実践ガイド

「これってどう書くのが正解？」dl・dt・ddで挑む、用語と説明の複雑な関係

こんにちは！Web制作の世界へようこそ。HTMLを学び始めると、必ず一度は頭を悩ませるのがリストタグですよね。

特に今回取り上げる「`

`（定義リスト）」は、初心者の皆さんがつまずきやすいポイントの筆頭です。「用語と説明」をセットにするためのタグですが、いざ現実のWebサイトで使おうとすると、「一つの用語に説明が2つある時は？」「逆に、3つの用語に対して共通の説明がある時はどうするの？」なんて疑問が次々と湧いてくるはず。

でも、安心してください。HTMLには、そんな「多対多」の悩みにも寄り添ってくれる柔軟な書き方がちゃんと用意されています。今日は、身近な例えを交えながら、その解き方を一緒に紐解いていきましょう！

—

基本のおさらい：dl・dt・ddは「辞書」のイメージ

まずは基本。`

`は「Description List（説明リスト）」の略。辞書や用語集を思い浮かべてみてください。

• `

  `：辞書そのもの。全体を囲む箱。

• `
  `：見出し（用語）。辞書の「単語」の部分。
• `
  `：説明文。辞書の「意味」が書かれた部分。

基本形は「dt（用語）1つに対して、dd（説明）1つ」ですよね。でも、現実はもっと複雑です。

—

ケース1：一つの用語に、複数の説明がある場合

例えば、カフェのメニュー表を想像してみてください。「エスプレッソ」という用語に対して、「特徴」と「価格」という2つの説明を並べたい時がありますよね。

こんな時は、迷わず「`

`を並べる」だけでOKです。

エスプレッソ

濃厚に抽出された少量のコーヒーです。

価格：400円

HTMLは「dtの後にddがいくつ続いても、それは全部そのdtの説明である」と判断してくれます。無理にひとまとめにする必要はありません。それぞれの役割ごとに、堂々と`

`を並べてあげましょう。

—

ケース2：複数の用語に、一つの説明がある場合

次に逆のパターンです。「朝のコーヒー」「昼のコーヒー」「夜のコーヒー」と、3つの用語があるけれど、どれも「カフェインレスに変更可能」という共通の説明を付けたい時。

これも、実はシンプルです。「`

`を並べる」だけで解決します。

朝のコーヒー

昼のコーヒー

夜のコーヒー

すべてプラス50円でカフェインレスに変更可能です。

「dtが連続している＝これら全部に対して、次のddが説明だよ」というルールが適用されます。個別に同じ説明文を書く必要がないので、修正する時も一箇所直すだけで済みます。スマートですよね！

—

大事なポイント：複雑な時ほど「意味」を大切に

Web制作の現場では、見た目を整えるために`

`で囲みたくなる衝動に駆られることがよくあります。でも、`

`の中に安易に`

`を入れると、マシン（検索エンジンやスクリーンリーダー）が「これは何と何がペアなんだ？」と迷子になってしまうことがあります。

最近のHTML（HTML5.1以降）では、意味の塊ごとに`

`で包むことも許容されていますが、まずは「dtとddの並び順だけで関係性を表せるかな？」と考える癖を付けてみてください。

今日から意識したいこと

• 「dtは用語、ddは説明」というルールを信じる。
• 困ったらタグを並べる。
• 構造が複雑になったら、まずはタグの順序だけで整理できないか試してみる。

—

最後に：完璧を目指さなくても大丈夫

HTMLのマークアップに「絶対の正解」を求めて苦しくなってしまうことはありませんか？

もちろんセマンティクス（意味付け）は大切ですが、一番大切なのは、「その情報を必要としている人が、正しく理解できるかどうか」です。今回ご紹介した「dtとddを並べる」という方法は、ブラウザにとっても読み手にとっても非常に分かりやすい、とても美しい書き方です。

ぜひ、皆さんのプロジェクトでも試してみてくださいね。もし「これってどう書くのが一番きれいかな？」と迷ったら、またいつでも聞きに来てください。Web制作の旅路を、これからも応援しています！