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

JavaScript

2026.06.02

dl 要素は「用語とその説明（ペアの一覧）」の箱
dl・dt・dd の役割をセットで理解する
1. 3 つで 1 セット：dl（箱）・dt（用語）・dd（説明）
プロフィールやスペック表に使うと“意味がきれい”
1. プロフィール情報を dl で書く例
2. 商品スペックにもぴったり
1 つの dt に複数の dd をぶら下げることもできる
1. 「1 つの用語に、説明がいくつもある」パターン
FAQ（よくある質問）を dl で書くパターン
1. Q を dt、A を dd にする
JavaScript と dl：オブジェクト → 定義リストの生成
1. オブジェクトの「キー：値」をそのまま画面に出す
dl を使うか迷ったときの判断基準
1. 自分にこう聞いてみる
初心者として「dl タグ」で絶対に掴んでほしいこと

dl 要素は「用語とその説明（ペアの一覧）」の箱

<dl> は
「用語（ラベル）と、その説明（値）」のペアを並べるための箱
だと思ってください。

“d” は definition（定義）、
dl は definition list（定義リスト）の略です。

「用語集」だけじゃなくて、

プロフィール（項目名：値）
商品スペック（項目名：値）
フォームの確認画面（項目名：入力内容）

みたいな「ラベル：内容」の一覧にも、とても相性がいいタグです。

dl・dt・dd の役割をセットで理解する

3 つで 1 セット：dl（箱）・dt（用語）・dd（説明）

<dl> は「全体の箱」です。
中に 2 種類の要素を入れます。

dt … term（用語・ラベル）
dd … description（説明・値）

イメージで書くと、こういう構造です。

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

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

ここでの意味は、

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

という「ペアの一覧」です。

<ul> や <ol> が「項目の一覧」なのに対して、
<dl> は「ラベルと値のペアの一覧」として使う、という違いがあります。

プロフィールやスペック表に使うと“意味がきれい”

プロフィール情報を dl で書く例

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

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

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

これを CSS で「項目名：値」の形に整えると、
よく見るプロフィール表になります。

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

dt {
  font-weight: bold;
}

dd {
  margin: 0;
}

意味としては
「dt がラベル、dd がその中身」
という構造がはっきりしているので、
スクリーンリーダーや検索エンジンにも伝わりやすくなります。

商品スペックにもぴったり

<dl>
  <dt>サイズ</dt>
  <dd>幅 120cm × 奥行き 60cm × 高さ 70cm</dd>

  <dt>素材</dt>
  <dd>オーク無垢材</dd>

  <dt>耐荷重</dt>
  <dd>80kg</dd>
</dl>

「スペックの項目名」と「その値」のペアが並ぶとき、
<dl> はとても自然にハマります。

1 つの dt に複数の dd をぶら下げることもできる

「1 つの用語に、説明がいくつもある」パターン

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

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

ここでは、

用語：JavaScript
説明：ブラウザ上で動くプログラミング言語
説明：サーバーサイドでも使われることがある

という「1 対複数」の関係になっています。

用語集や FAQ などで、
「同じ用語に対して補足説明をいくつか並べたい」
というときに便利です。

FAQ（よくある質問）を dl で書くパターン

Q を dt、A を dd にする

FAQ も「ラベル：内容」の関係なので、
<dl> で書くと意味がきれいに表現できます。

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

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

CSS で Q と A の見た目を変えれば、
よくある FAQ セクションになります。

dt {
  font-weight: bold;
  margin-top: 1rem;
}

dd {
  margin: 0 0 0.5rem 0;
}

「Q と A がペアになっている」という構造が
HTML レベルで表現できているのがポイントです。

JavaScript と dl：オブジェクト → 定義リストの生成

オブジェクトの「キー：値」をそのまま画面に出す

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

これを <dl> に変換すると、
「ラベル：内容」の一覧として表示できます。

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;
  dd.textContent = value;

  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;
  dd.textContent = value;

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