HTML Living Standard/dl

dl 要素

<dl>要素要素は、定義リスト (description list) を表現するために使用されます。この要素は、用語とその説明、またはアイテムとその関連情報のペアをリストとして表現する際に使用されます。

基本構造

以下は、<dl>要素要素の基本的な構造の例です：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Definition List Example</title>
  </head>
  <body>
    <dl>
      <dt>HTML</dt>
      <dd>HyperText Markup Language の略称。</dd>
      <dt>CSS</dt>
      <dd>Cascading Style Sheets の略称。</dd>
      <dt>JavaScript</dt>
      <dd>Webページにインタラクティブ性を追加するためのプログラミング言語。</dd>
    </dl>
  </body>
</html>

この例では、<dl>要素要素内に複数の用語 (<dt>要素) とその説明 (<dd>要素) が含まれています。

子要素

<dl>要素要素は、以下の子要素を含むことができます：

<dt>要素 (definition term): 定義リスト内の用語を表します。
<dd>要素 (definition description): 用語に関連付けられた説明や詳細を表します。

例：

<dl>
  <dt>HTML</dt>
  <dd>ウェブページを構成するためのマークアップ言語。</dd>
</dl>

<dt>要素と <dd>要素はペアで使用されるのが一般的ですが、1つの <dt>要素に複数の <dd>要素を関連付けることも可能です。

ネストされた構造

<dl>要素要素はネストされた構造をサポートしており、階層的な情報を表現する際に便利です。

例：

<dl>
  <dt>フルーツ</dt>
  <dd>
    <dl>
      <dt>りんご</dt>
      <dd>赤い果物。</dd>
      <dt>バナナ</dt>
      <dd>黄色い果物。</dd>
    </dl>
  </dd>
  <dt>野菜</dt>
  <dd>
    <dl>
      <dt>にんじん</dt>
      <dd>オレンジ色の根菜。</dd>
      <dt>キャベツ</dt>
      <dd>葉が重なった野菜。</dd>
    </dl>
  </dd>
</dl>

アクセシビリティ

<dl>要素要素は、スクリーンリーダーなどの支援技術で正しく認識されるため、アクセシビリティが高い要素です。特に、用語とその説明の関係性を明確に伝えることができます。

適切なラベルや説明を追加することで、さらにアクセシビリティを向上させることができます：

<dl aria-label="プログラミング用語の定義">
  <dt>API</dt>
  <dd>アプリケーションプログラミングインターフェース。</dd>
  <dt>DOM</dt>
  <dd>ドキュメントオブジェクトモデル。</dd>
</dl>

CSS を使用したスタイリング

<dl>要素要素はデフォルトで縦方向のリストとして表示されますが、CSS を使用してスタイルを変更できます。

例：

<dl style="display: flex; flex-direction: column; gap: 10px;">
  <dt>HTML</dt>
  <dd>HyperText Markup Language の略称。</dd>
  <dt>CSS</dt>
  <dd>Cascading Style Sheets の略称。</dd>
</dl>

また、<dt>要素と <dd>要素に個別のスタイルを適用することも可能です：

<dl>
  <dt style="font-weight: bold;">HTML</dt>
  <dd style="margin-left: 20px;">HyperText Markup Language の略称。</dd>
</dl>

使用例

基本例

<dl>
  <dt>地球</dt>
  <dd>人類が住む惑星。</dd>
  <dt>月</dt>
  <dd>地球の唯一の衛星。</dd>
</dl>

ネスト例

<dl>
  <dt>動物</dt>
  <dd>
    <dl>
      <dt>哺乳類</dt>
      <dd>乳を飲んで育つ動物。</dd>
      <dt>鳥類</dt>
      <dd>羽を持つ動物。</dd>
    </dl>
  </dd>
</dl>

注意点

構造の明確化:
<dt>要素と <dd>要素のペアを正確に指定し、情報の意味が明確になるように記述します。
スタイリングの柔軟性:
デフォルトのスタイルはリスト形式ですが、必要に応じてCSSでカスタマイズしてください。
アクセシビリティ:
ARIA属性を使用して、リストの意味を補強することを検討してください。

練習問題

練習1: <dl>要素要素を使用して、用語とその説明のリストを作成してください。
練習2: ネストされた <dl>要素要素を作成し、階層的な情報を表現してみてください。
練習3: CSS を使用して <dl>要素要素のスタイルをカスタマイズしてみてください。