この内容は古いバージョンです。最新バージョンを表示するには、戻るボタンを押してください。
バージョン:4
ページ更新者:guest
更新日時:2026-06-11 07:29:05

タイトル: dd 要素
SEOタイトル: HTML dd 要素 完全ガイド（定義リスト / dt との関係 / 入れ子 / 用語集 / FAQ への応用 / アクセシビリティ）

この記事の要点
  • （description / definition data）は 定義リスト（
    ）の中で「説明」を表す要素
  • 対になる要素は
    （用語）。
    に対する説明として 1 つ以上の
    を続ける
  • 1 つの用語に対して複数の
    を並べても良い（用語に複数の意味がある場合など）
  • 用語集 / FAQ / メタデータ表示に適している。リスト構造として意味付けされるためアクセシビリティ的にも良好
  • デフォルトでは左に余白が付くが、CSS で margin-left:0 や grid で自由にレイアウト可能

dd 要素とは

（description details / definition data）は定義リスト（
）の中で用語の説明を表す要素です。
（用語）と組み合わせて使い、「用語 : 説明」という構造をマークアップするのに使います。

基本構文

<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language の略。ウェブページを構造化するためのマークアップ言語。</dd>

  <dt>CSS</dt>
  <dd>Cascading Style Sheets の略。HTML 要素の見た目を指定するスタイルシート言語。</dd>

  <dt>JavaScript</dt>
  <dd>ブラウザで動作するスクリプト言語。ウェブページに動きをつける。</dd>
</dl>

dl / dt / dd の役割

要素意味説明
<dl>定義リスト全体用語と説明の集合のコンテナ
<dt>用語（term）定義される側のキーワード
<dd>説明（description）用語に対する説明

1 用語に複数の説明

用語に複数の意味がある場合、

に続けて
を複数並べられます。

<dl>
  <dt>サーバ</dt>
  <dd>クライアントの要求に応じてサービスを提供するコンピュータ。</dd>
  <dd>そのコンピュータ上で動作するソフトウェア（Web サーバ・DB サーバ等）。</dd>
</dl>

複数の用語に共通の説明

逆に、複数の

に対して 1 つの
という構造もOKです。

<dl>
  <dt>HTTP</dt>
  <dt>HTTPS</dt>
  <dd>Web の通信プロトコル。HTTPS は通信内容を TLS で暗号化したもの。</dd>
</dl>

dd の中に書ける内容

の中には段落、リスト、画像、コードブロックなど任意のブロック要素を入れられます。

<dl>
  <dt>レスポンシブデザイン</dt>
  <dd>
    <p>画面サイズに応じてレイアウトを変える設計手法。</p>
    <ul>
      <li>メディアクエリ（@media）</li>
      <li>フレキシブルグリッド</li>
      <li>フレキシブル画像</li>
    </ul>
  </dd>
</dl>

デフォルトスタイルと CSS カスタマイズ

のブラウザ既定スタイルは左に余白（margin-left: 40px 程度）。横並びにしたい場合は CSS Grid を使うのが現代の定番です。

/* 横並びの「用語 : 説明」レイアウト */
dl.glossary {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 1em;
  row-gap: 0.5em;
}
dl.glossary dt { font-weight: bold; }
dl.glossary dd { margin: 0; }

FAQ ページの実装

FAQ の質問と回答も

で表現できます。<details> + <summary> でアコーディオン化する手法もありますが、純粋なリストとしてマークアップしたい場合は
が最適です。

<dl class="faq">
  <dt>Q. 商品到着までの日数は？</dt>
  <dd>A. 通常 2 〜 3 営業日です。</dd>

  <dt>Q. 返品は可能ですか？</dt>
  <dd>A. 商品到着後 7 日以内であれば返品可能です。</dd>
</dl>

アクセシビリティ

スクリーンリーダーは

を「定義リスト、3 件」のように読み上げ、各項目を「用語 → 説明」の対として扱います。情報の意味的なペア構造を維持できるため、div / p で組むより遥かに親切です。

ul / table との使い分け

構造使い所
    /
    		並列項目のリスト
    +
    +
    		「キー : 値」「用語 : 説明」のペア
    2 軸（行 × 列）のデータ表

    たとえば「メニュー項目 : 価格」のような1 対 1 のペアは

    が向き、「商品一覧（名前 / 価格 / 在庫）」のような多列データは が向きます。

    メタデータ表示への応用

    <dl class="meta">
  <dt>著者</dt>
  <dd>山田太郎</dd>
  <dt>公開日</dt>
  <dd><time datetime="2026-06-01">2026 年 6 月 1 日</time></dd>
  <dt>カテゴリ</dt>
  <dd>Web 開発</dd>
</dl>

    ブログ記事のメタ情報や、製品スペック表などキーと値が明確なリストには dl が最適です。

    FAQ（dd そのもの）

    Q: dd は

    の外で使える？
    A: 使えません。
    は
    の子（または間接の子）でないと無効。

    Q:

    なしの
    は？
    A: 仕様違反ではないものの、意味的に成り立ちません。ペアで使うべき。

    Q:

    は SEO に良い？
    A: 検索エンジンは構造を理解しやすくなりますが、「dl にすればランキングが上がる」というほどの効果はありません。適切な意味付けとして使うのが本筋です。

    関連

    • dl 要素 — 定義リスト全体
    • dt 要素 — 用語側
    • ul 要素 / ol 要素 — 並列リスト
    • table 要素 — 多列データ
    • details / summary 要素 — アコーディオン FAQ