「リスト」は「箇条書き」だけじゃない！dl/dt/ddタグでWebサイトを賢く整理するコツ
HTMLを学び始めると、最初にぶつかるのがリストタグですよね。`
- `（中身がない箇条書き）や `
- `、`
- `という少し変わった名前のタグたち、実はまだ使いこなせていない……という方も多いのではないでしょうか？
今日は、この「記述リスト（Description List）」と呼ばれるグループが、実はWebサイトの構造を劇的にきれいに、そして賢く見せてくれる魔法のタグだということをお話しします。難しく考える必要はありません。身近な例で一緒に紐解いていきましょう！
—
1. そもそも dl/dt/dd って何者？
この3つのタグは、「セットで使う」のが基本ルールです。まずは名前を紐解いてみましょう。
- `
- ` (Description List)
- `
- ` (Description Term)
: 「用語」。リストの「タイトル」や「見出し」になる部分です。 - `
- ` (Description Details)
: 「詳細」。その「用語」に対する「説明」や「答え」です。
身近な例：スーパーの買い物リスト
例えば、スーパーの特売チラシを思い浮かべてください。
- 卵: 1パック 198円
- 牛乳: 1本 228円
これ、HTMLで書くならまさに `
- ` の出番なんです。「卵」が用語（dt）で、「198円」が詳細（dd）。どうです？ 箇条書きよりも、ぐっと意味が伝わりやすそうですよね。
- 名前
- 田中 太郎
- 趣味
- フロントエンド開発
- 好きな言語
- HTML, CSS, JavaScript
- Q. サイトの表示が崩れます
- A. ブラウザのキャッシュをクリアして再読み込みしてみてください。
- Q. 納期はどれくらいですか？
- A. プロジェクトの規模によりますが、通常は3週間ほどです。
- ` の中に複数の `
- ` があっても、あるいはその逆があってもHTMLのルール上は問題ありません。Web制作に「絶対にこうしなければいけない」という正解は一つではないことも多いですから、まずは「意味を込めてタグを選ぶ」という体験を楽しんでみてくださいね。
—
まとめ：あなたのコードに「意味」を吹き込もう
`dl/dt/dd` を使いこなすと、HTMLが驚くほどスッキリと読みやすくなります。
1. `
- ` で全体を囲む。
- ` で項目を書く。
- ` で詳細を書く。
2. `
3. `たったこれだけのことですが、これが積み重なると、あなたの書くコードは「ただ動くもの」から「人に伝わるプロのコード」に変わっていきます。
今日から、身の回りの情報を「これはdlで書けるかな？」と観察する癖をつけてみてください。きっと、Webを見る目が少し変わってきますよ！応援しています！
—
2. 実践！こんな場面で使ってみよう
「用語と説明」以外にも、このタグは非常に優秀な働きをしてくれます。いくつかパターンを見てみましょう。
パターンA：メタデータ（プロフィールなど）
ユーザーのプロフィールや、商品のスペック表など、「項目名：内容」というペアには最適です。
パターンB：Q&A（よくある質問）
FAQページを作る時、`
- `でマークアップしてしまう人が多いのですが、実は `
- ` が正解です。質問が「用語」、回答が「詳細」だからです。
—
3. なぜ ` ` じゃダメなの？
「別に `
` で囲んでCSSで整えればいいじゃん！」と思うかもしれません。確かに見た目は作れます。でも、「セマンティック（意味論）」という観点では、タグを正しく選ぶことがとても大切なんです。例えば、検索エンジン（Googleさんなど）は、Webページを読み込むときに「ここはQ&Aなんだな」「ここはスペック表なんだな」という意味をタグから読み取っています。
正しいタグを使うことは、「コンピューターに、この情報の意味を正しく伝えること」。これが、結果的にSEO（検索順位）の向上や、アクセシビリティ（誰にでも使いやすいサイト作り）に繋がるんです。
—
4. 挫折しないためのワンポイントアドバイス
ここまで読んで「なんだか難しそう…」と感じたあなた、大丈夫ですよ！
最初は完璧を目指さなくてOKです。「項目名と内容がセットになっているな」と思ったら、まずは `
- ` を使ってみる。もし迷ったら、「これは箇条書き（ul）かな？ それとも用語と説明（dl）かな？」と自分に問いかけてみてください。
もし、`
- `
- `（順序がある箇条書き）は、メニューを作るときによく使うので馴染みがあるはずです。
でも、`
- `、`
コメント