【入門編】dt要素（用語の定義） – HTML実践ガイド

こんにちは！フロントエンドの世界へようこそ。

HTMLを学び始めると、`

`、`

`のトリオです。

特にその中の`

`（ディーティー）。こいつの正体と、使い方の「ちょっとしたコツ」を、今日は一緒に紐解いていきましょう。

—

` `は「見出し」じゃなくて「用語」なんです

HTMLを書き始めたばかりの頃、「これ、見出しだから`

`でいいんじゃない？」とか「太字にしたいから``でいいや」なんて思ってしまうこと、ありますよね。大丈夫、みんな最初はそこから始まります！でも、ちょっと待ってください。例えば「料理のレシピ」を想像してみてください。材料：卵内容： 2個この「卵」という言葉。これは単なる見出しではなく、「これから解説する対象（用語）」ですよね。このように「名前と説明」というセットをマークアップするために存在するのが` `（Description List：定義リスト）という箱であり、その中の名前部分が` `（Description Term：定義される用語）なんです。辞書をイメージしてみよう

`

`を「辞書」だと思ってください。

`
`：辞書そのもの

`
`：見出し語（「りんご」とか「HTML」とか）

`
`：その意味や説明

こう考えると、役割がスッキリしませんか？

—

複数の` `を並べてもいいの？

さて、ここからが今日の本題。「一つの説明に対して、呼び名が複数ある場合はどうするの？」という疑問です。

例えば、「PC」と「パソコン」。どちらも同じ意味ですよね。こんな時、無理やり一つに絞る必要はありません。HTMLでは、`

`を縦に並べて書いてもOKなんです。

PC

パソコン

パーソナルコンピュータの略称。個人の作業や計算のために使用される汎用的なコンピュータのこと。

このように書くことで、「PCという言葉も、パソコンという言葉も、この説明（`

`）を指しているんだよ」という関係性が、検索エンジンやブラウザにもしっかりと伝わります。

—

つまずきやすいポイント：見た目だけで選ばないで

初心者の頃に一番やってしまいがちなのが、「CSSで横並びにしたいから」という理由だけで`

`と`

`を使うことです。

逆に、「見た目が気に入らないから」といって`

`で代用してしまうのも、実は少しもったいないことなんです。`

`と`

`を正しく使うと、Googleなどの検索エンジンが「あ、これは用語集なんだな」「これはQ&Aなんだな」と内容を深く理解してくれるようになります。これが、いわゆる「セマンティクス（意味論）」の力です。

実践：こんな風に使ってみよう

よくある「Q&A」の形式も、このタグたちの得意分野です。

Q. 納期はどれくらいかかりますか？

A. 通常、ご依頼から1週間程度でお届けいたします。

Q. 送料はかかりますか？

A. 5,000円以上のお買い上げで無料となります。

—

まとめ：HTMLは「お手紙」のようなもの

HTMLタグを書くとき、私はいつも「これ、受け取る相手（ブラウザや検索エンジン）に内容が正しく伝わるかな？」と考えるようにしています。

`

`は、まさに「ここが用語ですよ！」と相手に指差し確認してあげるための大切なマークです。最初は使い分けに迷うこともあるかもしれませんが、「名前と説明のペアだな」と気づけたなら、あなたはもう立派なHTMLユーザーです。

難しく考えすぎず、まずは身の回りの情報を`

`で整理する練習から始めてみてください。きっと、コードを書くのがもっと楽しくなるはずですよ！

もし、「ここはどう書けばいいの？」と迷ったら、いつでもまた聞きに来てくださいね。あなたのWeb制作ライフを心から応援しています！