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

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

この記事の要点
  • 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・仕様一覧・メタデータ表示などに使われます。

基本構文


    
HTML

    
HyperText Markup Language の略。Web ページの構造を記述する言語。


    
CSS

    
Cascading Style Sheets の略。HTML の見た目を装飾するスタイル言語。


    
JavaScript

    
Web ブラウザで動作するプログラミング言語。動的な処理を実現する。

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

多対多の関係

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


    
    
npm

    
Node Package Manager の略。

    
JavaScript パッケージのインストール・管理ツール。


    
    
HTML

    
HyperText Markup Language

    
Web ページの構造を記述するマークアップ言語。

FAQ パターン

よくある質問



    
Q. 配送にどれくらいかかりますか？

    
A. 通常 3 〜 5 営業日でお届けします。


    
Q. 返品は可能ですか？

    
A. 商品到着後 30 日以内であれば未開封品に限り可能です。


    
Q. 領収書は発行できますか？

    
A. マイページからダウンロードいただけます。

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;
}

    
製品名
MacBook Pro 14

    
CPU
Apple M3 Pro 12 コア

    
メモリ
18GB

    
ストレージ
1TB SSD

    
重量
1.61kg

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

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


    

        
HTML

        
Web ページの構造を記述する言語。

    

    

        
CSS

        
見た目を装飾するスタイル言語。

主な用途

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

関連要素

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

アクセシビリティ

  • スクリーンリーダーは「定義リスト、N 項目」のように構造を読み上げるため、用語集には必ず dl/dt/dd を使う
  • FAQ で詳細な開閉が必要なら
    も検討
  • 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 で段落分けする。