The <dl> element in HTML is used to create a description list by pairing a term (<dt>) with its description (<dd>).
<dl>要素とは？<dl>（Description List）は、名称と値のペアを列挙するためのリスト要素です。HTML4までは「定義リスト（Definition List）」と呼ばれていましたが、現在は仕様上「説明リスト」とされています。MDNなどの文書でも “Description list” の呼称が採用されています。
<dl> 内には、用語や名称を表す <dt>（description term）と、その説明や値を表す <dd>（description detail）が対で入ります。
<dt> に複数の <dd> を対応させることができます。<dt> に1つの <dd> を共有させることも可能です。<dt>群の直後に対応する<dd>群」が来るようにします。これはアクセシビリティ上も重要です。コード例
HTML
<dl>
<dt>HTML</dt>
<dd>Webページを構造化するためのマークアップ言語。</dd>
<dt>CSS</dt>
<dd>Webページの見た目を装飾するためのスタイルシート言語。</dd>
</dl>複数対応の例
HTML
<dl>
<dt>HTTP</dt>
<dt>HyperText Transfer Protocol</dt>
<dd>WebブラウザとWebサーバー間で通信を行うためのプロトコル。</dd>
</dl><dl>要素の基本的な使い方<dt> を質問、<dd> を回答としてFAQ形式にするのは一般的なパターンです。HTML
<dl>
<dt>返品は可能ですか？</dt>
<dd>商品到着から7日以内であれば可能です。</dd>
</dl><dt>）と価格や説明（<dd>）を組み合わせるケースもあります。<ul>や<ol>との違い<ul>や<ol>は同じ種類の複数の項目を並べるのに適しています。<dl>は「用語」と「説明」のセットを繰り返す構造に適しています。たとえば「見出しと段落のように構造を分けて表現したい」「用語とその補足情報をはっきり示したい」ときに<dl>を使うと、HTML文書の意味づけ（セマンティクス）が分かりやすくなります。
HTML仕様では、<dt>群と<dd>群をまとめて<div>で包むことが許可されています。これにより、スタイルをまとめて適用したり、マイクロデータやグローバル属性を一括で付与できます。意味論は変わらず、表示やデータ構造の整理に便利です。
HTML
<dl>
<div>
<dt>CPU</dt>
<dd>Intel Core i7</dd>
</div>
<div>
<dt>RAM</dt>
<dd>16GB</dd>
</div>
</dl>※ グルーピングしても意味論は変わりません。見た目は通常変わりませんが、スタイル指定やブラウザ差によって表示が変化する場合があります。
入れ子は「禁止」ではありません。意味が明確な階層構造を表す場合は有効で、特に<dd>の中に補助的な<dl>を入れるのは妥当です。ただし、階層が深くなりすぎると可読性や理解が低下するため注意が必要です。
HTML
<dl>
<dt>プログラミング言語</dt>
<dd>
<dl>
<dt>JavaScript</dt>
<dd>Webブラウザで動作するスクリプト言語。</dd>
<dt>Python</dt>
<dd>汎用性の高いスクリプト言語。</dd>
</dl>
</dd>
</dl>多くのブラウザには、<dl>・<dt>・<dd>に既定のユーザーエージェント（UA）スタイルが設定されています。例えば、<dd>にはインデント（字下げ）が付き、<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-columnsdt）を120pxの固定幅、説明（dd）を残りの幅いっぱいに割り当てています。必要に応じて割合指定 (2fr 3fr など) に変えることも可能です。gapgap: 0.5em 1em;は「行間：0.5em、列間：1em」を指定しています。このようにCSS Gridを用いると、テーブルではなく純粋なリスト要素のまま、シンプルかつ柔軟にレイアウトを組めるようになります。ブラウザの対応状況も比較的広いため、より自然に「用語→説明」の関係を見せたい場合に便利です。
<dt>と<dd>の対応関係は順序が重要です。関連する<dt>群の直後に対応する<dd>群を置くことで、スクリーンリーダーなどの支援技術が正しい対応関係を把握できます。構造を守ることが、利用者へ正確に情報を伝える近道です。
<dl>はあくまでも用語（<dt>）と説明（<dd>）のペアを表現するために用いるのが基本です。意味的に正しくない使い方は避けましょう。例えば、単に複数行に渡る文章を<dd>で区切りたいだけなら、<dl>ではなく<p>や<div>を使うほうが適切です。
<dt>）と詳細・価格（<dd>）<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><dl>自体が直接SEO評価を高めるわけではありませんが、情報の意味が明確になるため検索エンジンが内容を理解しやすくなり、間接的な効果は期待できます。
<dl> は「名前と値のペア」を表すため、構造化データのマークアップにも自然に適しています。
特に、schema.org の語彙と microdata 属性（itemscope、itemtype、itemprop）を組み合わせることで、検索エンジンに意味情報を正確に伝えられます。
以下は人物プロフィール情報を表すシンプルな実例です。
HTML
<dl itemscope itemtype="https://schema.org/Person">
<dt>Name</dt>
<dd itemprop="name">Taro Yamada</dd>
<dt>Job Title</dt>
<dd itemprop="jobTitle">Web Developer</dd>
<dt>Email</dt>
<dd>
<a href="mailto:[email protected]" itemprop="email">[email protected]</a>
</dd>
<dt>Website</dt>
<dd>
<a href="https://example.com" itemprop="url">https://example.com</a>
</dd>
</dl>このように、見た目は通常の定義リストとして表示されますが、HTML内に機械可読な意味情報が埋め込まれます。
検索エンジンや他のシステムが情報を正しく理解できるため、プロフィールページや会社概要などで特に有効です。
必要に応じて項目を追加し、itemprop の値は schema.org/Person の定義に沿って設定します。
<dl> を使えば、用語やフレーズの多言語訳を見やすくまとめられます。
1つの <dt> に複数の <dd> を対応させることで、同じ語の各言語での訳を並べることができます。
HTML
<dl>
<dt>Hello</dt>
<dd>こんにちは（日本語）</dd>
<dd>Bonjour（フランス語）</dd>
<dd>Hola（スペイン語）</dd>
</dl>