HTML

The <dl> element in HTML is used to create a description list by pairing a term (<dt>) with its description (<dd>).

dl 要素

<dl>要素とは？

<dl>はHTMLで「定義リスト (description list)」を作るための要素です。HTML4までは「定義リスト」という名称でしたが、HTML5以降は主に「説明リスト」「ディスクリプションリスト」として使われるケースもあります。リストと言っても、<ul>（順不同リスト）や<ol>（番号付きリスト）とは用途が異なり、「用語とその定義を組み合わせて分かりやすく提示する」ための構造を提供します。

基本となる要素と構造

<dl>
リスト全体を包むコンテナ要素
<dt>
定義する用語や名前（term）
<dd>
上記用語に対する説明、解説、定義内容（description）

例：単純なサンプル

HTML

<dl>
	<dt>HTML</dt>
	<dd>HyperText Markup Language の略称。Webページの骨組みを記述するためのマークアップ言語。</dd>
	<dt>CSS</dt>
	<dd>Cascading Style Sheets の略称。Webページの見た目をデザインするためのスタイルシート言語。</dd>
</dl>
HTML
HyperText Markup Language の略称。Webページの骨組みを記述するためのマークアップ言語。
CSS
Cascading Style Sheets の略称。Webページの見た目をデザインするためのスタイルシート言語。

<dl>要素の基本的な使い方

どのような場面で使う？

用語集や用語解説
用語や略語がたくさん出てくるWebサイトで、各用語に対して説明を付けたい時に便利です。
FAQ（よくある質問）の一覧
質問（<dt>）と答え（<dd>）の組み合わせでFAQを作成できます。
メニューと価格一覧
レストランのサイトなどで、メニュー名（<dt>）と価格や説明（<dd>）を組み合わせるケースもあります。

<ul>や<ol>との違い

たとえば「見出しと段落のように構造を分けて表現したい」「用語とその補足情報をはっきり示したい」ときに<dl>を使うと、HTML文書の意味づけ（セマンティクス）が分かりやすくなります。

シンプルな例

HTML

<dl>
	<dt>Username</dt>
	<dd>英数字とアンダースコアのみ使用可能</dd>
	<dt>Email Address</dt>
	<dd>有効なメールアドレス形式を入力してください</dd>
</dl>
Username
英数字とアンダースコアのみ使用可能
Email Address
有効なメールアドレス形式を入力してください

より深い活用方法と注意点

複数の<dt>に対して一つの<dd>を結びつける

HTMLでは、<dt>と<dd>が1対1の関係だけでなく、複数の<dt>に対して1つの<dd>を使うこともできます。たとえば、類義語や異なる表記の単語をまとめて一つの説明にしたい場合などに便利です。

例：複数の用語に対する同じ説明

HTML

<dl>
	<dt>Dog</dt>
	<dt>Canine</dt>
	<dd>イヌ科に属する動物で、古くから人間と共存してきた。</dd>
</dl>
Dog
Canine
イヌ科に属する動物で、古くから人間と共存してきた。

このように書くと、DogとCanineが同じ説明に紐づく形になります。

HTMLの仕様的には正しい書き方ですが、ユーザーに分かりやすい表示になるようにCSSなどで表示方法を工夫するとよいでしょう。

<dd>を複数配置して詳細な説明を分割する

逆に、一つの用語に対して複数の説明を用意することも可能です。用途によっては次のように、ポイントごとに<dd>を分けて段階的に説明する場合があります。

HTML

<dl>
	<dt>JavaScript</dt>
	<dd>クライアントサイドで動作するスクリプト言語。</dd>
	<dd>Webブラウザ上で動的にページの内容を変更できる。</dd>
	<dd>サーバーサイド（Node.js）としても利用可能。</dd>
</dl>
JavaScript
クライアントサイドで動作するスクリプト言語。
Webブラウザ上で動的にページの内容を変更できる。
サーバーサイド（Node.js）としても利用可能。

このように書くと、ブラウザのデフォルト表示ではすべての<dd>が改行されて並ぶ形になります。必要に応じてCSSで装飾やレイアウトをコントロールしましょう。

入れ子構造（ネスト）の注意点

<dl>内で更に別の<dl>を使いたいケースもあるかもしれませんが、基本的にはあまり推奨されません。ネスト構造が深くなるほど、ユーザーにも意味を理解しづらい状態になる可能性があります。もし入れ子にしたい場合は、文書全体の意味や可読性を考え、セクション要素（<section>や<article>など）を使って整理したほうがより分かりやすい場合が多いです。

スタイリングとカスタマイズ

<dl>そのものにはデフォルトのブラウザスタイルがほとんどありません。表現力を高めるためにCSSを使って自由にレイアウトを変えられます。

横並びレイアウトの例

HTML

<dl>
	<dt>タイトル</dt>
	<dd>サンプルとなる説明文です。</dd>
	<dt>別のタイトル</dt>
	<dd>別の説明文も同様に並べられます。</dd>
</dl>

CSS

dl {
	display: grid;
	/* 左右2列に分ける。左列は固定幅、右列は残りのスペースを使う例 */
	grid-template-columns: 120px 1fr;
	/* 縦と横の隙間を調整 */
	gap: 0.5em 1em;
	margin: 0;
	padding: 0;
}

/* 用語側のスタイル */
dt {
	text-align: right;    /* 見やすいように右寄せ */
	font-weight: bold;    /* 強調表示 */
	margin: 0;
}

/* 説明側のスタイル */
dd {
	margin: 0;
}
タイトル
サンプルとなる説明文です。
別のタイトル
別の説明文も同様に並べられます。

ポイント

grid-template-columns
ここでは、用語（dt）を120pxの固定幅、説明（dd）を残りの幅いっぱいに割り当てています。必要に応じて割合指定 (2fr 3fr など) に変えることも可能です。
gap
行間や列間の余白を自由に調整できます。gap: 0.5em 1em;は「行間：0.5em、列間：1em」を指定しています。
レスポンシブ対応
固定幅の120pxが小さいデバイスでは圧迫感を与える場合があります。メディアクエリを用いて、画面幅が狭いときは1カラム表示にするなどの工夫をするとより使いやすくなります。

このようにCSS Gridを用いると、テーブルではなく純粋なリスト要素のまま、シンプルかつ柔軟にレイアウトを組めるようになります。ブラウザの対応状況も比較的広いため、より自然に「用語→説明」の関係を見せたい場合に便利です。

アクセシビリティとセマンティクス

アクセシビリティへのメリット

スクリーンリーダーなどの支援技術で文書を読み上げる場合、<dl>を正しく使っていると「これは用語とその定義を示しているリストである」という情報を認識してもらえます。視覚に頼らなくても、構造的に「用語→説明」の流れが理解しやすくなるため、アクセシビリティが向上します。

意味的に正しい使い方を心がける

<dl>はあくまでも用語（<dt>）と説明（<dd>）のペアを表現するために用いるのが基本です。意味的に正しくない使い方は避けましょう。例えば、単に複数行に渡る文章を<dd>で区切りたいだけなら、<dl>ではなく<p>や<div>を使うほうが適切です。

応用的な活用アイデア

商品リスト・スペック表などへの活用

商品名（<dt>）と詳細・価格（<dd>）
やや強引ですが、ECサイトの商品ページなどで活用可能です。<dl>を使うことで、商品名とその詳細説明を明確に紐づけられます。
スペック（<dt>）と値（<dd>）
パソコンやスマートフォンのスペック一覧を<dl>で作ると、各スペック項目とその値が対になり、セマンティクス的にも正しい形で表現できます。

HTML

<dl>
	<dt>CPU</dt>
	<dd>Intel Core i7</dd>
	<dt>RAM</dt>
	<dd>16GB</dd>
	<dt>ストレージ</dt>
	<dd>512GB SSD</dd>
</dl>
CPU
Intel Core i7
RAM
16GB
ストレージ
512GB SSD

SEOとの関係

適切に<dl>を使うことで、Googleなどの検索エンジンに対して「このページでは用語とその説明を提供している」ことを示すことができます。ただし、<dl>を使ったからといって直接SEOが大きく向上するわけではありません。ユーザーにとって分かりやすいマークアップは結果的に検索エンジンにも好影響をもたらすことが多いので、必要に応じて適切に使用するのが基本方針です。

まとめ

<dl>を適切に使うことで、サイトの可読性と理解度は大きく向上します。