HTML辞書ホームへ
HTML要素 辞書 by Sentaro
<dl>
定義リスト（Description List）要素。用語のリストとその説明を作成します。
info
概要
$\texttt{<dl>}$ 要素（定義リスト要素）は、用語とその定義や説明をセットで記述するための要素です。子要素として $\texttt{<dt>}$ (定義する用語) と $\texttt{<dd>}$ (用語の説明) を持ちます。
辞書的なリスト、メタデータの表示、質問と回答のリストなど、**名前と値のペア**の関係を示す場合に使用されます。
play_circle
デモ (静的表示)
HTML (Source)
<dl>
<dt>HTML</dt>
<dd>Webページの構造を定義する言語。</dd>
<dt>CSS</dt>
<dd>Webページの見た目を装飾するスタイルシート言語。</dd>
</dl>
Preview (Result)
- HTML
- Webページの構造を定義する言語。
- CSS
- Webページの見た目を装飾するスタイルシート言語。
list
子要素 (Children)
| 要素名 | 説明 |
|---|---|
| <dt> | Definition Term (定義用語)。リスト内で定義される用語や名前を記述します。 |
| <dd> | Description/Definition (説明/定義)。直前の $\texttt{<dt>}$ に対する説明や定義の内容を記述します。 |
| <div> | グループ化。複数の $\texttt{<dt>}$ / $\texttt{<dd>}$ のペアを論理的にグループ化するために使用できます。 |
code
実用例
1. 用語集（基本形）
<dl>
<dt>CPU</dt>
<dd>コンピュータの頭脳となる中央演算処理装置。</dd>
<dt>RAM</dt>
<dd>一時的にデータを保存する揮発性の記憶装置。</dd>
</dl>
2. 質問と回答のリスト (Q&A)
<dl>
<dt>Q: 支払い方法は何がありますか？</dt>
<dd>A: クレジットカード、銀行振込、代金引換がご利用いただけます。</dd>
</dl>
3. 一つの用語に対する複数の説明
<dl>
<dt>リンゴ</dt>
<dd>バラ科の落葉高木、またはその果実。</dd>
<dd>世界中で栽培されるポピュラーな果物。</dd>
</dl>
lightbulb
知っておくべき重要事項
auto_stories
用途の明確化
$\texttt{<dl>}$ は「定義リスト」であり、単なるインデント付きのリストやレイアウト目的で使用すべきではありません。リスト項目（$\texttt{<li>}$）が定義や説明の関係にない場合は、順序付きリスト ($\texttt{<ol>}$) や順序なしリスト ($\texttt{<ul>}$) の使用を検討してください。
$\texttt{<dl>}$ は「定義リスト」であり、単なるインデント付きのリストやレイアウト目的で使用すべきではありません。リスト項目（$\texttt{<li>}$）が定義や説明の関係にない場合は、順序付きリスト ($\texttt{<ol>}$) や順序なしリスト ($\texttt{<ul>}$) の使用を検討してください。
accessibility_new
アクセシビリティと構造
$\texttt{<dl>}$ 要素はスクリーンリーダーなどの支援技術に対して、コンテンツが「用語と説明のペア」であることを伝えます。このため、メタデータ（例: 著者名、発行日）や質問と回答のペアを構造的にマークアップするのに適しています。
$\texttt{<dl>}$ 要素はスクリーンリーダーなどの支援技術に対して、コンテンツが「用語と説明のペア」であることを伝えます。このため、メタデータ（例: 著者名、発行日）や質問と回答のペアを構造的にマークアップするのに適しています。