HTML Living Standard/dt

dt 要素

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

基本構造

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

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

この例では、<dt> 要素が用語 (HTML, CSS) を示し、それに続く <dd> 要素がその定義を示しています。

使用上の注意

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

例：
```
<dl>
  <dt>HTML</dt>
  <dd>ウェブページを構成するマークアップ言語。</dd>
  <dd>最新の仕様は HTML Living Standard。</dd>
</dl>
```
複数の <dt> をまとめて1つの <dd> に関連付けることも可能です。
この場合、関連する用語が複数あることを明示できます。

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

スタイリング

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

例：

<dl>
  <dt style="font-weight: bold; color: blue;">HTML</dt>
  <dd>HyperText Markup Language の略称。</dd>
</dl>

また、<dt> 要素をインデントすることも可能です：

<dl>
  <dt style="margin-left: 20px;">CSS</dt>
  <dd>Cascading Style Sheets の略称。</dd>
</dl>

アクセシビリティ

<dt> 要素は、スクリーンリーダーなどの支援技術で正しく認識されるため、アクセシビリティが高い要素です。用語の意味を明確に伝えるために、適切に使用することが重要です。

ARIA属性を活用することで、さらなるアクセシビリティ向上が期待できます。