HTML・CSS:定義リストを作成するdlタグ、定義リストを作成するdtタグ、定義リストの内容を作成するddタグ

<dl>タグ、<dt>タグ、<dd>タグとは

<dl>タグ<dt>タグ、<dd>タグとは、定義リストを作成するタグになります。これらの3つのタグはすべて使うことによってようやく意味を成すようなタグなので、全部セットで覚えておきましょう。
<dl><dt><dd>タグは用語の説明だけではなく、Q&Aやお問合せフォームにも使われていたりします。
各タグの働きと流れとして、まとめるとこんな感じです↓

  1. <dl>タグで定義する大枠を囲む
  2. <dt>タグで定義する用語または名前を指定
  3. <dd>タグでその詳細な説明をする

<dl>タグ、<dt>タグ、<dd>タグの使い方

基本的には<dl>タグは<dt>タグと<dd>タグを囲む為にあるようなもので、<dl>タグと</dl>タグの中に用語名を指定する<dt>タグと説明のための<dd>タグを書きます。この<dt>タグと<dd>タグは、<dl>タグの中にいくつあっても構いません。例えば…

<dl>
<dt>用語A</dt>
<dd>説明1</dd>
<dd>説明2</dd>
</dl>

このように、1つの用語に対して複数の説明があっても構いませんし、用語が複数あっても構いません

<dl>
<dt>用語A</dt>
<dt>用語B</dt>
<dd>説明1</dd>
</dl>

これらのタグの用途として、用語集だったりQ&Aだったりお問合せフォームだったりがあります。例えば用語集であればこんな感じ↓

<dl>
<dt>HTMLとは</dt>
<dd>HTMLとは、インターネットをうんたらかんたら</dd>
<dt>CSSとは</dt>
<dd>CSSとは、HTMLの要素を装飾するためのうんたら</dd>
</dl>

<dl>で大枠を囲い、<dt>で説明したいものの名前を指定、<dd>で詳しい内容の説明をしています。実際に表示してみるとこうなります。↓

HTMLとは
HTMLとは、インターネットをうんたらかんたら
CSSとは
CSSとは、HTMLの要素を装飾するためのうんたら

改行などは特に入れておりませんが、勝手に入りました。次にQ&Aならこうです。↓

<dl>
<dt>このHPは一体なんの為にあるのですか</dt>
<dd>いちもんじの記憶保持のためです</dd>
<dt>ではなぜ広告を付けているのですか</dt>
<dd>あわよくば稼ぎたいと思っているからです</dd>
</dl>

普通ならば(企業なら)よくあるお問合せとかに使うと思います。
お問合わせフォームでも、フォームタグと一緒に組み合わせて使うこともできます。

<form>
<dl>
<dt>ご住所を入力してください。</dt>
<dd><input type="text" name="name" id="namelabel" placeholder="郵便番号から"><input type="submit" value="送信する"></dd>
</dl>
</form>
ご住所を入力してください。

ちょっと不格好ですけど、こんな感じでフォームにすることもできます。

タイトルとURLをコピーしました