【入門編】dl, dt, ddのセマンティックな使い分け – HTML実践ガイド

Webサイトを作っていると、真っ先に覚えるのが `

でも、ふと「あれ、これってただの箇条書きじゃないよな……」と手が止まる瞬間はありませんか？例えば、辞書のような「言葉と意味」の並びや、オンラインショップの「商品情報」など。

そんな時、HTMLの世界には「dlタグ」という心強い味方がいます。今回は、この `dl`, `dt`, `dd` という少しマイナーだけれど非常に優秀なトリオについて、現場の知見を交えて優しく解説しますね。

—

` は「関連付け」を伝えるためのタグです。

これだけだと少し硬いですよね。もっと身近な例で考えてみましょう。

カフェで黒板に書かれたメニューを想像してください。「カフェラテ：500円」「サンドイッチ：700円」。
これは「項目名（カフェラテ）」と「詳細（500円）」という、切っても切れないペアになっていますよね。こういうものこそ、`dl` の出番なんです。

—

実は最近のHTML仕様（HTML5以降）では、この `dl` の役割が少し広がりました。単なる辞書だけではない、モダンな使いこなし方をご紹介します。

まずは王道。辞書のような形式ですね。

オンラインショップで、商品の詳細スペックがずらっと並んでいるのを見たことはありませんか？あれも `dl` で書くのが一番きれいで、検索エンジンにも「これはスペック情報ですよ！」と正しく伝わります。

これは意外かもしれませんが、実は会話のログにも使えるんです。ブラウザが「誰が言ったことか」を理解しやすくなるので、チャットツールのようなものを作るときには最適です。

—

「`dl` の中に `div` を入れてもいいの？」という質問をよく受けます。
結論から言うと、「大丈夫です！」。

最近のデザインでは `dt` と `dd` を横並びにしたり、グループごとに背景色をつけたりしたくなりますよね。そんな時は、`dt` と `dd` をセットで `

` で囲んでしまってもHTMLのルール違反にはなりません。安心してくださいね。

—

Web制作を始めたばかりの頃は、「どう見せるか（CSS）」ばかり気になってしまうものです。でも、HTMLは「これは何の情報なのか」という手紙の宛先を書くようなものです。

`dl`, `dt`, `dd` を正しく使うことで、Googleの検索ロボットや、視覚障害の方が使う読み上げソフトに対して「ここは商品のスペックですよ」「ここは会話のログですよ」と、優しく教えてあげることができます。

最初から完璧にできなくても大丈夫。まずは「あ、この項目と説明はペアだな」と思ったら、`ul` ではなく `dl` を思い出してみてください。その小さな心遣いが、あなたの書くコードを世界で一番美しいものにしていきますよ。

それでは、また次回の記事でお会いしましょう！コーディングを楽しんでくださいね。

コメント