HTMLのdlタグ、dtタグ、ddタグの使い方とルールをゼロから分かるように解説していきます。
この記事の目的
ブログサービスやWordPressなどのCMSを使って構築しているブログやWEBメディアの記事やページを作成する際に必要なhtmlの知識を身に着ける。
dlタグ,dtタグ,ddタグとは
定義タグと呼ばれる、キーワードを定義して解説をつけたい時に使用するタグです。
サンプルコード
<dl>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
</dl>
使用のルール
- dlタグ
- →初めと終わりにつける、ulやolのようなもの。
- dtタグ
- →定義する内容を表すタグ
- ddタグ
- →定義した内容の説明や備考を記述するタグ。つけなくても良い。
ul及びolがわからない方は、リスとタグについて解説している以下の記事をご参照ください。
中に入れられるタグは?
dtタグ
dtタグの中には「インライン要素」と呼ばれる要素のみ入れることができます。たくさんの種類がありますが、記事の場合は以下を覚えておけばOKです。
- aタグ(リンクタグ)
- imgタグ
- →画像もOKなので覚えて置くと便利です。
- span
- CSSのクラスとして設定した個別のデザインも適用できます。
- em&strong
- 強調したい場合はこちらを利用してください。
注意点
- divタグ禁止
- spanタグと混同しがちですが、divタグはブロック要素なので使えません。
- pタグ禁止
- pタグもブロック要素なので使えません。間違わないようご注意ください。
ddタグ
ddタグにはどのような要素も入れることができ、dtタグでは禁止だったdivタグとpタグもOKです。
解説が複雑になる場合はhタグを使って見出しをつけてしまってもかまいません。
リストタグとの使い分け
やや用途が似ている部分があるリストタグとの使い分けは以下を基準にしてお考えください。
- 各項目ごとに解説が必要な内容が多い場合
- →定義タグ
- 項目ごとに解説が不要な場合
- →リストタグ
リストタグの詳細は以下の記事で解説しています。