<dt>タグの解説
<dt>は、<dl>で作成した定義リストの中で定義された用語を表します。「dt」とは、英語で「Definition Term」の頭文字を取った略語です。
定義リストは、キーワードと解説がペアになった辞書のような一覧表のことです。これを作成するには、まず<dl>でリストの作成を開始し、<dt>で用語を設定してから、それに続く<dd>で説明や解説を行います。
<dt>と<dd>は一組のペアとして扱われます。どちらかが連続して書かれた場合は、関連のある項目として扱われます。HTML Living Standardでは、それらをグループ化するために<div>で囲うことも許可されています。
<dt>タグの特徴
- レイアウトの初期値はブロックレベルです。文章の改行に影響を与えます。
- 視覚的な効果は特に与えられません。必要に応じてスタイルシートを調整して下さい。
- 同一のページ内に複数使うことができます。ただし、この要素自体を入れ子にすることはできません。
<dt>要素に指定できる属性
- グローバル属性
- 全てのHTML要素に指定できる共通の属性です。詳細は一覧表で解説します。
- イベントハンドラ
- 全てのHTML要素に指定できるコンテンツ属性です。
<dt>要素の使い方とサンプルコード
この要素の最も基本的な書き方は以下の通りです。定義リストを取り扱う場合、必ず三つの要素をセットで使います。
<dl>
<dt>定義された用語</dt>
<dd>用語の説明。用語の解説。</dd>
</dl>
一つの定義リストに複数の用語と解説をセットで配置することもできます。一つの用語を定義するたびに、いちいち<dl>要素を閉じなくても、続けて記述すれば各用語と解説はペアとして扱われます。
<dl>
<dt>定義された用語</dt>
<dd>用語の説明。用語の解説。</dd>
<dt>定義された用語</dt>
<dd>用語の説明。用語の解説。</dd>
<dt>定義された用語</dt>
<dd>用語の説明。用語の解説。</dd>
</dl>
<dt>と<dd>は名前の綴りが似ているため、書き間違いやタグの閉じ忘れがよく起こります。HTML Living Standardでは<div>で囲うことが許可されているため、できるだけひとつにまとめることを推奨します。ソースコードの視認性が高まり、CSSも柔軟に適用できるようになります。可能であれば以下の記述パターンを採用して下さい。
<dl>
<div>
<dt>定義された用語</dt>
<dd>用語の説明。用語の解説。</dd>
</div>
<div>
<dt>定義された用語</dt>
<dd>用語の説明。用語の解説。</dd>
</div>
<div>
<dt>定義された用語</dt>
<dd>用語の説明。用語の解説。</dd>
</div>
</dl>
ひとつの定義語に複数の説明を与える
定義語に対して複数の説明を加えることができます。諸説ある人物評や歴史年表に見られる構成です。
<dl>
<div>
<dt>定義された用語</dt>
<dd>用語の説明１</dd>
<dd>用語の説明２</dd>
</div>
<div>
<dt>定義された用語</dt>
<dd>用語の説明１</dd>
<dd>用語の説明２</dd>
</div>
</dl>
複数の定義語をひとつの説明に対応させる
複数の定義語をひとつの説明でまとめることも可能です。同一の出典を持つ格言や、複数のニックネームを持つキャラクターなど、同一の内容が重複するリストで活用できます。
<dl>
<div>
<dt>用語１</dt>
<dt>用語２</dt>
<dd>用語の説明</dd>
</div>
<div>
<dt>用語３</dt>
<dt>用語４</dt>
<dd>用語の説明</dd>
</div>
</dl>
定義リストをCSSで装飾する
定義リストはHTMLの構造が明確であるため、CSSで装飾しやすい部類の要素です。レイアウトのパターンは、大きく分けて縦並びと横並びの二種類があります。詳しい解説は<dl>のページで行っているので、興味のある方は参考にして下さい。