この記事の要点

dt 要素は description term — 定義リスト (dl) の用語を表す 必ず dl の中で dd （説明）とセットで使う。「用語: 説明」を構造化 1 つの dt に複数 dd, あるいは複数 dt に 1 つの dd という多対多の関係を表現できる 用途: 用語集 / FAQ / 仕様一覧 / メタデータ表示 / カードのキー・バリュー表示 CSS でレイアウト自由: Grid / Flex で2 カラムテーブル風に整形できる

dt 要素とは

dt 要素 (description term) は HTML で定義する用語の名前を表す要素です。必ず定義リスト dl (description list) の子要素として使い、ペアとなる説明 dd (description) と組で意味を成します。

「用語と説明」「キーと値」「質問と答え」といった名称・定義のペアを構造化するための要素で、辞書・用語集・FAQ・仕様一覧・メタデータ表示などに使われます。

基本構文

<dl>
    <dt>HTML</dt>
    <dd>HyperText Markup Language の略。Web ページの構造を記述する言語。</dd>

    <dt>CSS</dt>
    <dd>Cascading Style Sheets の略。HTML の見た目を装飾するスタイル言語。</dd>

    <dt>JavaScript</dt>
    <dd>Web ブラウザで動作するプログラミング言語。動的な処理を実現する。</dd>
</dl>

ブラウザは標準で dd をインデント表示します（左に余白）。CSS で自由に上書き可能。

多対多の関係

dt と dd は1 対 1 とは限らない。1 つの用語に複数の説明や、複数の用語に 1 つの共通説明を当てられます。

<dl>
    <!-- 1 つの dt に複数 dd -->
    <dt>npm</dt>
    <dd>Node Package Manager の略。</dd>
    <dd>JavaScript パッケージのインストール・管理ツール。</dd>

    <!-- 複数 dt に 1 つの dd -->
    <dt>HTML</dt>
    <dt>HyperText Markup Language</dt>
    <dd>Web ページの構造を記述するマークアップ言語。</dd>
</dl>

FAQ パターン

<h2>よくある質問</h2>
<dl>
    <dt>Q. 配送にどれくらいかかりますか？</dt>
    <dd>A. 通常 3 〜 5 営業日でお届けします。</dd>

    <dt>Q. 返品は可能ですか？</dt>
    <dd>A. 商品到着後 30 日以内であれば未開封品に限り可能です。</dd>

    <dt>Q. 領収書は発行できますか？</dt>
    <dd>A. マイページからダウンロードいただけます。</dd>
</dl>

CSS で 2 カラムテーブル風に

CSS Grid を使うと dt / dd をキー列と値列として綺麗に並べられます。

dl.spec {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 8px 16px;
}
dl.spec dt {
    font-weight: bold;
    color: #555;
}
dl.spec dd {
    margin: 0;
}

<dl class="spec">
    <dt>製品名</dt><dd>MacBook Pro 14</dd>
    <dt>CPU</dt><dd>Apple M3 Pro 12 コア</dd>
    <dt>メモリ</dt><dd>18GB</dd>
    <dt>ストレージ</dt><dd>1TB SSD</dd>
    <dt>重量</dt><dd>1.61kg</dd>
</dl>

div でグルーピング (HTML5.2+)

HTML5.2 以降では、dl の直下に div を入れて用語と説明のペアをグループ化することが許されています。CSS で 1 ペアごとに枠線を引きたい時などに便利。

<dl>
    <div class="item">
        <dt>HTML</dt>
        <dd>Web ページの構造を記述する言語。</dd>
    </div>
    <div class="item">
        <dt>CSS</dt>
        <dd>見た目を装飾するスタイル言語。</dd>
    </div>
</dl>

主な用途

用途	例
用語集 (Glossary)	技術用語の辞書ページ
FAQ	質問と答えのペア
仕様一覧	製品スペック表示
メタデータ	記事の作者・公開日・カテゴリ
キー・バリュー	JSON のような構造の表示
連絡先	名前・電話・メールのペア

関連要素

要素	意味
dl	定義リストの親要素
dt	定義する用語
dd	用語の説明
ul / li	順序のないリスト（並列項目）
ol / li	順序のあるリスト（手順など）

アクセシビリティ

• スクリーンリーダーは「定義リスト、N 項目」のように構造を読み上げるため、用語集には必ず dl/dt/dd を使う
• FAQ で詳細な開閉が必要なら <details><summary> も検討
• dl 内に dt/dd 以外の意味のあるブロック要素を直接置くのは仕様違反 (div グルーピングのみ許可)

FAQ

Q: dt だけで dd なしはあり？
A: 仕様違反。必ず少なくとも 1 つの dd とペアにする。

Q: テーブルとどう使い分ける？
A: 2 列の表形式データ（社員一覧など）は table、用語と説明のペアなら dl。意味的に何の関係かで選ぶ。

Q: マイクロデータ / Schema.org と連携できる？
A: 可能。FAQ なら itemscope itemtype="https://schema.org/FAQPage" を組み合わせ、dt に itemprop="name"、dd に itemprop="acceptedAnswer" を付与する。SEO 効果あり。

Q: dd 内に p や img を入れていい？
A: 可能。フローコンテンツなら何でも入る。長い説明は p で段落分けする。