HTML Living Standard/dd

dd 要素

<dd> 要素は、定義リスト (description list) の中で「定義」や「説明」などを表現するために使用されます。<dl> 要素の子要素として使用され、対応する <dt> 要素で示された用語や名前の説明を補足します。

基本構造

以下は、<dd> 要素を使用した基本的な定義リストの例です：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Definition Description Example</title>
  </head>
  <body>
    <dl>
      <dt>HTML</dt>
      <dd>HyperText Markup Language の略称。</dd>
      <dt>CSS</dt>
      <dd>Cascading Style Sheets の略称。</dd>
    </dl>
  </body>
</html>

この例では、<dd> 要素が <dt> 要素で示された用語の説明として使用されています。

使用上の注意

<dd> は必ず <dl> の直下で使用します。
<dd> 要素は、<dl> 要素の子要素としてのみ使用できます。単独では意味を成しません。
複数の <dd> を1つの <dt> に関連付けることが可能です。
必要に応じて、1つの用語に複数の説明を追加することができます。

例：
```
<dl>
  <dt>HTML</dt>
  <dd>ウェブページを構成するマークアップ言語。</dd>
  <dd>最新の仕様は HTML Living Standard。</dd>
</dl>
```
<dd> 要素は単独でも複数の <dt> と関連付けることが可能です。
複数の用語に対する共通の説明を提供する場合に役立ちます。

例：
```
<dl>
  <dt>HTML</dt>
  <dt>CSS</dt>
  <dd>ウェブ技術の基本。</dd>
</dl>
```

スタイリング

<dd> 要素のデフォルトのスタイルはブラウザによって異なりますが、通常はインデントされて表示されます。CSS を使用して、スタイルをカスタマイズすることができます。

例：

<dl>
  <dt>JavaScript</dt>
  <dd style="color: green;">ウェブページにインタラクティブな要素を追加するためのプログラミング言語。</dd>
</dl>

また、インデントを変更したり背景色を付けたりすることも可能です：

<dl>
  <dt>HTML</dt>
  <dd style="margin-left: 40px; background-color: #f0f0f0;">HyperText Markup Language の略称。</dd>
</dl>

アクセシビリティ

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

例：

<dl aria-label="プログラミング言語の定義リスト">
  <dt>Python</dt>
  <dd>シンプルで読みやすい文法を持つ高級プログラミング言語。</dd>
</dl>

使用例

基本例

<dl>
  <dt>CSS</dt>
  <dd>ウェブページのスタイルを指定するための言語。</dd>
</dl>

複数定義の関連付け

<dl>
  <dt>HTML</dt>
  <dd>ウェブページを構成する基本的な言語。</dd>
  <dd>マークアップ言語の一種。</dd>
</dl>

共通定義

<dl>
  <dt>HTML</dt>
  <dt>CSS</dt>
  <dd>ウェブ開発の基礎技術。</dd>
</dl>

練習問題

練習1: <dd> 要素を使用して、動物の名前とその説明をリストにしてください。
練習2: 1つの <dt> に複数の <dd> を関連付けるリストを作成してください。
練習3: CSS を使用して、<dd> 要素のインデントや背景色を変更してみてください。