【HTML Living Standard】dd要素の使い方
dd要素の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
ddオブジェクトは定義リスト（<dl>要素）内で、定義語（<dt>要素）に対する説明や記述を表すオブジェクトです。この要素は、Webページ上で用語とその定義、質問とその回答、商品名とその特徴など、関連する情報のペアを構造的に表現するために不可欠です。<dl>要素は定義リスト全体を囲み、その中に<dt>要素で定義される用語（または名前）、そしてdd要素でその用語に対する説明を配置します。
具体的には、<dt>用語</dt>の後に<dd>その用語の説明</dd>という形で使用され、各dd要素は直前に登場する<dt>要素、または複数の<dt>要素に対応する詳細な情報を提供します。これにより、コンテンツの意味論的な構造が明確になり、ブラウザや検索エンジン、スクリーンリーダーなどの支援技術がリストの内容を正確に解釈できるようになります。例えば、ウェブサイトのよくある質問（FAQ）セクションで、質問を<dt>で、その回答をddでマークアップすることで、情報が整理され、ユーザーにとって理解しやすいだけでなく、アクセシビリティも向上します。dd要素は単なる見た目のインデントのためではなく、コンテンツの論理的な関係性を示すために使われるべきです。正しいセマンティックなマークアップを適用することで、ウェブページの品質とユーザーエクスペリエンスを高めることができます。
構文(syntax)
1<dl> 2 <dt>用語</dt> 3 <dd>用語の説明です。</dd> 4</dl>
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません
サンプルコード
HTMLの定義リスト (dl, dt, dd) を使う
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>HTMLの定義リスト (dl, dt, dd) の使用例</title> 7</head> 8<body> 9 <h1>プログラミング言語の定義リスト</h1> 10 11 <!-- dl要素は定義リスト全体を表します --> 12 <dl> 13 <!-- dt要素は定義される用語（Description Term）を表します --> 14 <dt>HTML</dt> 15 <!-- dd要素はdtで定義された用語の説明（Description Details）を提供します --> 16 <dd>ウェブページの構造を記述するためのマークアップ言語です。</dd> 17 18 <dt>CSS</dt> 19 <dd>ウェブページの見た目（スタイル）を指定するためのスタイルシート言語です。</dd> 20 21 <dt>JavaScript</dt> 22 <dd>ウェブページに動きやインタラクティブな要素を追加するためのスクリプト言語です。</dd> 23 </dl> 24</body> 25</html>
HTMLのdd要素は、定義リスト（dl要素）内で、dt要素によって提示された用語や名前に対する説明文（Description Details）を提供する際に使用されるマークアップ要素です。ウェブページ上で、特定の用語とその詳細な説明を整理して表示したい場合に大変役立ちます。dd要素は単独では機能せず、常にdl要素の子要素として、dt要素（定義される用語）の後に配置されることで、意味のある構造を形成します。
サンプルコードでは、「プログラミング言語の定義リスト」として、dl要素の中に複数のdtとddのペアが記述されています。例えば、<dt>HTML</dt>が「HTML」というプログラミング言語の名称を定義し、その直後の<dd>ウェブページの構造を記述するためのマークアップ言語です。</dd>が、HTMLとは何かという具体的な説明文として機能しています。同様に、CSSやJavaScriptについても、それぞれの用語と説明が明確に紐付けられています。これにより、ユーザーは情報が整理された形で提示され、理解しやすくなります。
このdd要素自体には、プログラム的な引数や戻り値は存在しません。HTMLの要素は、主に文書の構造や意味を定義し、コンテンツをマークアップするためのものであり、特定のデータを処理して結果を返すような機能は持たないためです。システム開発において、辞書や用語集、Q&Aなどのコンテンツを構造的に記述する際に、このdd要素とdt、dlの組み合わせは非常に有効です。
このサンプルコードにおけるdd要素は、直前のdt要素で定義された用語に対する説明文を示すものです。ddは単独では使用せず、必ずdl要素（定義リスト）の内部にdt要素とセットで配置します。dd要素は、単に見た目をインデントさせたり、箇条書きのように見せたりする目的で使わないでください。HTMLはコンテンツの意味を構造化する言語であり、見た目の調整はCSSの役割です。dl、dt、ddを正しく組み合わせることで、ウェブページのセマンティクス（意味付け）が明確になり、検索エンジンやスクリーンリーダーなどの補助技術がコンテンツの内容をより正確に理解できるようになります。
HTML ddタグで説明を記述する
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>HTML ddタグ サンプル</title> 7</head> 8<body> 9 <h1>プログラミング言語の概要</h1> 10 11 <!-- ddタグはdl（定義リスト）内でdt（定義語）に対応する定義や説明を記述します。 --> 12 <dl> 13 <dt>HTML</dt> 14 <dd>ウェブページの構造を記述するためのマークアップ言語です。</dd> 15 16 <dt>CSS</dt> 17 <dd>ウェブページの見た目（スタイル）を記述するためのスタイルシート言語です。</dd> 18 19 <dt>JavaScript</dt> 20 <dd>ウェブページに動的な機能を追加するためのプログラミング言語です。</dd> 21 </dl> 22</body> 23</html>
HTMLのddタグは、定義リスト（<dl>タグ）内で使用される要素で、直前の定義語（<dt>タグ）に対する定義や説明を記述する際に用います。これにより、項目とその内容を明確に対応付けて表示し、情報の構造を分かりやすく伝えることができます。
サンプルコードでは、「プログラミング言語の概要」というセクションで、HTML、CSS、JavaScriptそれぞれの技術名が定義語（<dt>）として提示され、その直後に<dd>タグを使って、各技術が具体的に何であるかの説明が記述されています。例えば、<dt>HTML</dt>の次に続く<dd>ウェブページの構造を記述するためのマークアップ言語です。</dd>が、HTMLの定義を表現しています。このように、<dl>タグの中に<dt>と<dd>のペアを複数配置することで、用語集やQ&A形式など、特定の用語とその説明を一覧表示する際に効果的なマークアップが可能です。
ddタグは、HTMLの他の多くの要素と同様に、特定の引数を受け取ったり、処理結果として何らかの値を返したりする機能は持っていません。これは、ddタグがウェブページのコンテンツの意味や構造を定義するためのマークアップ要素であり、プログラミング言語の関数やメソッドとは異なる役割を持つためです。ddタグ自体で囲まれたテキストが、定義リストにおける説明文であることをブラウザに伝える役割を果たします。
ddタグは、dt（定義語）で示される用語の説明や定義を記述する要素です。必ずdl（定義リスト）要素の子要素として、dt要素の直後に配置して使用してください。単独で使用したり、dlの外で使用したりすると、HTMLのセマンティックな意味が失われ、期待通りの表示やアクセシビリティが得られない可能性があります。一つのdtに対して複数のddを記述することも可能で、その場合は複数の説明を提供します。このタグの適切な使用は、ウェブコンテンツの意味構造を明確にし、検索エンジンや補助技術による解釈の正確性を高めます。定義リスト以外の目的で単なるインデント表現として利用することは避け、意味的な役割を正しく理解して活用することが重要です。