このページについて
このページではHTMLで使える定義と解説のためのdl・dt・ddの3つのタグの使い方を解説しています。
dlタグ・dtタグ・ddタグそれぞれの役割
dl自体は説明リストを定義するだけで、全体の部分のみを定義します。これ自体は何の意味もありません。後で紹介するdtやddと一緒に使う必要があります。
dtは説明リストの中で使用します。こちらは説明の名前を定義します。
ddは説明リストの中で使用します。こちらは説明の用語に対する説明を定義します。
これらは全て1つのリストとして使用します。通常、リストと言えばliタグやulタグ、olタグで囲んで使用するのが一般的ですが今回のdt・dd・dlはこれらとは違って用語などの解説に向いています。
dlタグ・dtタグ・ddタグの書き方
dl・dt・ddはそれぞれ書く順番が決まっています。まずは全体の枠を作成するためにdlから書き始めます。次にそれぞれの説明項目の名前を定義するために、dtを使用します。次にその項目に対する説明・解説を書くためのddを書きます。
タグは全て閉じタグ必須で、省略はできません。dlは全体の枠としての機能を有しているので一番最後に閉じますが、それ以外はその都度閉じます。実際に書くと以下のようになります。
<dl>
<dt>説明項目1</dt>
<dd>説明内容1</dd>
<dt>説明項目2</dt>
<dd>説明内容2</dd>
</dl>実際にこれらをブラウザで見てみると、インデントが適用されているのがわかります。大体のブラウザではインデントで文頭が揃えられていて、名前と説明の位置関係が一目でわかるようになっています。
- 説明項目1
- 説明内容1
- 説明項目2
- 説明内容2
dlの中に別のdlを含めることもできます。以下は「説明リストの中で別の説明リストを書く」という場合に使える書き方になります。
<dl>
<dt>パソコンの種類</dt>
<dd>大まかに3つの形態がある。
<dl>
<dt>デスクトップ</dt>
<dd>据え置きタイプ</dd>
<dt>ノート</dt>
<dd>海外ではラップトップと呼ぶ</dd>
<dt>一体型</dt>
<dd>iMac</dd>
</dl>
</dd>
<dt>OS</dt>
<dd>オペレーションシステムの略称。大まかに3種類がよく使われている。
<dl>
<dt>macOS</dt>
<dd>一番使いやすい</dd>
<dt>Windows</dt>
<dd>ゲーム用</dd>
<dt>Linux</dt>
<dd>使えるとかっこいい</dd>
</dl>
</dd>
</dl>こんな感じで、dl→dt→ddと書くのは変わりませんが、ddの中でさらにdl→dt→ddと書いています。閉じる順番を間違えやすいので注意しましょう。これをブラウザでみてみると以下のようになります。
- パソコンの種類
- 大まかに3つの形態がある。
- デスクトップ
- 据え置きタイプ
- ノート
- 海外ではラップトップと呼ぶ
- 一体型
- iMac
- OS
- オペレーションシステムの略称。大まかに3種類がよく使われている。
- macOS
- いいOS
- Windows
- ゲーム用
- Linux
- 使えるとかっこいい
ブラウザやサイトのCSS設定によりけりですが、こんな感じでみやすくなります。
ちなみにですがddタグの中には段落・画像・リンク・リスト(liやulやol)なども含めることができます。
dlタグ・dtタグ・ddタグで使える属性
この3種のタグには専用の属性みたいなものはありません。グローバル属性・イベント属性の両方をサポートしています。