HTML

この記事では、説明リストの用語を表す<dt>に対して、意味や補足説明を書く<dd>要素の役割と、<dl>内での組み合わせ方を説明します。

In HTML, the <dd> element is used to provide the meaning or explanation for the <dt> (the term being defined) within the same list.

dd 要素

• はじめに
• 定義リスト（<dl>）全体の基本構造
  • 定義リストのサンプル構造
• <dd>の役割と基本的な使い方
  • <dd>の役割
  • 基本の書き方
  • 複数のddを使う場合
• <dd>の役割と基本的な使い方
  • 適切な場面で使う
  • <dt>と<dd>の対になる関係
  • <dl>内での順序やネストについて
• <dd>とその他の要素やタグとの比較・使い分け
  • <p>（段落）との違い
  • <li>（リストアイテム）との違い
• <dd>のデザインやスタイリングに関する注意点
  • デフォルトのスタイル
  • CSSでの一般的なカスタマイズ方法
• アクセシビリティへの考慮
• 実践的な応用例
  • 用語集（Glossary）の例
  • FAQ（よくある質問と回答）の例
• 仕様やブラウザ対応状況
• 中級者向けの追加情報・ヒント
  • <dt>と<dd>のグループ化
  • 1つの<dt>に対して複数の<dd>を追加する意義
  • 用語が複数行にわたる場合の対処
• まとめ

はじめに

HTMLでWebページを構成する際、テキストコンテンツをどのようにマークアップするかはとても重要です。特に、用語の定義や項目の説明を行う場合、<dl>（定義リスト）タグの中で用いられる<dt>（定義する用語）と<dd>（定義の説明）は、セマンティクス（文書構造の意味づけ）を明確に示すために有用です。

定義リスト（<dl>）全体の基本構造

まず、<dd>要素を理解するためには、前後の文脈となる定義リスト全体の構造を把握することが大切です。定義リストは以下の3つの要素を組み合わせて使います。

<dl>

Definition List（定義リスト）の開始タグ・終了タグ

<dt>

Definition Term（定義する用語）

<dd>

Definition Description（定義や説明、詳細などを記述）

定義リストのサンプル構造

<dl>
	<dt>HTML</dt>
	<dd>HyperText Markup Language（ハイパーテキストマークアップ言語）の略称。</dd>

	<dt>CSS</dt>
	<dd>Cascading Style Sheets（カスケーディングスタイルシート）の略称。</dd>
</dl>

上記の例では、<dt>に用語が入り、その用語の説明を<dd>が担っています。<dl>はその全体を囲むためのタグです。

<dd>の役割と基本的な使い方

<dd>の役割

用語や項目の「説明文」を入れる

<dt>が提示した用語（もしくは項目）に対して、<dd>に補足情報や詳細、定義などをマークアップします。

内容の意味づけ（セマンティクス）

<dd>は“定義されるものの説明”という意味づけをもっており、検索エンジンや支援技術（スクリーンリーダーなど）にも適切に役割を伝えることができます。通常の段落タグ（<p>）とは異なる意味を持たせたい場合に、有効です。

基本の書き方

<dl>
	<dt>用語（または見出し）</dt>
	<dd>その用語に対する定義や説明を記述します。</dd>
</dl>

dtとddはペアになっていることが前提ですが、同じdtに対して複数のddを連続させることも可能です。

複数のddを使う場合

<dl>
	<dt>CSS</dt>
	<dd>Webページの見た目を装飾するための仕組み。</dd>
	<dd>スタイルシートを外部ファイルとして読み込むことが推奨される。</dd>
</dl>

同じ<dt>（定義語）に対し、段階的に説明を2つ以上書きたい場合などに便利です。

<dd>の使いどころと注意点

適切な場面で使う

用語の説明や辞書的なコンテンツ

項目 : 用語、定義、翻訳、専門用語の一覧など。

例 : FAQ、用語集、APIリファレンス、製品の仕様一覧など。

ラベルとその属性・説明をまとめたいとき

住所や連絡先など、項目名+詳細情報の形式をとりたいときにも使える場合があります。

<dt>と<dd>の対になる関係

dtがないddは文書構造として不自然になります。必ずdtとセットで使用しましょう。

dtとddの組み合わせが複数ある場合でも、それぞれ<dl>内で意味の通る流れになっていることを確認するのが望ましいです。

<dl>内での順序やネストについて

HTML5以降、<dl>内には<dt>, <dd>, <div>（グループ化目的） などを含めることができますが、一般的にはdt → ddの順序が基本です。

定義リストのネスト（入れ子構造）は推奨される場面が限定的なため、通常はあまり見かけません。

ただし、用語の説明の中に更なる定義が必要な場合に限り、HTML5仕様はある程度柔軟にネストを許容しています。ただし可読性に注意が必要です。

<dd>とその他の要素やタグとの比較・使い分け

<p>（段落）との違い

<p>タグ

「文章の段落」を表すためのタグであり、特定の用語の説明という文脈は強調されません。

<dd>タグ

「用語・項目に対する説明」を表すタグです。セマンティクスが異なります。

もし複数の段落を用いて一つの用語をより詳細に説明したい場合、<dd>の内部で複数の<p>を使うことも可能です。

<dl>
	<dt>HTML</dt>
	<dd>
		<p>HTMLはWebページの内容や構造をマークアップするための言語です。</p>
		<p>歴史的にはSGMLをベースとしており、現在の最新仕様はHTML5.x系が主流です。</p>
	</dd>
</dl>

このように、<dd>内に段落をいくつか配置して、詳細説明を分かりやすくレイアウトすることもできます。

<li>（リストアイテム）との違い

<li>タグ

項目の列挙（順序なしリスト<ul>や、順序ありリスト<ol>など）に使われる。

<dd>タグ

<dt>とのセットで定義や説明を表す。

もし“リストとして列挙”ではなく、“用語→説明”の組み合わせが明確なら、<dl> + <dt> + <dd>を使う方がセマンティクスの面で有利です。

<dd>のデザインやスタイリングに関する注意点

デフォルトのスタイル

ブラウザ標準のスタイルとしては、<dt>や<dd>は、見出しや段落ほどの余白は設定されていない場合が多いです。ブラウザやCSSのリセットによって差異があります。

CSSでの一般的なカスタマイズ方法

• マージンやパディングでインデント（字下げ）の調整
• フォントスタイルを変えて見出しらしく強調する、または説明テキストとして抑えめにするなど、適切な装飾

dl {
	margin: 0;
	padding: 0;
}

dt {
	font-weight: bold; 
	/* 用語を強調する例 */
	margin: 0.5em 0 0.2em;
}

dd {
	margin: 0 0 1em 1em; 
	/* 用語からのインデントをわずかに設定する例 */
}

上記はあくまで例示であり、プロジェクトのデザインポリシーに合わせて調整が必要です。

アクセシビリティへの考慮

<dl>、<dt>、<dd>を正しくマークアップすると、支援技術（スクリーンリーダーなど）がユーザーに対して「用語」と「その説明」であることを適切に伝えてくれます。これは、ただの段落タグで記述した場合に比べて、構造上の意味が明示されている点で有利です。

<dt>を読んだ後に、対応する<dd>が流れるよう読み上げられることが期待できるため、利用者にとって理解しやすい情報構造を提供できます。

さらに複雑な説明や多言語対応などを行う際も、<dl>を使って整理しておくと、文書全体が明確に区分されて読みやすくなります。

実践的な応用例

用語集（Glossary）の例

プログラミング関連の用語集などを作成する場合、次のような書き方が考えられます。

<h2>プログラミング用語集</h2>
<dl>
	<dt>配列（Array）</dt>
	<dd>
		<p>同じ型のデータを連続的に格納するためのデータ構造。インデックス（添字）でアクセスする。</p>
	</dd>
	
	<dt>連想配列（Associative Array）</dt>
	<dd>
		<p>キーと値のペアでデータを扱う配列形式。マップやディクショナリーとも呼ばれる。</p>
	</dd>
	
	<dt>ハッシュテーブル（Hash Table）</dt>
	<dd>
		<p>連想配列の実装にしばしば用いられるデータ構造。ハッシュ関数を利用してキーを処理し、格納する。</p>
	</dd>
</dl>

dt（用語）とdd（その定義）のセットが明確で、リストとして見てもわかりやすい構造です。

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

FAQ（Frequently Asked Questions）には、一見<ul>や<ol>が使われがちですが、質問と回答が「用語とその説明」という性質を持つ場合、<dl>を使うのも一つの方法です。

<h2>よくある質問</h2>
<dl>
	<dt>Q. パスワードを忘れてしまいました。</dt>
	<dd>A. パスワード再設定ページから、登録時のメールアドレスを入力して再設定してください。</dd>
	
	<dt>Q. 退会方法を教えてください。</dt>
	<dd>
		<p>A. マイページの「アカウント情報」から退会手続きを行えます。</p>
		<p>なお、一度退会するとデータは復旧できませんのでご注意ください。</p>
	</dd>
</dl>

質問が<dt>、回答が<dd>とみなせるため、リスト構造に加えセマンティクスが通ります。

ただし、必ずしもFAQ＝<dl>というわけではなく、ケースバイケースで判断します。

仕様やブラウザ対応状況

HTML5 仕様

<dl>、<dt>、<dd>はHTML4から存在しており、HTML5でも継続して使われます。大きな非互換はありません。

ブラウザ対応

主要なモダンブラウザ（Chrome, Firefox, Safari, Edge, Operaなど）すべてで問題なくサポートされています。古いブラウザでも、定義リストはHTML4時代からあるタグなので広く互換性があります。

中級者向けの追加情報・ヒント

<dt>と<dd>のグループ化

HTML5以降では、<dt>と<dd>を含むグループをラップするために<div>等を使用することが許容されています。

例えば、視覚的に1つのまとまりとしてスタイリングしたい場合は次のように書くことができます。

<dl>
	<div>
		<dt>HTML</dt>
		<dd>HyperText Markup Language。Webページの構造を記述するための言語。</dd>
	</div>
	<div>
		<dt>CSS</dt>
		<dd>Cascading Style Sheets。Webページの見た目を装飾するための仕組み。</dd>
	</div>
</dl>

ただし、読みやすさと保守性を考慮して、シンプルな構造を保てるならあまり追加のタグは増やさない方が無難です。

1つの<dt>に対して複数の<dd>を追加する意義

1つの用語に対して、用途別の説明や注意点などを複数段に分けて表現したい場合、それぞれを別々の<dd>にすることで、情報を整理しやすくなります。

ただし、あまり多用すると逆に可読性が損なわれるため、適切なバランスが必要です。

用語が複数行にわたる場合の対処

<dt>内で複数の用語を列挙したいときはカンマ区切りや改行を利用するなど、どこまでを用語として扱うのか、構造的に混乱しないように注意しましょう。長すぎる場合は見出しとしては不向きなので、別途段落を使うなど設計を見直すことが重要です。

まとめ

• <dd>は、<dt>が提示する用語や項目に対する説明をマークアップするための要素です。
• 文章にセマンティクスを与えることで、検索エンジンや支援技術に「用語と説明が対になっている」ことを明確に伝えることができます。
• <dt>とセットで複数組合わせることで、用語集やFAQ、定義リスト、商品仕様一覧などの構造をわかりやすく表現できます。
• CSSを使って適度にデザインを整えることで、可読性と視覚的な区切りを向上できます。
• 仕様・ブラウザ対応状況は非常に安定しているため、安心して利用できます。
• 中級者以上の方は、ネストや複数<dd>、グループ化等を活用して、より柔軟に情報を提供する設計を検討してみましょう。

<dl>・<dt>・<dd>は、HTMLの中でも比較的シンプルかつ汎用的な要素の組み合わせですが、文書構造を整理して意味のあるマークアップを書く上で非常に役立つタグです。適材適所で用いることで、アクセシビリティを高めつつ、コンテンツを読みやすい形に整えることが可能になります。