ddタグ -定義リスト内で用語の説明を記述する｜HTML辞典

<dd>タグとは？

<dd> タグは、定義リスト（<dl>）内で <dt> （定義される用語）の説明を記述するためのタグ です。
<dt> （用語）とセットで使用し、必ず <dl>(定義リスト）の中に配置する必要があります。

基本情報

コンテンツモデル

フローコンテンツ（Flow Content）、パルパブルコンテンツ（Palpable Content）。

閉じタグの有無

<dd> は開始タグ（<dd>）と閉じタグ（</dd>）の両方が必要です。

基本的な記述方法

<dl>
    <dt>HTML</dt>
    <dd>Webページを作成するためのマークアップ言語</dd>
    <dt>CSS</dt>
    <dd>Webページのデザインやレイアウトを設定するスタイルシート言語</dd>
</dl>

使用できる主な属性

<dd>タグには特別な属性はありませんが、一般的なHTML要素の属性を使用できます。

属性名	説明	例
class	CSSのクラスを適用	<dd class="definition-text">...</dd>
id	一意の識別子を設定	<dd id="html-definition">...</dd>
style	インラインスタイルを適用	<dd style="color: gray;">...</dd>

CSSを使ったデザイン変更

定義リストの説明部分を見やすくしたい場合は、CSSを活用できます。

dd {
    margin-left: 20px;
    color: #666;
    font-size: 14px;
}

適切な使用例

✅ <dd> を使って用語の説明を作成する

<dl>
    <dt>ブラウザ</dt>
    <dd>Webページを閲覧するためのソフトウェア</dd>
    <dt>レスポンシブデザイン</dt>
    <dd>デバイスの画面サイズに応じてレイアウトを調整するデザイン手法</dd>
</dl>

✅ <dd> を使ってFAQを作成する

<dl>
    <dt>Q: HTMLとは何ですか？</dt>
    <dd>A: Webページを作成するための言語です。</dd>
    <dt>Q: CSSとは何ですか？</dt>
    <dd>A: Webページのデザインを設定するための言語です。</dd>
</dl>

適切でない使用例（誤った使い方）

❌ <dd> を <dl> の外で使用するのはNG

<!-- NG: <dl> の外に <dd> を記述 -->
<dt>HTML</dt>
<dd>Webページを作成するための言語</dd>

✅ 正しい書き方（<dl>の中に配置）

<dl>
    <dt>HTML</dt>
    <dd>Webページを作成するための言語</dd>
</dl>

❌ <dd> を <dt> なしで使用するのはNG

<!-- NG: <dt> なしで <dd> を記述 -->
<dl>
    <dd>この説明には見出しがありません。</dd>
</dl>

✅ 正しい書き方（<dt> とセットで使用）

<dl>
    <dt>JavaScript</dt>
    <dd>動的なWebサイトを作成するためのプログラミング言語</dd>
</dl>

<dd>タグと他のタグの違い

タグ	役割	特徴	適切な用途
<dd>	定義リストの説明を記述	<dt> の後に記述	用語の説明や回答
<dt>	定義リストの用語を記述	<dl>内で使用	質問や用語の見出し
<ul>	順序のないリストを作成	リストマーカー（●、■ など）を表示	箇条書き、メニュー
<ol>	順序のあるリストを作成	番号付きリスト（1, 2, 3…）	手順の説明、ランキング

使用上の注意点

✅ <dd> は <dl>の中でのみ使用する

• <dd> を単体で使用しない。

✅ <dd> の前には必ず <dt> を記述する

• <dd> だけで説明を記述せず、必ず用語（<dt> ）とセットで使う。

関連タグ

• <dl>– 定義リスト（用語＋説明）
• <dt> – 定義リストの用語
• <ul> – 順序のないリスト
• <ol> – 順序のあるリスト

まとめ

<dd>タグは、HTML文書内で定義リスト（<dl>）内の <dt>に対応する説明を記述するためのタグです。<dl>の中で<dt>（用語）とセットで使用し、FAQや用語集の作成に適しています。