HTML 定義リスト <dl> タグ

JPKODA 編集部 May 6, 2026

定義リスト（Definition List）は、用語とその対応する定義や説明を提示するための構造化された手法を提供します。

項目の順序に主眼を置く無順序リスト（<ul>）や順序付きリスト（<ol>）とは異なり、定義リストは用語とその意味の間の関係性を示すように設計されています。

これにより、用語集、よくある質問（FAQ）、あるいは名称と詳細な解説を関連付ける必要があるあらゆるコンテンツに最適です。<dl>、<dt>、<dd> タグを効果的に使いこなすことで、よりセマンティック（Semantic）でアクセシブルな HTML ドキュメントを作成できるようになります。

1. 定義リストを理解する：`<dl>` タグ

<dl> タグは "Definition List"（定義リスト）の略称です。

役割: 定義リスト全体の構造を保持するコンテナ（Container）です。
構造: すべての用語と説明を包み込む親要素として機能します。
ルール: 有効なリストを作成するには、<dl> タグの内部に必ず <dt>（定義用語）と <dd>（定義説明）を配置しなければなりません。

例：

<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language の略。ウェブブラウザで表示されるドキュメントを設計するための標準的なマークアップ言語です。</dd>
    
  <dt>CSS</dt>
  <dd>Cascading Style Sheets の略。HTML などのマークアップ言語で記述されたドキュメントの表現（スタイル）を記述するためのスタイルシート言語です。</dd>
</dl>

この例では、<dl> タグがリスト全体を包み、その中に 2 つの用語（HTML と CSS）とそれぞれの定義が含まれています。

2. 定義用語：`<dt>` タグ

<dt> タグは "Definition Term"（定義用語）を指します。

役割: 定義または説明したい名前や用語を格納します。
配置: 各 <dt> タグは <dl> タグの直下に配置する必要があります。
多対一の関係: 一つの <dd> の前に複数の <dt> タグを配置し、複数の用語で一つの定義を共有させることも可能です。

複数用語の例：

<dl>
  <dt>セマンティック HTML</dt>
  <dt>意味論的 HTML</dt>
  <dd>外見上の表現だけでなく、コンテンツの意味を伝えるためにタグを使用する HTML の記述方法。</dd>
</dl>

このケースでは、「セマンティック HTML」と「意味論的 HTML」が同じ定義を共有しています。

3. 説明を提供する：`<dd>` タグ

<dd> タグは "Definition Description"（定義説明）を表し、定義そのものを記述します。

役割: 直前の <dt> タグで定義された用語に対して、解説や説明を提供します。
配置: <dt> と同様に、<dd> タグは必ず <dl> タグの直下に配置します。

詳細な説明の例：

<dl>
  <dt>アクセシビリティ (Accessibility)</dt>
  <dd>Web アクセシビリティとは、障害を持つ人、一時的な制約がある人、あるいは帯域幅や回線速度に制限がある人などが、ウェブサイトを操作したりアクセスしたりすることを妨げる障壁をなくすための包括的な慣行を指します。</dd>
</dl>

4. ネストと構造化

<dl> 要素同士を直接ネスト（入れ子）にすることはできませんが、<dt> や <dd> タグの内部に他の HTML 要素を含めることで、構造やフォーマットを豊かにすることができます。これにより、より複雑な定義やリッチなコンテンツの作成が可能になります。

<dd> 内部で HTML 要素を使用する例：

<dl>
  <dt>HTML</dt>
  <dd>
    <p>HyperText Markup Language の略。ウェブブラウザで表示されるドキュメントを設計するための標準的なマークアップ言語です。</p>
    <p>CSS や JavaScript といった技術と組み合わせて使用されます。</p>
  </dd>
</dl>

この例では、<dd> タグ内で <p>（段落）タグを使用し、定義を複数の段落に分割しています。

5. 実戦的なサンプルとデモ

定義リストの効果的な活用シーンをいくつか見ていきましょう。

5.1 用語集 (Glossary)

定義リストは用語集を作成するのに理想的で、重要な概念を明確かつ整然と定義できます。

<dl>
  <dt>アルゴリズム (Algorithm)</dt>
  <dd>コンピュータが問題を解決するために従う一連のルールや手順。</dd>
    
  <dt>バグ (Bug)</dt>
  <dd>コンピュータプログラムにおいて、誤った結果や予期しない動作を引き起こすエラーのこと。</dd>
    
  <dt>デバッグ (Debugging)</dt>
  <dd>コンピュータプログラム内のバグを見つけ出し、修正するプロセス。</dd>
</dl>

5.2 よくある質問 (FAQs)

質問を用語（<dt>）、回答を説明（<dd>）として構成することで、FAQ を構築できます。

<dl>
  <dt>HTML とは何ですか？</dt>
  <dd>HTML は HyperText Markup Language の略です。ウェブページを作成するための標準的なマークアップ言語です。</dd>
    
  <dt>CSS とは何ですか？</dt>
  <dd>CSS は Cascading Style Sheets の略です。HTML 要素のスタイルを設定し、ウェブページのレイアウトを制御するために使用されます。</dd>
    
  <dt>JavaScript とは何ですか？</dt>
  <dd>JavaScript は、動的に更新されるコンテンツの作成、マルチメディアの制御、画像のアニメーションなど、ほぼすべての動的な動作を可能にするプログラミング言語です。</dd>
</dl>

5.3 製品機能の紹介

製品やサービスの機能をハイライトする際にも定義リストが役立ちます。

<dl>
  <dt>レスポンシブデザイン</dt>
  <dd>あらゆるユーザーに最適な閲覧体験を提供するため、ウェブサイトが異なる画面サイズやデバイスに適応することを保証します。</dd>
    
  <dt>クロスブラウザ互換性</dt>
  <dd>Chrome, Firefox, Safari, Edge を含むすべての主要なブラウザでウェブサイトがシームレスに動作します。</dd>
    
  <dt>SEO 最適化</dt>
  <dd>検索エンジン結果での可視性を高めるため、最新の SEO 技術を導入しています。</dd>
</dl>

1. 定義リストを理解する：<dl> タグ

2. 定義用語：<dt> タグ

3. 説明を提供する：<dd> タグ