【HTML Living Standard】dl要素の使い方
dl要素の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
dlオブジェクトは、定義リストを表すオブジェクトです。このHTML要素は、用語とその説明（定義）のペアをグループ化し、Webページ上で構造的に表現するために利用されます。具体的には、定義する用語を示す<dt>（definition term）要素と、その用語に対する説明や定義を示す<dd>（definition description）要素を子要素として含みます。<dl>要素の内部には、通常、一つ以上の<dt>要素と、それに続く一つ以上の<dd>要素の組み合わせを配置することで、情報セットを構成します。これにより、コンテンツの意味的な関連性を明確にし、ブラウザや検索エンジン、アクセシビリティツールに対して、情報の構造を正確に伝えることができます。
例えば、Webサイトの用語集、よくある質問とその回答（FAQ）、製品の仕様詳細リストなど、特定の項目とそれに対応する詳細な説明が必要な場面で効果的に活用されます。利用する際は、<dt>要素と<dd>要素が必ず<dl>要素の直接の子要素として配置されるように注意してください。HTML Living Standardでは、定義リストだけでなく、名前と値の組を表現する一般的な記述リストとしても利用が推奨されており、メタデータの表示やダイアログボックス内の項目など、幅広い情報構造の表現にその柔軟性が発揮されています。
構文(syntax)
1<dl> 2 <dt>定義される用語</dt> 3 <dd>用語の説明文</dd> 4 <dt>別の用語</dt> 5 <dd>別の用語に関する説明</dd> 6</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 <!-- 12 dl要素は、用語と説明のペアからなる定義リスト全体を定義します。 13 例えば、用語集やメタデータの一覧などに使用されます。 14 --> 15 <dl> 16 <!-- 17 dt要素は、定義リスト内の「用語（Description Term）」を定義します。 18 dl要素の直下に配置され、1つまたは複数のdd要素が後に続きます。 19 --> 20 <dt>HTML</dt> 21 <!-- 22 dd要素は、dt要素で定義された用語の「説明（Description Description）」を提供します。 23 dt要素の後に配置され、その用語に関連する詳細な情報を含みます。 24 --> 25 <dd>Webページを作成するための標準的なマークアップ言語です。</dd> 26 27 <dt>CSS</dt> 28 <dd>Webページのスタイル（色、フォント、レイアウトなど）を指定するためのスタイルシート言語です。</dd> 29 30 <dt>JavaScript</dt> 31 <dd>Webページに動的なコンテンツやインタラクティブな機能を追加するためのプログラミング言語です。</dd> 32 33 <dt>SEO</dt> 34 <dd>検索エンジン最適化 (Search Engine Optimization) の略で、Webサイトが検索エンジンの結果ページでより上位に表示されるようにする一連の技術や手法です。</dd> 35 </dl> 36</body> 37</html>
HTMLのdl要素は、用語とそれに対する説明のペアをまとめる「定義リスト」を作成する際に用います。例えば、用語集やQ&Aなどで、項目とその詳細情報をWebページ上で整理して表示したい場合に活用すると効果的です。
このdl要素の中には、dt要素とdd要素が組み合わされて配置されます。dt要素は定義リスト内の「用語」を定義し、dd要素はその用語に対する「説明」を提供します。サンプルコードでは、「HTML」というdtの用語に対し、「Webページを作成するための標準的なマークアップ言語です。」というddによる説明が対応しています。
dl要素はリスト全体を定義し、その中に複数のdtとddのペアを含めることで、各用語と説明を意味的に関連付け、整理された形で表示します。これらの要素には、引数や戻り値といった特別な機能は持たず、Webコンテンツの構造と意味を定義するためのマークアップ要素として機能します。
dl要素は、用語とその説明のペアを意味的にグループ化する「定義リスト」を表現するために使用します。見た目のインデントのためではなく、コンテンツの構造を正しく伝えるために利用することが重要です。dlの直下には、必ずdt（用語）または、複数のdt/ddをグループ化するためのdivを配置してください。dt要素の後には、その用語に対応するdd（説明）要素を一つ以上配置します。これらの要素は、用語集やメタデータのように、明確な定義関係がある内容に限定して使うべきです。単なる項目の羅列や、視覚的な目的だけでdlを使用すると、アクセシビリティや検索エンジンの理解に悪影響を与える可能性があるため注意が必要です。
HTML dlタグで用語集を作成する
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>dlタグのサンプル</title> 7</head> 8<body> 9 <h1>システムエンジニアのための用語集</h1> 10 11 <!-- dl (Description List) タグは、定義リストを作成するために使用します。 12 用語とその説明のペアをグループ化します。 --> 13 <dl> 14 <!-- dt (Description Term) タグは、定義リストの用語（タイトル）を表します。 --> 15 <dt>HTML</dt> 16 <!-- dd (Description Description) タグは、定義リストの用語に対する説明を表します。 --> 17 <dd>Webページの構造を定義するためのマークアップ言語です。</dd> 18 19 <dt>CSS</dt> 20 <dd>Webページの見た目（スタイル）を定義するためのスタイルシート言語です。</dd> 21 22 <dt>JavaScript</dt> 23 <dd>Webページに動きや対話性をもたらすためのスクリプト言語です。</dd> 24 25 <dt>API</dt> 26 <dd>Application Programming Interfaceの略で、ソフトウェア同士が互いに通信するための取り決めです。</dd> 27 28 <dt>データベース</dt> 29 <dd>大量のデータを効率的に管理・検索するために整理された情報の集合体です。</dd> 30 </dl> 31</body> 32</html>
HTMLのdlタグは、「Description List（説明リスト）」または「Definition List（定義リスト）」を作成するための要素です。これは、用語とその説明のペアをグループ化し、構造的に表示する際に使用されます。例えば、用語集やQ&A形式のリスト、メタデータの表示などに適しています。
dlタグの中には、必ずdtタグとddタグがセットで配置されます。dt（Description Term）タグは、定義リストの「用語」や「タイトル」を表し、dd（Description Description）タグは、そのdtで示された用語に対する「説明」や「詳細」を表します。サンプルコードでは、「HTML」という用語に対し「Webページの構造を定義するためのマークアップ言語です。」という説明が対応付けられています。
このdlタグ自体は、プログラミング言語における関数のような特定の「引数」を受け取ったり、処理結果としての「戻り値」を返したりするものではありません。これはWebページの構造を定義するためのHTML要素であり、ブラウザが内容を適切に解釈し、表示するために利用されます。情報を整理し、意味的にマークアップする上で重要な要素です。
dlタグは、用語（dt）とその説明（dd）のペアをグループ化する定義リストを作成します。必ずdtとddをセットでdlの子要素として配置し、直接他のコンテンツを記述しないよう注意してください。
dtとddの意味的な対応が重要であり、単なる見た目のインデントのためではなく、定義や説明の関係性を表現する際に利用します。これにより、情報の構造が明確になり、アクセシビリティも向上します。
見た目の調整はCSSで行い、HTMLは構造の定義に徹してください。誤ったセマンティクスでの利用は避けるべきです。