dtタグ -定義リスト内で用語を示す｜HTML辞典

<dt>タグとは？

<dt>タグは、定義リスト（<dl>）内で用語を示すためのタグ です。
<dt> の後には、必ず <dd>（説明）をセットで記述する必要があります。

基本情報

コンテンツモデル

フローコンテンツ（Flow Content）、パルパブルコンテンツ（Palpable Content）。

閉じタグの有無

<dt> は開始タグ（<dt>）と閉じタグ（</dt>）の両方が必要です。

基本的な記述方法

<dl>
    <dt>HTML</dt>
    <dd>Webページを作成するためのマークアップ言語</dd>
    <dt>CSS</dt>
    <dd>Webページのデザインやレイアウトを設定するスタイルシート言語</dd>
</dl>

使用できる主な属性

<dt>タグには特別な属性はありませんが、一般的なHTML要素の属性を使用できます。

属性名	説明	例
class	CSSのクラスを適用	<dt class="term">...</dt>
id	一意の識別子を設定	<dt id="definition-term">...</dt>
style	インラインスタイルを適用	<dt style="font-weight: bold;">...</dt>

CSSを使ったデザイン変更

定義リストの用語を強調したい場合は、CSSを活用できます。

dt {
    font-weight: bold;
    font-size: 16px;
    color: #333;
}

適切な使用例

✅ <dt> を使って用語の説明を作成する

<dl>
    <dt>ブラウザ</dt>
    <dd>Webページを閲覧するためのソフトウェア</dd>
    <dt>レスポンシブデザイン</dt>
    <dd>デバイスの画面サイズに応じてレイアウトを調整するデザイン手法</dd>
</dl>

✅ <dt> を使ってFAQを作成する

<dl>
    <dt>Q: HTMLとは何ですか？</dt>
    <dd>A: Webページを作成するための言語です。</dd>
    <dt>Q: CSSとは何ですか？</dt>
    <dd>A: Webページのデザインを設定するための言語です。</dd>
</dl>

適切でない使用例（誤った使い方）

❌ <dt> を <dl> の外で使用するのはNG

<!-- NG: <dl> の外に <dt> を記述 -->
<dt>HTML</dt>
<dd>Webページを作成するための言語</dd>

✅ 正しい書き方（<dl> の中に配置）

<dl>
    <dt>HTML</dt>
    <dd>Webページを作成するための言語</dd>
</dl>

❌ <dt> だけで説明を記述しないのはNG

<!-- NG: <dt> の後に <dd> を記述していない -->
<dl>
    <dt>JavaScript</dt>
    <dt>Python</dt>
</dl>

✅ 正しい書き方（<dt> ごとに <dd>を記述）

<dl>
    <dt>JavaScript</dt>
    <dd>動的なWebサイトを作成するためのプログラミング言語</dd>
    <dt>Python</dt>
    <dd>AIやデータ分析に広く使われるプログラミング言語</dd>
</dl>

<dt>タグと他のタグの違い

タグ	役割	特徴	適切な用途
<dt>	定義リストの用語	<dl> 内で使用	用語や質問の定義
<dd>	定義リストの説明	<dl> 内で <dt> の後に記述	用語の説明や回答
<ul>	順序のないリストを作成	リストマーカー（●、■ など）を表示	箇条書き、メニュー
<ol>	順序のあるリストを作成	番号付きリスト（1, 2, 3…）	手順の説明、ランキング

使用上の注意点

✅ <dt> は <dl> の中でのみ使用する

• <dt> を単体で使用しない。

✅ <dt> の後には必ず <dd>を記述する

• <dt> だけで説明なしの項目を作らない。

関連タグ

• <dl> – 定義リスト（用語＋説明）
• <dd>– 定義リストの説明
• <ul> – 順序のないリスト
• <ol> – 順序のあるリスト

まとめ

<dt>タグは、HTML文書内で定義リスト（<dl>）内の用語を示すためのタグです。 <dl>の中で<dt>（用語）と<dd>（説明）とセットで使用し、FAQや用語集の作成に適しています。