【HTML Living Standard】dt要素の使い方
dt要素の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
dtオブジェクトは、HTMLの定義リスト（<dl>要素）において、定義される用語や名前を表すオブジェクトです。この要素は、親要素である<dl>要素の内部で使用され、<dd>要素（定義の説明や内容）と組み合わせて、用語とそれに対応する定義をセマンティックに表現するために用いられます。
<dt>要素の主な役割は、辞書や用語集における見出し語、FAQ（よくある質問）の質問文、またはメタデータにおける項目名など、何らかの定義される項目名を明確に提示することです。例えば、あるプログラミング用語とその説明を記述する際には、まず<dt>要素で用語そのものをマークアップし、その直後に続く<dd>要素でその用語の詳細な説明を記述します。
<dt>要素のコンテンツモデルはフローコンテンツを許可しますが、対話的なコンテンツ（例: リンクやボタンなど）を直接の子孫として含めることはできません。<dl>要素内では、複数の<dt>要素とそれに対応する<dd>要素が順番に配置されることで、意味のある構造を持つリストが構成されます。この要素を適切に使用することで、ウェブページのアクセシビリティが向上し、検索エンジンや支援技術がコンテンツの内容をより正確に理解できるようになります。これにより、情報の構造化が明確になり、メンテナンス性も高まります。
構文(syntax)
1<dt>定義する用語</dt>
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません
サンプルコード
HTMLで説明リストを作成する
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>説明リストの例</title> 7</head> 8<body> 9 <h1>プログラミング用語集</h1> 10 11 <!-- 12 <dl>要素は説明リスト全体を定義します。 13 一般的に用語（<dt>）とその説明（<dd>）のペアで使用されます。 14 --> 15 <dl> 16 <!-- 17 <dt>要素は説明リスト内の用語（定義する項目）を定義します。 18 この用語に対する説明は、直後に続く<dd>要素で提供されます。 19 --> 20 <dt>HTML</dt> 21 <!-- 22 <dd>要素は直前の<dt>要素で定義された用語に対する説明を提供します。 23 --> 24 <dd>Webページの構造を記述するためのマークアップ言語です。</dd> 25 26 <dt>CSS</dt> 27 <dd>Webページの見た目（スタイル）を定義するためのスタイルシート言語です。</dd> 28 29 <dt>JavaScript</dt> 30 <dd>Webページに動きやインタラクティブな機能を追加するためのプログラミング言語です。</dd> 31 </dl> 32</body> 33</html>
<dt>要素は、HTMLで説明リストを作成する際に、定義する「用語（Definition Term）」を表すために使用されます。この要素は、必ず親要素である<dl>（Definition List）要素の中に配置され、直後に続く<dd>（Definition Description）要素によってその用語の説明が提供されるという一連の流れで使われます。これにより、用語とその説明がペアになった構造をWebページ上に表現できます。
サンプルコードでは、「HTML」「CSS」「JavaScript」といったプログラミング用語が<dt>要素で定義され、それぞれの具体的な意味がその直後の<dd>要素で詳しく説明されています。例えば、「HTML」という用語が<dt>HTML</dt>で示され、その説明として<dd>Webページの構造を記述するためのマークアップ言語です。</dd>が続きます。このように、見出しのような役割を果たす用語と、それに対する詳細な説明を明確に区別して表示させることができます。
<dt>要素自体に特定の引数（パラメータ）や戻り値（返り値）はありません。これは、HTMLの要素が主に文書の構造や意味をマークアップするために設計されており、プログラミング言語における関数呼び出しや値の返却といった概念とは異なるためです。HTML要素は、その配置や属性によってブラウザに表示方法や意味を伝え、文書構造を構築する役割を担っています。
dt要素は、説明リストを定義するdl要素の内部で、説明される用語や項目を記述するために用います。この要素は単体では意味を持たず、必ずdl要素の子要素として配置し、直後にはその用語に対する説明を記述するdd要素を置くのが一般的です。dtの中には、通常のテキストやspanタグなどのインライン要素を含めることができますが、pタグやh1タグなどのブロックレベル要素を含めることはできません。これらの要素は、単に見た目を整えるためだけでなく、コンテンツの意味的な構造を明確にし、検索エンジンやアクセシビリティツールに情報を正しく伝えるために利用することが重要です。
HTML dt 要素で用語を定義する
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 dt 要素のサンプル</title> 7</head> 8<body> 9 <h1>よくあるプログラミング用語</h1> 10 11 <!-- 12 dl要素は定義リスト全体を囲みます。 13 dt要素はリスト内の「用語」を定義します。 14 dd要素はdt要素で定義された用語の「説明」を提供します。 15 --> 16 <dl> 17 <dt>HTML</dt> 18 <dd>HyperText Markup Languageの略で、Webページの構造を記述するためのマークアップ言語です。</dd> 19 20 <dt>CSS</dt> 21 <dd>Cascading Style Sheetsの略で、Webページの見た目（色、レイアウト、フォントなど）を定義するためのスタイルシート言語です。</dd> 22 23 <dt>JavaScript</dt> 24 <dd>Webページに動的な機能（アニメーション、インタラクティブな要素など）を追加するためのプログラミング言語です。</dd> 25 </dl> 26</body> 27</html>
HTMLのdt要素は、定義リスト内で「定義する用語」を示すために使用されます。この要素は、<dl>（Definition List）要素の子要素として配置され、その直後に続く<dd>（Definition Description）要素と組み合わせて使われるのが一般的です。dt要素で用語を定義し、dd要素でその用語に対する説明や解説を提供することで、用語集やFAQのような構造的なコンテンツを作成できます。
dt要素は特定の引数を受け取ったり、特別な値を返すことはありません。これは、dt要素が単にテキストコンテンツをマークアップし、その内容が定義リスト内の「用語」であることをブラウザに伝えるための役割を持つためです。
提供されたサンプルコードでは、<dl>タグで囲まれた定義リストの中に、プログラミング用語とその説明が記述されています。例えば、<dt>HTML</dt>は「HTML」という用語を定義し、その直後の<dd>HyperText Markup Languageの略で、Webページの構造を記述するためのマークアップ言語です。</dd>がその説明を提供しています。同様に「CSS」や「JavaScript」といった用語も<dt>要素で定義され、それぞれの説明が<dd>要素で記述されています。このようにdt要素を使用することで、Webページ上で情報を構造化し、コンテンツの意味を明確に伝えることができます。
dt要素は、定義リスト全体を囲むdl要素の子要素としてのみ機能します。単独では使用せず、必ずdl要素の直下に配置してください。dt要素は「用語」を定義し、その用語の説明は直後に続くdd要素で記述するのが基本的な使い方です。dtとddの組み合わせで、明確な定義リストを構成することが重要です。
dt要素は、単にテキストを太字にするなど、見た目を装飾する目的で利用すべきではありません。意味的に用語であることを示すために使用し、コンテンツの構造を正しくマークアップすることを心がけてください。dt要素の内容は、原則としてテキストやインライン要素に限定し、ブロックレベル要素を直接含めることは避けるべきです。