HTMLのdl・dt・ddタグの使い方を整理｜定義リストの正しい記述ルール

HTMLで情報を整理する際、箇条書きとしてよく利用されるのがulタグやolタグです。

しかし、項目名とその説明を対にして表現したい場合には、「記述リスト（定義リスト）」と呼ばれるdlタグ、dtタグ、ddタグの組み合わせが非常に有効です。

これらのタグを正しく使い分けることで、検索エンジンやスクリーンリーダーに対しても、情報の構造を明確に伝えることが可能になります。

本記事では、2026年現在のWeb標準に基づいた、定義リストの正しい記述ルールと効果的な活用方法について詳しく整理していきます。

HTMLのdl・dt・ddタグの基本概念

まずは、それぞれのタグがどのような役割を持っているのかを確認しましょう。

各タグの役割と意味

定義リストは、3つのタグがセットになって一つの構造を形成します。

• dl（Description List）：リスト全体を囲むコンテナ要素です。
• dt（Description Term）：説明される項目名（用語）を指定します。
• dd（Description Details）：項目名に対する具体的な説明や定義を記述します。

以前のHTML規格では「定義リスト」と呼ばれていましたが、現在のHTML5以降では「記述リスト」という名称が一般的になっています。

これは、用語の定義だけでなく、メタデータの表示やFAQなど、より幅広い用途で利用されることを想定しているためです。

基本的な構文ルール

最もシンプルな記述方法は、一つのdtに対して一つのddを配置する形式です。

<dl>
  <!-- 項目名 -->
  <dt>HTML</dt>
  <!-- 説明文 -->
  <dd>Webページを作成するためのマークアップ言語です。</dd>
</dl>

ブラウザのデフォルト表示では、dd要素に左側の余白（インデント）が設定されることが一般的です。

定義リストの正しい記述ルールと親子関係

記述リストを使用する際には、HTMLの仕様に基づいたいくつかの重要なルールが存在します。

dtとddの対応関係について

dtとddは必ずしも1対1である必要はありません。

一つの項目に対して複数の説明がある場合は、一つのdtに対して複数のddを記述できます。

<dl>
  <dt>リンゴ</dt>
  <dd>バラ科リンゴ属の果実。</dd>
  <dd>甘みと酸味が特徴で、生食や調理に用いられる。</dd>
</dl>

逆に、複数の用語が同じ説明を持つ場合には、複数のdtに対して一つのddを配置することも可能です。

<dl>
  <dt>コーヒー</dt>
  <dt>カフェラテ</dt>
  <dd>これらは店内で提供される飲料メニューです。</dd>
</dl>

このように、情報の性質に合わせて柔軟に対応関係を構築できるのが記述リストの特徴です。

divタグによるグループ化

HTML5.2以降、dl要素の直下でdtとddのセットをdivタグで囲むことが正式に認められました。

これはCSSでのスタイリング、特にFlexboxやGridレイアウトを適用する際に非常に便利な仕様です。

<dl>
  <div class="list-item">
    <dt>著者</dt>
    <dd>山田 太郎</dd>
  </div>
  <div class="list-item">
    <dt>発行日</dt>
    <dd>2026年5月1日</dd>
  </div>
</dl>

従来はdlの直下にはdtかddしか置けなかったため、デザインの調整が困難な場面が多くありました。

divでラップすることで、各セットに枠線を付けたり、横並びにしたりといった装飾が容易になります。

記述リストを活用すべき具体的なケース

どのようなコンテンツにdlタグを使用すべきか、代表的な事例を挙げます。

用語集や辞書形式のコンテンツ

本来の用途である「用語の定義」には、記述リストが最適です。

特定のキーワードをdtに、その意味をddに配置することで、検索エンジンに情報の関連性を正しく伝えられます。

FAQ（よくある質問と回答）

Q&Aセクションは、記述リストの構造と非常に相性が良いコンテンツです。

質問内容をdt、回答内容をddとしてマークアップします。

<dl class="faq-list">
  <dt>支払方法は何がありますか？</dt>
  <dd>クレジットカード、銀行振込、コンビニ決済がご利用いただけます。</dd>
  <dt>送料はいくらですか？</dt>
  <dd>全国一律500円となります。1万円以上のご購入で無料です。</dd>
</dl>

このように構成することで、質問と回答のペアが意味的に結びつきます。

製品仕様やメタデータの表示

商品のスペック表や、記事の更新情報などの表示にも適しています。

アクセシビリティとSEOにおけるメリット

意味のあるHTML（セマンティックHTML）を記述することは、Webサイトの品質向上に直結します。

スクリーンリーダーへの配慮

視覚障害者が利用するスクリーンリーダーは、dlタグを検知すると「記述リストの開始」を通知します。

また、リスト内の項目数や、現在どの用語の説明を読み上げているかをユーザーに把握させやすくします。

単なるdivタグとspanタグの組み合わせでは、このような支援機能は働きません。

検索エンジン最適化（SEO）への影響

Googleなどの検索エンジンは、HTMLの構造を解析してコンテンツの重要度を判断します。

dtで定義された単語がそのページにおける重要なキーワードであると認識されやすくなり、適切な検索結果に表示される可能性が高まります。

情報の「名前」と「値」を明確に分ける記述リストは、データの構造化において非常に重要な役割を担います。

CSSを用いた記述リストのスタイリング

デフォルトのスタイルでは使いにくい場合が多いため、CSSで見た目を整えるのが一般的です。

横並びのレイアウト（Flexboxの活用）

項目名と説明を1行に並べたい場合は、divで囲った構造に対してFlexboxを適用します。

.list-item {
  display: flex;
  border-bottom: 1px solid #ccc;
  padding: 10px 0;
}

.list-item dt {
  width: 150px;
  font-weight: bold;
}

.list-item dd {
  flex: 1;
  margin-left: 0;
}

このスタイルを適用することで、表形式に近い整ったレイアウトが実現できます。

ddにはブラウザ特有のmargin-leftがついていることが多いため、margin: 0;でリセットすることを忘れないようにしましょう。

グリッドレイアウトによる複雑な構成

レスポンシブデザインにおいて、PCでは横並び、スマホでは縦並びにする場合はdisplay: grid;も有効です。

dl {
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: 10px;
}

@media (max-width: 600px) {
  dl {
    grid-template-columns: 1fr;
  }
}

CSS Gridを使用すれば、divで囲まなくてもdl直下のdtとddを綺麗に配置することができます。

よくある間違いと注意点

記述リストを使用する際に陥りやすいミスについても触れておきます。

見出しタグ（h2〜h6）の配置場所

dtタグの中にh2やh3などの見出しタグを入れることは、HTMLの仕様上推奨されません。

基本的には、記述リスト全体に対する見出しをdlの前に配置するか、dtの中には見出しタグを入れずにテキストのみを記述するのが正しい形です。

もし項目ごとに見出しが必要なほど情報量が多いのであれば、記述リストではなく、通常のセクション構造（sectionタグと見出しタグ）を検討すべきです。

リスト以外の用途での乱用

デザイン上のインデント（字下げ）を目的としてddタグを使用するのは誤りです。

意味的な繋がりがない情報に対してdl構造を適用すると、アクセシビリティを損なう原因となります。

単に余白を作りたいだけであれば、CSSのmarginやpaddingを使用するようにしましょう。

まとめ

HTMLのdl、dt、ddタグは、情報の「項目」と「内容」を論理的に結びつけるための重要な要素です。

正しいルールに従ってマークアップすることで、SEO効果やアクセシビリティの向上が期待できます。

特に、HTML5.2から認められたdivタグによるグループ化を活用すれば、複雑なデザインにも柔軟に対応可能です。

単なる箇条書きではなく、意味の対を表現したい場面では、積極的に記述リストを活用していきましょう。

まずは、サイト内の会社概要やFAQ、製品スペックなどの箇所から記述リストへの置き換えを検討してみてください。

適切なタグ選びこそが、美しくメンテナンス性の高いWebサイトを構築するための第一歩となります。