dtタグの意味と使い方！定義リストで用語名を正しくマークアップ
dtタグ（定義用語）の概要と重要ポイント
dtタグは定義リスト<dl>の中で「用語名」を示す要素です。直後の<dd>がその説明や値を担い、1つの<dl>は名前と値の組を並べます。まずは 用語と説明の対構造 を守り、見た目のレイアウトはCSSで行うのが基本です。
dtタグの定義（意味としくみ）
<dt>は「名前（用語・項目）」を表し、続く<dd>で「説明（定義・値）」を与えます。1つの説明に複数の用語名を対応させたり、1つの用語に複数の説明を並べることも可能です。dtの内容は基本的にフレージングコンテンツで記述し、見出しや複雑なブロックは避けます。
実務での論点（使い分け・設計・落とし穴）
辞書・用語集・FAQの「質問＝dt／回答＝dd」、プロフィールの「項目名＝dt／値＝dd」など、名前‐値の関係が明確な場面で使います。レイアウト目的での乱用は避け、グリッドやフレックスで整形します。特に dlの名前‐値構造 を保つことがアクセシビリティ上も重要です。
- 用途適合：辞書・仕様の属性表・プロフィールなど「名前→値」に限定
- 複数対応：
dt, dt, ddの並びで同義語→共通説明を表現可能 - 装飾分離：太字やコロン表示はCSS（例：
dt::after）で制御 - アクセシビリティ：項目名と値が関連付くため読み上げが明確
- 避ける誤用：箇条書きやナビゲーションをdl/dtで置き換えない
比較・使い分け表
| 要素 | 意味 | 用途 |
|---|---|---|
| dl / dt / dd | 名前と値のペア | 辞書、属性一覧、質問と回答、項目と値 |
| ul / li | 順不同の集合 | 特徴列挙、メニュー、タグ一覧 |
| ol / li | 順序付きの集合 | 手順、ランキング、年表 |
運用上の注意（SEO・アクセシビリティ・スタイル）
dt/ddの内容は通常の本文としてインデックスされますが、意味が伝わるよう簡潔に書きます。見た目の列配置はdisplay: gridやflexを活用し、モバイルでは縦積みへ崩して可読性を確保します。長文のddは段落で分け、dtには過剰なHTMLを入れない方針が安全です。
よくある質問（FAQ）
dtは複数置けますか？どのように対応しますか？
可能です。複数の
dtの後に1つのddを置けば、同義語や別名に共通の説明を与えられます。逆に1つのdtに複数ddも可です。dtの中に見出しやリストを入れても良いですか？
基本は短いテキストやインライン要素に留めます。複雑な構造は
dd側に置き、dtは「名称」に専念させると読み上げも安定します。表（table）とdlはどちらを使うべきですか？
行列の関係（ヘッダー×複数列）ならtable、単純な項目名と値の列挙ならdlが適します。目的に応じて選択してください。
CSSでコロンや区切り線を入れるには？
dt::after{ content: ":"; }のように疑似要素を使います。マークアップは意味優先、装飾はCSSで分離します。
dtタグのまとめ
dtタグは「名前」を示す要素で、ddと対になって意味を成します。辞書・項目表など名前‐値の場面に限定し、装飾はCSSで分離、アクセシビリティを損なわない記述を心がけます。dlの設計原則を守れば、読みやすさと実装の保守性を両立できます。
