JavaScript | HTML / CSS 連携：リスト・表組み－ dtタグ

JavaScript

2026.06.02

dt 要素は「ラベル側（項目名・用語）」を表すタグ
dt・dd・dl の関係をもう一度整理する
1. 「ラベル：値」の“ラベル側”が dt
プロフィールでの dt の使いどころ
1. 「項目名」を全部 dt にする
用語集や FAQ での dt の役割
1. 用語集：用語が dt、説明が dd
2. FAQ：質問を dt、答えを dd にする
1 つの dt に複数の dd をぶら下げるときの dt の意味
1. 「このラベルに対する説明がいくつかある」という構造
JavaScript と dt：オブジェクトの「キー側」として扱う
1. オブジェクトのキーを dt、値を dd にする
dt を使うか迷ったときの判断基準
1. 「これは“ラベル側”か？」と自分に聞く
初心者として「dt タグ」で絶対に掴んでほしいこと

dt 要素は「ラベル側（項目名・用語）」を表すタグ

<dt> は
「これは“名前・ラベル・用語”の側ですよ」
と示すためのタグです。

単体では使わず、必ず <dl> の中で
「ラベル（dt）」「その中身（dd）」
というペアの“ラベル側”を担当します。

ざっくり言うと、

dl … ラベルと中身のペアの“一覧の箱”
dt … ラベル・項目名・用語
dd … その説明・値・内容

という役割分担です。

dt・dd・dl の関係をもう一度整理する

「ラベル：値」の“ラベル側”が dt

まず全体像から。

<dl>
  <dt>名前</dt>
  <dd>山田太郎</dd>

  <dt>職業</dt>
  <dd>Web エンジニア</dd>
</dl>

ここでの意味はこうです。

「名前」というラベル（dt） → 「山田太郎」という値（dd）
「職業」というラベル（dt） → 「Web エンジニア」という値（dd）

<dt> は、
「このあとに、その説明（dd）が続く“見出し的な側”」
だとイメージすると分かりやすいです。

<dl> 全体が「ラベルと値の一覧」
その中で、dt が「ラベル」、dd が「ラベルに対応する中身」
という構造になっています。

プロフィールでの dt の使いどころ

「項目名」を全部 dt にする

プロフィール情報は、
dt の典型的な使いどころです。

<dl>
  <dt>名前</dt>
  <dd>山田太郎</dd>

  <dt>職業</dt>
  <dd>Web エンジニア</dd>

  <dt>趣味</dt>
  <dd>コーヒー、読書、散歩</dd>
</dl>

ここで dt はすべて「項目名」です。

名前
職業
趣味

これらは「ラベル」であり、
その右側（dd）が「値」です。

CSS で「左に dt、右に dd」というレイアウトにすると、
よくある“項目名：内容”のプロフィール表になります。

dl {
  display: grid;
  grid-template-columns: 120px 1fr;
  row-gap: 4px;
}

dt {
  font-weight: bold;
}

dd {
  margin: 0;
}

dt を「ラベル専用タグ」として使うことで、
HTML の意味も、見た目の構造も、きれいに揃います。

用語集や FAQ での dt の役割

用語集：用語が dt、説明が dd

用語集も、dt が気持ちよくハマるパターンです。

<dl>
  <dt>JavaScript</dt>
  <dd>ブラウザ上で動くプログラミング言語。</dd>

  <dt>DOM</dt>
  <dd>HTML を「木構造」として扱うための仕組み。</dd>
</dl>

ここでは、

dt … 用語そのもの
dd … その用語の説明

という関係です。

FAQ：質問を dt、答えを dd にする

FAQ も「ラベル：内容」の関係なので、
dt が「質問」、dd が「答え」を担当できます。

<dl>
  <dt>Q. 送料はいくらですか？</dt>
  <dd>A. 全国一律 500 円です。</dd>

  <dt>Q. 支払い方法は何がありますか？</dt>
  <dd>A. クレジットカード、銀行振込、コンビニ払いに対応しています。</dd>
</dl>

ここで dt は
「このあとに続く dd の“見出し・ラベル”」
という役割を担っています。

1 つの dt に複数の dd をぶら下げるときの dt の意味

「このラベルに対する説明がいくつかある」という構造

<dl> の面白いところは、
1 つの dt に対して複数の dd を書けることです。

<dl>
  <dt>JavaScript</dt>
  <dd>ブラウザ上で動くプログラミング言語。</dd>
  <dd>サーバーサイドでも使われることがある。</dd>
</dl>

ここで dt は 1 つだけですが、
その「JavaScript」というラベルに対して
説明（dd）が 2 つぶら下がっています。

このとき dt は、
「このあとに続く複数の dd の“共通のラベル”」
という役割になります。

「このラベルに関する説明がいくつか続きますよ」
という“入口”を示しているイメージです。

JavaScript と dt：オブジェクトの「キー側」として扱う

オブジェクトのキーを dt、値を dd にする

JavaScript のオブジェクトは
「キー：値」のペアの集まりですよね。

これを <dl> に変換するとき、
キーが dt、値が dd になります。

const profile = {
  名前: "山田太郎",
  職業: "Web エンジニア",
  趣味: "コーヒー、読書、散歩",
};

const dl = document.querySelector("#profile");

Object.entries(profile).forEach(([key, value]) => {
  const dt = document.createElement("dt");
  const dd = document.createElement("dd");

  dt.textContent = key;    // ← ここが dt（ラベル）
  dd.textContent = value;  // ← ここが dd（値）

  dl.appendChild(dt);
  dl.appendChild(dd);
});

const profile = {
  名前: "山田太郎",
  職業: "Web エンジニア",
  趣味: "コーヒー、読書、散歩",
};

const dl = document.querySelector("#profile");

Object.entries(profile).forEach(([key, value]) => {
  const dt = document.createElement("dt");
  const dd = document.createElement("dd");

  dt.textContent = key;    // ← ここが dt（ラベル）
  dd.textContent = value;  // ← ここが dd（値）

  dl.appendChild(dt);
  dl.appendChild(dd);
});