In HTML, the <dd>
element is used to provide the meaning or explanation for the <dt>
(the term being defined) within the same list.
<dl>
)全体の基本構造
<dd>
の役割と基本的な使い方
<dd>
の役割と基本的な使い方
<dd>
とその他の要素やタグとの比較・使い分け
<dd>
のデザインやスタイリングに関する注意点
HTMLでWebページを構成する際、テキストコンテンツをどのようにマークアップするかはとても重要です。特に、用語の定義や項目の説明を行う場合、<dl>
(定義リスト)タグの中で用いられる<dt>
(定義する用語)と<dd>
(定義の説明)は、セマンティクス(文書構造の意味づけ)を明確に示すために有用です。
<dl>
)全体の基本構造まず、<dd>
要素を理解するためには、前後の文脈となる定義リスト全体の構造を把握することが大切です。定義リストは以下の3つの要素を組み合わせて使います。
<dl>
<dt>
<dd>
HTML
<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>
)とは異なる意味を持たせたい場合に、有効です。HTML
<dl>
<dt>用語(または見出し)</dt>
<dd>その用語に対する定義や説明を記述します。</dd>
</dl>
dt
とdd
はペアになっていることが前提ですが、同じdt
に対して複数のdd
を連続させることも可能です。
dd
を使う場合HTML
<dl>
<dt>CSS</dt>
<dd>Webページの見た目を装飾するための仕組み。</dd>
<dd>スタイルシートを外部ファイルとして読み込むことが推奨される。</dd>
</dl>
同じ<dt>
(定義語)に対し、段階的に説明を2つ以上書きたい場合などに便利です。
<dd>
の使いどころと注意点<dt>
と<dd>
の対になる関係dt
がないdd
は文書構造として不自然になります。必ずdt
とセットで使用しましょう。
dt
とdd
の組み合わせが複数ある場合でも、それぞれ<dl>
内で意味の通る流れになっていることを確認するのが望ましいです。
<dl>
内での順序やネストについてHTML5以降、<dl>
内には<dt>
, <dd>
, <div>
(グループ化目的) などを含めることができますが、一般的にはdt
→ dd
の順序が基本です。
定義リストのネスト(入れ子構造)は推奨される場面が限定的なため、通常はあまり見かけません。
ただし、用語の説明の中に更なる定義が必要な場合に限り、HTML5仕様はある程度柔軟にネストを許容しています。ただし可読性に注意が必要です。
<dd>
とその他の要素やタグとの比較・使い分け<p>
(段落)との違い<p>
タグ<dd>
タグ<dd>
の内部で複数の<p>
を使うことも可能です。HTML
<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>
を使って整理しておくと、文書全体が明確に区分されて読みやすくなります。
プログラミング関連の用語集などを作成する場合、次のような書き方が考えられます。
HTML
<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(Frequently Asked Questions)には、一見<ul>
や<ol>
が使われがちですが、質問と回答が「用語とその説明」という性質を持つ場合、<dl>
を使うのも一つの方法です。
HTML
<h2>よくある質問</h2>
<dl>
<dt>Q. パスワードを忘れてしまいました。</dt>
<dd>A. パスワード再設定ページから、登録時のメールアドレスを入力して再設定してください。</dd>
<dt>Q. 退会方法を教えてください。</dt>
<dd>
<p>A. マイページの「アカウント情報」から退会手続きを行えます。</p>
<p>なお、一度退会するとデータは復旧できませんのでご注意ください。</p>
</dd>
</dl>
質問が<dt>
、回答が<dd>
とみなせるため、リスト構造に加えセマンティクスが通ります。
ただし、必ずしもFAQ=<dl>
というわけではなく、ケースバイケースで判断します。
<dl>
、<dt>
、<dd>
はHTML4から存在しており、HTML5でも継続して使われます。大きな非互換はありません。<dt>
と<dd>
のグループ化HTML5以降では、<dt>
と<dd>
を含むグループをラップするために<div>
等を使用することが許容されています。
例えば、視覚的に1つのまとまりとしてスタイリングしたい場合は次のように書くことができます。
HTML
<dl>
<div>
<dt>HTML</dt>
<dd>HyperText Markup Language。Webページの構造を記述するための言語。</dd>
</div>
<div>
<dt>CSS</dt>
<dd>Cascading Style Sheets。Webページの見た目を装飾するための仕組み。</dd>
</div>
</dl>
ただし、読みやすさと保守性を考慮して、シンプルな構造を保てるならあまり追加のタグは増やさない方が無難です。
<dt>
に対して複数の<dd>
を追加する意義1つの用語に対して、用途別の説明や注意点などを複数段に分けて表現したい場合、それぞれを別々の<dd>
にすることで、情報を整理しやすくなります。
ただし、あまり多用すると逆に可読性が損なわれるため、適切なバランスが必要です。
<dt>
内で複数の用語を列挙したいときはカンマ区切りや改行を利用するなど、どこまでを用語として扱うのか、構造的に混乱しないように注意しましょう。長すぎる場合は見出しとしては不向きなので、別途段落を使うなど設計を見直すことが重要です。
<dd>
は、<dt>
が提示する用語や項目に対する説明をマークアップするための要素です。<dt>
とセットで複数組合わせることで、用語集やFAQ、定義リスト、商品仕様一覧などの構造をわかりやすく表現できます。<dd>
、グループ化等を活用して、より柔軟に情報を提供する設計を検討してみましょう。<dl>
・<dt>
・<dd>
は、HTMLの中でも比較的シンプルかつ汎用的な要素の組み合わせですが、文書構造を整理して意味のあるマークアップを書く上で非常に役立つタグです。適材適所で用いることで、アクセシビリティを高めつつ、コンテンツを読みやすい形に整えることが可能になります。