dtとddの違いが分かる！HTML定義リストの正しい使い分け

定義リストは、HTMLで「用語」と「その説明」をセットで表現するための仕組みです。文章の中で言葉の意味を説明したり、項目と内容を対応づけて整理したりする場面で使われます。単なる見た目のリストではなく、情報の関係性を明確に伝えることが主な役割です。

HTMLにおける定義リストの基本的な役割

定義リストとは何を表すものか

定義リストは、HTMLでは dlタグ を使って記述されます。dlは「definition list（定義の一覧）」の略で、その中に dtタグ と ddタグ を組み合わせて使います。

• dtは「definition term（定義される言葉）」
• ddは「definition description（その説明）」

という意味を持っています。つまり、定義リストは「この言葉は、こういう意味です」という対応関係をHTMLの構造として表現するための要素です。

たとえば、専門用語の説明、サービス内容の補足、項目名とその詳細など、「名前」と「説明」が必ずセットになる情報に向いています。見た目だけを見ると箇条書きに似ている場合もありますが、意味としてはまったく別の役割を持っています。

箇条書きとは異なる「意味を持つリスト」

HTMLには複数のリスト表現があります。よく使われるのが、

• ul（順番のない箇条書き）
• ol（順番のある箇条書き）

です。これらは「項目を並べる」ことが主な目的です。一方で定義リストは、「並べる」よりも「対応づける」ことが目的です。
たとえば、次のような情報は定義リスト向きです。

• 用語 → 意味
• 項目名 → 説明文
• 質問 → 回答

このように、左右または上下で「対」になる関係を持つ情報を整理することで、読み手は内容を素早く理解しやすくなります。

読み手にとってのメリット

定義リストを正しく使うと、読む人にとって多くの利点があります。まず、情報の関係性が明確になります。「これは名前」「これは説明」と区別されているため、文章をじっくり読まなくても、どこが重要なキーワードなのかが分かりやすくなります。

また、長い文章の中に定義リストを挟むことで、視覚的な区切りが生まれます。これにより、文章全体が単調になるのを防ぎ、内容を探しやすくなります。特に初心者向けの解説ページや、用語が多い説明ページでは、定義リストがあることで理解の負担が軽くなります。

作り手にとってのメリット

作る側にとっても、定義リストは便利な仕組みです。用語と説明をセットで管理できるため、後から内容を追加・修正しやすくなります。また、「この情報は定義リストとして整理すべきかどうか」を考えることで、文章構成そのものが整理されます。

さらに、HTMLは「意味を持つマークアップ」を重視する言語です。定義リストを使うことで、「この部分は説明用の情報です」という意味をブラウザや支援技術（画面読み上げなど）に正しく伝えることができます。これは、見た目以上に重要なポイントです。

定義リストが活躍する代表的な場面

定義リストは、次のような場面で特に力を発揮します。

• 用語集や専門用語の解説
• サービス内容やプランの説明
• フォーム項目の補足説明
• FAQ形式の「質問と回答」
• 仕様一覧や条件の説明

これらに共通しているのは、「項目名だけでは意味が伝わらず、説明が必要である」という点です。単なる箇条書きでは情報が不足しやすい場合に、定義リストを使うと構造が分かりやすくなります。

見た目ではなく役割で判断する意識

初心者の方が注意したいのは、「見た目が整うから定義リストを使う」という考え方です。HTMLでは、見た目はCSSで調整し、構造や意味はHTMLで表現するのが基本です。定義リストを使うかどうかは、「この情報は用語と説明の関係になっているか」「対応関係を示したいか」という視点で判断します。

この意識を持つことで、HTML全体の書き方が安定し、後から読み返しても分かりやすいコードになります。

定義リスト（dl・dt・dd）の構造と意味

定義リストは、HTMLで「項目」と「説明」を対応づけて表現するための要素です。基本はdlタグの中にdtタグ（項目名）とddタグ（説明）を配置し、情報の関係性を文書構造として示します。見た目の整形が目的ではなく、「どれが見出しのような項目で、どれが説明文なのか」を明確にするのが中心の考え方です。

dl・dt・ddそれぞれの役割

定義リストは3つのタグを組み合わせて作ります。略語が多いので、まず意味を押さえると理解が一気に楽になります。

dl：definition list（定義の一覧）

定義リスト全体の入れ物です。「ここからここまでが、項目と説明のセットの集合です」と示します。

dt：definition term（定義される言葉・項目）

説明される側の言葉や項目名を表します。見出しに近い役割ですが、見出しタグ（h1〜h6）とは別物です。

dd：definition description（説明文）

dtで示した項目についての説明を表します。文章で説明したり、箇条書きで補足したりもできます。

この3つを使うことで、「Aという項目に対してBが説明です」という関係がHTMLとしてはっきり表現できます。初心者の方は、dtを「ラベル」、ddを「内容」と考えるとイメージしやすいです。

基本形の構造（1対1の関係）

最も基本的な形は、dtが1つ、ddが1つの組み合わせです。たとえば用語集のように「用語→意味」を並べたいときに向いています。構造としては次のようなイメージになります。

• dl（全体）
  • dt（用語）
  • dd（説明）
  • dt（用語）
  • dd（説明）

この並びから分かる通り、dlの中ではdtとddが交互に出てくることが多いです。HTMLの読み手（人間）はもちろん、ブラウザや支援技術（画面読み上げなど）にも「これは対応関係のある情報です」と伝えやすくなります。

1つのdtに複数のddを紐づけられる

定義リストの特徴として、1つのdtに対して複数のdd を並べることができます。これは、ある項目について説明が複数の視点に分かれるときに便利です。たとえば、同じ用語に対して「意味」「例」「注意点」を分けて書きたいケースです。

• dt：用語
• dd：意味
• dd：例
• dd：注意点

このように書くと、「同じ項目に対する説明が複数ある」ことが自然に表現できます。ここで気を付けたいのは、複数のddを置く場合でも、同じdtに属していることが読み手に伝わるように、内容の粒度（細かさ）をそろえることです。粒度とは「どのくらい同じレベルの説明になっているか」という感覚で、たとえば「意味」と「注意点」は同じくらいの重さで並べやすい一方、「意味」と「長い歴史的背景」が混ざるとバランスが崩れやすいです。

複数のdtに1つのddを紐づけられる

逆に、複数のdtに対して1つのdd を置く形もあります。これは「同義語」や「別名」など、複数の呼び方があるが説明は同じ、という場面で使えます。

• dt：呼び方A
• dt：呼び方B
• dd：共通の説明

この形を使うと、同じ説明を繰り返さずに整理できます。ただし、読み手が「なぜdtが2つ続いているのか」を理解できるよう、dt同士が同格であること（似た性質の項目であること）を保つのが大切です。

dlの中に入れられる要素と、避けたい配置

定義リストの中に入れるのは、基本的にdtとddです。ddの中には段落（p）や箇条書き（ul/ol）などを入れて説明を豊かにできます。ただし、dlの直下にいきなり本文だけを置いたり、dtやdd以外の要素を乱雑に置いたりすると、構造が分かりにくくなります。

初心者の方が意識すると良いのは次の点です。

• dlの直下は「dt→dd」の対応関係が基本
• 詳しい説明や補足はddの中に入れて整理する
• dtだけ、ddだけが連続する場合は「意図」を説明できる構造にする

「意図を説明できる」というのは、たとえば「同じ説明を共有するためにdtが連続している」「1つの項目を複数の観点で説明するためにddが連続している」と言える状態のことです。見た目が整っているかではなく、構造として筋が通っているかで判断します。

dtと見出しタグ（h2など）を混同しない

dtは「項目名」ではありますが、見出しタグ（h2〜h6）とは役割が違います。見出しタグはページ全体の章立てを作るためのものです。一方、dtは定義リストの中での「ラベル」です。たとえば、ページの大きな区切りはh2で作り、その区切りの中で用語を並べたい場合にdlを置き、各用語をdtで表す、という使い分けになります。

この区別ができるようになると、HTMLの構造が整理され、コードの意味がはっきりします。

定義リストが適している文章構成とは

定義リストは、情報同士が「項目名（ラベル）」と「説明（内容）」のように、はっきり対応している文章構成に向いています。箇条書きのように単に並べるのではなく、「これは何か」「それはどういう意味か」をセットで伝えるときに効果を発揮します。読む人が内容を探しやすく、作る人も情報を整理しやすい形になるのが特徴です。

「対応関係」がある情報を並べるときに強い

定義リストが最も得意なのは、対応関係が明確な情報です。対応関係とは、「Aという項目に対してBが説明になる」という1対1、または1対多の関係のことです。たとえば、次のような文章は定義リスト向きです。

• 用語 → 意味
• 項目名 → 詳細
• 仕様名 → 値や条件
• 質問 → 回答

こうした情報を普通の文章で書くと、読み手は「どこが項目で、どこからが説明なのか」を目で追いながら判断しなければなりません。一方、定義リストにすると、項目（dt）と説明（dd）が構造として分かれるため、視線の移動が少なくなり、理解しやすくなります。

特に、同じ形式の説明が何度も続く場合に効果が大きいです。たとえば「用語が10個あり、それぞれに説明がある」という場面では、定義リストを使うことでページ全体が整い、読み手は必要な用語だけを拾い読みしやすくなります。

FAQ・用語集・仕様一覧などの定番構成

実際のWebページで、定義リストがよく使われる構成にはいくつか定番があります。初心者の方は、この「定番」を先に知っておくと、どの場面で使うか判断しやすくなります。

用語集（グロッサリー）

「用語→説明」という形が繰り返されるので、定義リストと非常に相性が良いです。説明が短くても、用語が多いときほど効果が出ます。
※グロッサリーは「用語集」という意味です。

FAQ（よくある質問）

「質問→回答」がセットになるので、定義リストに自然に当てはまります。質問をdt、回答をddにすると、質問が目立ち、回答がその下で説明として読める形になります。

仕様一覧・条件一覧

「項目名→値」「項目名→条件」のように、短い説明が並ぶ場面で便利です。たとえば、サービスの利用条件、対応環境、料金の内訳など、項目と内容が対になっている情報に向きます。

プロフィールや会社情報の項目整理

「項目名（例：所在地、設立、代表者）→内容」という形で並べられるため、表（テーブル）の代わりに使われることもあります。ただし、数字が並ぶ表形式が必要な場合は別の手段が適切なこともあるので、「項目と説明の文章」という性質かどうかで判断します。

「文章の中の補足説明」を整理したい場合

定義リストは、ページ全体が用語集でなくても活躍します。たとえば長い解説文の途中に、重要な言葉の説明をまとめて置きたい場面があります。文章の流れの中に補足を挟みすぎると、読み手は話の筋を見失いやすいです。そこで、補足説明を定義リストとして一箇所にまとめると、本文は読みやすくなり、必要な人だけが補足を参照できる形になります。

このとき意識したいのは、「本文を成立させたうえで、補足として定義リストを置く」ことです。補足が主役になってしまうと、ページの目的がぶれてしまうため、定義リストはあくまで情報整理のための補助として使うのが安定します。

定義リストが向かない文章構成もある

一方で、定義リストが向かないケースもあります。向かない場面で使うと、かえって読みづらくなるので注意が必要です。

順番が重要な手順説明

「1番目にこれ、2番目にこれ」のように順序が意味を持つ場合は、定義リストよりも順序付きリスト（ol）の方が自然です。定義リストで手順を書くと、順番の強調が弱くなり、読む人が迷いやすくなります。

ただ項目を並べたいだけの箇条書き

「特徴を3つ並べたい」「持ち物を列挙したい」といった場合は、定義リストよりも箇条書き（ul）の方が適しています。定義リストは“説明を伴う”ことが前提なので、説明がない、または極端に短い場合は不自然になりがちです。

項目同士の関係が対になっていない文章

定義リストは対応関係があることが強みです。逆に言えば、対応関係が曖昧な文章を無理やり定義リストにすると、dtとddの境界が不明確になり、読み手は混乱します。「この説明はどの項目にかかっているのか」を明確にできない場合は、定義リスト以外の構造を検討する方が安全です。

判断のためのチェックポイント

定義リストを使うか迷ったときは、次のチェックで判断しやすくなります。

• 「項目名」と「説明」がセットになっているか
• 同じ形式のセットが複数並ぶか
• 読む人が“項目だけ拾い読み”できると便利か
• 順番の意味より、対応関係の意味が重要か

これらに当てはまるほど、定義リストが適した文章構成になっている可能性が高いです。

定義リストと他のリスト（ul・ol）との違い

HTMLには複数のリスト表現があり、代表的なものが「定義リスト（dl）」と「箇条書き（ul）」と「順序付きリスト（ol）」です。どれも“項目を並べる”見た目になりやすい一方で、役割（何を表現するためのものか）が異なります。リストの種類を適切に選べるようになると、HTMLの構造が分かりやすくなり、読み手にも意図が伝わりやすいページになります。

目的の違い：dlは対応関係、ul/olは列挙

まず一番大きな違いは、「何を表現したいか」という目的です。

• dl（定義リスト）：項目（用語・ラベル）と説明（内容）を対応づけて表す
• ul（順番のない箇条書き）：複数の項目を、順番に意味を持たせずに列挙する
• ol（順序付きリスト）：複数の項目を、順番に意味を持たせて列挙する

dlは、項目と説明のセットが基本です。つまり「AはBです」「項目Aの内容はBです」という関係を構造で表します。一方、ul/olは基本的に「項目を並べる」ためのものです。項目の説明が必要な場合もありますが、それは“各項目の中に文章を追加する”形で実現することが多く、項目と説明の対応関係をタグそのもので強く示すのはdlの得意分野です。

ここで「列挙（れっきょ）」という言葉を使いましたが、これは「要素をずらっと並べること」という意味です。ul/olはまさに列挙向きのリストです。

構造の違い：dlはdt・dd、ul/olはli

次に、使うタグの構造が違います。ここを押さえると、混同が減ります。

• dlの中身：dt（項目名） と dd（説明）
• ul/olの中身：li（list item：リストの1項目）

ulとolは、リストの種類（順番なし・順番あり）が違うだけで、中に入るのはどちらもliです。liは「リストの項目」を表すタグで、基本的には同格の項目が並ぶイメージです。
一方、dlは「項目名（dt）」と「説明（dd）」が役割分担されているため、「ラベルと内容」という性質が表現しやすい構造になっています。

たとえば「質問と回答」を並べたい場合、ul/olでも次のように書けますが、質問と回答の境界は文章で表現する必要があります。

• li：質問：〜／回答：〜

これに対してdlなら、質問はdt、回答はddと分けられるので、構造として対応が明確になります。

向いている用途の違い：具体例で整理する

用途を例で整理すると、判断が速くなります。

dlが向いている例

• 用語集（用語→説明）
• FAQ（質問→回答）
• 仕様一覧（項目→値・条件）
• プロフィール情報（項目名→内容）
• 料金内訳（項目→説明）

共通点は、項目だけでは意味が不足し、説明がセットで必要なことです。

ulが向いている例

• 持ち物リスト
• 特徴の列挙
• 注意点の箇条書き
• メニュー項目の一覧

共通点は、順番が重要ではなく、同格の項目を並べたいことです。

olが向いている例

• 手順（1→2→3の順が意味を持つ）
• 優先順位のある並び
• 連続する工程
• 時系列の説明（ステップ形式）

共通点は、順番そのものが情報であることです。

迷いやすい場面：FAQはdl？ul？

初心者が迷いやすいのがFAQです。FAQは見た目だけなら箇条書きにしても成立しますが、「質問」と「回答」の対応関係を明確に示したいならdlが向いています。dlは“項目と説明”の関係を表すため、FAQに当てはめると自然に整理できます。

ただし、FAQが単なるリンク一覧で、回答が別ページにあるだけのような構成なら、dlで説明を付ける必要がないため、ulで十分な場合もあります。つまり、判断の軸は次の通りです。

• 質問に対して、その場で回答を説明する → dlが向きやすい
• 質問は並べるだけで、説明は別の場所にある → ulでも成立しやすい

リスト選びで意識したい「意味の表現」

HTMLで大切なのは、見た目を整える前に「意味」を正しく表すことです。見た目はCSSで変えられますが、意味の選び間違いは構造の崩れにつながります。たとえば、手順説明をdlで書いてしまうと、順番の情報が弱くなりやすいです。逆に、用語集をulで書くと、用語と説明の対応が読み手に伝わりにくくなることがあります。

リスト選びのチェックとして、次を自分に問いかけると判断しやすいです。

• これは「対応関係」を示したいのか（dl）
• これは「順番が不要な列挙」か（ul）
• これは「順番が重要な列挙」か（ol）

この3つを意識できるようになると、dl・ul・olの使い分けが自然にできるようになります。

定義リストを使う際の正しい書き方とルール

定義リストを正しく書くためには、dl・dt・ddの役割を守り、「項目」と「説明」の対応関係が誰にとっても分かる構造にすることが重要です。見た目を整えることよりも、HTMLとして意味が通る並びになっているかを優先すると、後から修正するときも迷いにくくなります。ここでは、定義リストの基本ルールと、実務で崩れにくくするための考え方を整理します。

基本ルール：dlの直下はdtとddで構成する

定義リストは、必ず dlタグ で全体を包み、その中に dtタグ（項目） と ddタグ（説明） を配置します。最も基本の形は「dtの直後にddが続く」構造です。

• dl：定義リスト全体
• dt：項目名（用語、ラベル、質問など）
• dd：説明（意味、内容、回答など）

この並びを守ることで、「どの説明がどの項目に対応するのか」が明確になります。初心者の方がやりがちなミスは、dlの中にいきなり文章を置いてしまったり、dtやddを使わずに別のタグで置いてしまったりすることです。dlは“定義リスト専用の入れ物”なので、基本はdtとddで構造を作り、詳細な説明はddの中に入れる、と考えると整理しやすいです。

また、dtとddは「セットで使う」という意識が大切です。dtだけが並ぶ、ddだけが並ぶ、という状態は、意図がはっきりしていない限り避けた方が安全です。

ルール：1つのdtに対して複数のddを使う場合の考え方

定義リストでは、1つのdtに対して複数のdd を並べることができます。これは、ある項目の説明を複数の観点に分けたいときに有効です。たとえば、同じ用語について「意味」「具体例」「注意点」を分けて説明するような場面です。

このときのルールとして意識したいのは、複数のddが「同じdtの説明として並んでいる」と読み手に伝わることです。そのために、ddの内容を次のように揃えると分かりやすくなります。

• ddの冒頭の書き方を揃える（例：「意味：」「例：」「注意：」のように区別する）
• ddの粒度（説明の重さ）を極端にばらつかせない
• ddを増やしすぎない（読みやすさを優先する）

粒度とは「どれくらい同じレベルの情報か」という意味です。たとえば「意味」だけ短くて「注意点」だけ長文、という状態になると、同じ階層に並んでいるのに重さが違いすぎて読みづらくなることがあります。その場合は、説明の構成を見直したり、別の見出しで章立てしたりする方が適切なこともあります。

ルール：複数のdtを1つのddに対応させる場合の注意

逆に、複数のdtに対して1つのdd を置く書き方もできます。これは、同じ説明を共有する複数の項目がある場合に役立ちます。たとえば、別名や同義語があり、説明が共通になるケースです。

ただし、この形は読み手が「dtが続いている理由」を理解できないと混乱しやすいので、dt同士が同格であることが重要です。同格とは「同じ種類の項目」という意味で、別名や言い換えのように、同じ対象を指している場合に向きます。もしdt同士が別の種類の情報になっていると、「どのdtに対する説明なのか」が曖昧になり、定義リストの良さが失われます。

ルール：ddの中で説明を整理する（文章・箇条書き・補足）

ddは説明を入れる場所なので、文章をしっかり書くことができます。説明が長くなる場合は、ddの中で段落を分けたり、箇条書きを使ったりして整理すると読みやすくなります。ここでいう段落とは、文章のまとまりを作る単位で、段落タグ（p）などで表現します。

ddの中でよく使われる整理の方法は次の通りです。

• まず短い説明文を置く（全体像を伝える）
• 次に箇条書きで要点を並べる
• 必要なら追加の補足文を置く

このように、ddの中で情報を“読みやすい順番”に並べると、定義リストが単なる説明の羅列ではなく、理解しやすい教材のような形になります。

一方で、ddの中を複雑にしすぎると、dlのメリットである「項目と説明の対応がすぐ分かる」という良さが薄れることもあります。ddに詰め込みすぎていると感じたら、そもそも項目の分け方（dtの数や内容）を見直すのが有効です。

ルール：見出し（h2など）と定義リストの役割を分ける

dtは項目名を表しますが、ページ全体の章立てを作る見出し（h2〜h6）とは役割が異なります。見出しはページの大きな構造を作り、定義リストはその章の中で「項目と説明」を整理するための仕組みです。

たとえば、ページに「用語集」というh2があり、その中で用語をdt、説明をddとして並べる、という使い分けが自然です。もしdtを見出しの代わりに乱用してしまうと、ページの章立てが曖昧になり、読み手が全体像を把握しづらくなります。

実務で崩れないためのチェックポイント

最後に、正しい書き方を守れているかを自分で確認するためのチェックポイントを示します。

• dlの直下がdtとddで整理されているか
• dtとddが「どれが対応しているか」すぐ分かるか
• dtだけ、ddだけが続く場合に意図を説明できるか
• ddの中が読みやすく整理されているか
• dlの用途が「項目と説明の対応関係」になっているか

このチェックを通すことで、定義リストを“見た目の都合”ではなく“意味のある構造”として使えるようになります。

定義リストのよくある間違いと注意点

定義リストは「項目（dt）」と「説明（dd）」の対応関係を表現できる便利な仕組みですが、書き方を誤ると対応関係が崩れ、読み手にとって分かりにくいHTMLになってしまいます。特に初心者の方は、見た目を整えたい気持ちから定義リストを選んだり、dl・dt・ddの役割を混同したりしやすいです。ここでは、ありがちな間違いを具体的に挙げ、どう直すと良いかを整理します。

間違い1：見た目が整うからという理由でdlを選ぶ

定義リストは、箇条書き（ul）と似た見た目になることがあり、「なんとなく見栄えが良いからdlにした」という選び方をしてしまうことがあります。しかし、HTMLの基本は「意味を正しく表す」ことです。dlは“項目と説明の対応関係”があるときに使うものなので、対応関係がない単なる列挙に使うと不自然になります。

たとえば、持ち物リストや特徴の列挙のように、説明が不要で項目を並べたいだけならulが向いています。手順のように順番が重要ならolが向いています。dlを使う前に「これは項目と説明のセットになっているか」を必ず確認すると、目的と手段がズレにくくなります。

間違い2：dlの中にdt・dd以外の要素を直置きしてしまう

初心者の方がよくやるのが、dlの中にいきなり文章を置いてしまう形です。dlは定義リストの入れ物で、基本はdtとddで構造を作ります。説明文や補足はddの中に入れるのが自然です。

たとえば、「用語集」というdlの中に、導入文をそのまま書いてしまうと、どこからが項目でどこからが説明なのかが曖昧になります。導入文が必要なら、dlの外に段落として置くか、dlの直前に説明文を置くと整理しやすいです。

また、dtやddの代わりにdivなどで似た見た目を作ろうとすると、定義リストの意味が失われます。divは「意味を持たない汎用の箱」で、レイアウト調整に使われることが多い要素です。意味を表したい場面では、dl・dt・ddのような適切な要素を使う方が、後から見たときに理解しやすくなります。

間違い3：dtとddの対応が分かりにくい並びになっている

定義リストの価値は「対応関係が明確になること」ですが、並び方が悪いと逆に分かりにくくなります。典型的には次のような状態です。

• dtが何個も続いて、その後にddがまとめて続く
• ddが長文で、どのdtに対応しているのか見失う
• dtとddの数のバランスが崩れていて意図が分からない

dlはルールとして、dtが連続することも、ddが連続することも可能です。ただし、その場合は「なぜ連続しているのか」を構造として説明できる必要があります。たとえば、複数のdtが同じ意味（別名や同義語）で、同じddを共有しているなら合理的です。逆に、特に理由もなくdtが連続しているだけだと、読み手は「説明がどこにあるのか」と迷いやすくなります。

改善の考え方としては、基本形である「dtの直後にdd」を守り、例外の形（dtが連続、ddが連続）を使うときは、内容の意図が明確な場合に限るのが安全です。

間違い4：ddが短すぎて“説明”になっていない

定義リストは説明がセットになる前提なので、ddが極端に短いと、わざわざdlを使う意味が薄くなります。たとえば、ddが1語だけで終わる場合、情報として不足している可能性があります。

もちろん「項目名→値」という仕様一覧では、ddが短いケースもあります。ただ、その場合でも「値」「単位」「条件」などが明確で、読み手が理解できる形になっていることが大切です。もしddが短すぎて説明として成立しないなら、次のどちらかを検討すると良いです。

• ddに補足文や条件を追加して説明として成立させる
• そもそも説明が不要ならulなど別のリストに変更する

間違い5：dtを見出し（h2など）の代わりに使ってしまう

dtは項目名であり、ページ全体の章立てを作る見出しタグ（h2〜h6）とは別の役割です。dtは「定義リスト内のラベル」に過ぎないため、ページの大きな構造までdtで表現してしまうと、文書の骨組みが分かりにくくなります。

たとえば、ページの大見出しをdtで書いてしまうと、見出しとしての意味が弱くなり、文章の全体構造が崩れます。見出しは見出しタグで作り、その章の中で用語や項目を整理したいときに定義リストを使う、という役割分担を守るのが基本です。

間違い6：dlを“表（テーブル）”の代わりに乱用する

定義リストは「項目と説明」に強いですが、数値が多い比較表や、行と列で整理する必要があるデータには向きません。そうした情報をdlに詰め込むと、対応関係が複雑になり、読み手が比較しにくくなります。

判断の目安として、次のように考えると分かりやすいです。

• 「項目名→説明文」で自然に読める → dlが向きやすい
• 「複数の項目を横並びで比較したい」「列の概念が必要」 → dlは向きにくい

dlは文章的な説明の整理に強い、と覚えると選びやすくなります。

自己チェックに使える確認ポイント

定義リストを書いたあと、次の確認を行うとミスを早めに見つけやすいです。

• dtを見ただけで「何の説明か」が分かるか
• ddを読んだとき「どのdtの説明か」が迷わず分かるか
• dlを使う理由が「対応関係を示すため」と言えるか
• dlの中がdtとdd中心で整理されているか

この確認が通るなら、定義リストとしての意味が成立している可能性が高いです。

定義リストを使った実践的なHTML記述例

定義リスト（dl）は、「項目（dt）」と「説明（dd）」が対応する情報を、HTMLの構造として分かりやすく表現できます。実務で使うときは、見た目よりも「対応関係が明確になっているか」「dtとddの役割が守られているか」を重視すると安定します。ここでは、初心者の方がよく作るページを想定し、定義リストの典型パターンを複数紹介します。コード例はHTMLのみを扱い、見た目の調整はCSSで行う前提で“構造が正しいこと”に焦点を当てます。

例1：用語集を作る（1対1の基本形）

用語集は定義リストの代表例です。用語（dt）と説明（dd）を繰り返すだけで、読みやすい構造になります。

<h2>用語集</h2>
<p>本文で登場する用語を簡単に説明します。</p>

<dl>
  <dt>HTML</dt>
  <dd>Webページの構造を作るための言語です。見出しや段落などの意味をタグで表現します。</dd>

  <dt>CSS</dt>
  <dd>Webページの見た目を指定する仕組みです。文字サイズや色、余白などを調整できます。</dd>

  <dt>タグ</dt>
  <dd>HTMLで要素の役割を示すための記号です。多くの場合、開始タグと終了タグで囲みます。</dd>
</dl>

この例では、dlの直下がdtとddで整理され、dt→ddの対応がすぐ分かります。用語集は項目数が増えても構造が崩れにくいので、初心者の練習にも向いています。

例2：FAQ（よくある質問）を作る（質問→回答）

FAQは「質問」と「回答」の対応関係がはっきりしているため、定義リストと相性が良いです。質問をdt、回答をddにします。

<h2>よくある質問</h2>
<p>お問い合わせの多い内容をまとめています。</p>

<dl>
  <dt>登録に料金はかかりますか？</dt>
  <dd>登録は無料です。利用する機能によって有料プランが必要になる場合があります。</dd>

  <dt>パスワードを忘れた場合はどうすればよいですか？</dt>
  <dd>パスワード再設定の手順に沿って、登録メールアドレスから再設定できます。</dd>

  <dt>スマートフォンでも利用できますか？</dt>
  <dd>スマートフォンのブラウザから利用できます。画面サイズに応じて表示が変わることがあります。</dd>
</dl>

質問文は長くなりやすいですが、dtとして並べることで質問が目立ち、回答はddとして自然に説明の位置に入ります。FAQを読みたい人は質問だけ拾い読みすることも多いので、dtが一覧として機能しやすいのも利点です。

例3：1つの項目を複数の観点で説明する（1つのdtに複数dd）

1つの用語について「意味」「例」「注意点」を分けたい場合は、1つのdtに対してddを複数並べられます。ここでは、読み手が混乱しないように、各ddの冒頭にラベルを付けています。

<h2>重要用語の説明</h2>
<p>用語を複数の観点で整理します。</p>

<dl>
  <dt>属性（ぞくせい）</dt>
  <dd>意味：タグに追加情報を付ける仕組みです。</dd>
  <dd>例：リンク先を指定するためにhrefのような属性を使います。</dd>
  <dd>注意：属性名と値の書き方を間違えると意図した動作になりません。</dd>
</dl>

この形のポイントは、ddが複数あっても「同じdtに属する説明」であることが伝わるようにすることです。ラベルを付ける、文章の粒度をそろえるなどの工夫があると読みやすくなります。

例4：複数の呼び方を1つの説明にまとめる（複数dt→1つdd）

同じ意味を持つ別名や、呼び方が複数ある場合は、複数のdtに対して1つのddを共有できます。読み手にとっても「この2つは同じ説明で良い」と分かりやすくなります。

<h2>表記ゆれ・別名</h2>
<p>同じ意味の呼び方をまとめて説明します。</p>

<dl>
  <dt>ログイン</dt>
  <dt>サインイン</dt>
  <dd>どちらもサービスに利用者として入り、利用を開始できる状態にすることを指します。</dd>
</dl>

この場合、dtが続くことには意味があります。「別名なので説明は共通」という意図が明確だからです。逆に、無関係な項目でdtを連続させると対応が分かりにくくなるため、この形は使いどころを選ぶのが大切です。

例5：項目名→説明を“情報カード”のように整理する（プロフィール・会社情報）

プロフィールや会社情報など、「項目名」と「内容」を対にして並べたい場合にも定義リストは使えます。説明が短くても成立しやすい構成です。

<h2>会社情報</h2>
<p>基本情報を項目ごとに整理します。</p>

<dl>
  <dt>会社名</dt>
  <dd>サンプル株式会社</dd>

  <dt>所在地</dt>
  <dd>東京都〇〇区〇〇</dd>

  <dt>事業内容</dt>
  <dd>Webアプリケーションの企画・開発</dd>
</dl>

この例ではddが短めですが、「項目名→値」という関係が明確で、説明として成立しています。もし内容が長くなる場合は、ddの中で段落を分けたり、箇条書きを使ったりして整理できます。

例6：定義リストの中で説明を整理する（dd内の箇条書き）

説明が複数の要点に分かれる場合は、ddの中で箇条書きを使うと読みやすくなります。dlの構造を崩さずに、説明の中身だけを整理できるのがポイントです。

<h2>プランの説明</h2>
<p>各プランの特徴を整理します。</p>

<dl>
  <dt>無料プラン</dt>
  <dd>
    <ul>
      <li>基本機能の利用が可能です。</li>
      <li>サポートは一部機能に限定されます。</li>
      <li>利用上限が設定される場合があります。</li>
    </ul>
  </dd>

  <dt>有料プラン</dt>
  <dd>
    <ul>
      <li>追加機能を利用できます。</li>
      <li>サポート範囲が広がります。</li>
      <li>利用上限が緩和される場合があります。</li>
    </ul>
  </dd>
</dl>

このように、ddの中でulを使うのは自然な使い方です。定義リストは「項目と説明の対応」を担当し、説明の中の要点整理は箇条書きが担当する、という役割分担ができるため、情報量が多いページでも整理しやすくなります。

まとめ

この記事では、HTMLの定義リストを「項目」と「説明」の対応関係を表現するための仕組みとして扱い、dl・dt・ddの役割、適した文章構成、他のリストとの違い、正しい書き方、ありがちな間違い、実践例までを整理しました。定義リストは見た目を整えるための道具ではなく、情報の関係性を文書構造として明確にすることが目的です。

定義リストの役割と基本構造

定義リストはdlで全体を包み、項目をdt、説明をddで表します。dtは「説明される側の項目名」、ddは「その説明文」であり、用語→意味、質問→回答、項目名→詳細といった対応がはっきりした情報に向いています。dlの直下は基本的にdtとddで構成し、どの説明がどの項目に対応するかがすぐ分かる並びにすることが重要です。

使いどころの判断と他のリストとの違い

定義リストが適しているのは、対応関係を示したい場面です。一方、単純な列挙にはul（順番なし）、手順のように順番が重要な内容にはol（順序あり）が向いています。見た目が似ていても、dlは「対応関係」、ul/olは「列挙」という目的の違いがあるため、情報の性質に合わせて選ぶとHTMLの意味が明確になります。

正しい書き方のルールと崩れを防ぐポイント

dlを使う理由が「項目と説明の対応関係を表すため」になっているかを確認し、dtとddをセットで扱う意識が大切です。1つのdtに複数のddを付ける場合は、観点（意味・例・注意点など）を揃えて読み手が混乱しないようにします。複数のdtを1つのddに対応させる場合は、別名や同義語など、説明を共有する合理的な理由があるときに限定すると分かりやすくなります。説明が長い場合はddの中で段落や箇条書きを使って整理し、dlの「対応関係」を見失わない構成にします。

よくある間違いと実践への落とし込み

定義リストの典型的な失敗は、見た目の都合でdlを選ぶこと、dlの中にdt・dd以外を直置きして構造を崩すこと、dtとddの対応が曖昧になる並びにすること、dtを見出しの代わりに使ってページ構造を曖昧にすることです。実践例としては、用語集、FAQ、仕様や基本情報の整理、1項目を複数観点で説明する形、dd内で箇条書きを使って要点を整理する形などが代表的で、いずれも「項目」と「説明」のセットが明確になるように設計します。