用語の定義リストを表現するHTMLタグ dl dt ddの説明


スポンサーリンク

dlタグは定義リストといい、英語でdefinition listといいます。
用語の羅列を表現するときに使います。

dlエレメントの中には、dtタグとddタグが対になって書かれます。

dtは定義される用語を指します。
dtは童貞という意味ではなく、term being definedの意味です。
defined term。

ddは用語の説明となります。
ddは英語で、Definition Descriptionで、直訳しても「用語の説明」ですね。

一般的に、以下のような形で書かれます。

<dl>
  <dt>hoge</dt>
  <dd>これはhogeです</dd>
</dl>

では、もうちょっと長いサンプルを作って、表示を見てみます。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>dl dt dd</title>
</head>
<body>

<h2>dl dd dt</h2>
<dl>
  <dt>カフェオレ</dt>
  <dd>カフェ・オ・レはフランス語で、レはミルク(牛乳)の意味。</dd>
  <dt>カフェ・ラテ</dt>
  <dd>カフェ・ラテはイタリア語の造語で、ラテはイタリア語ラッテからミルク(牛乳)の意味。</dd>
  <dd>カフェラテのコーヒーは「エスプレッソ」。</dd>
</dl>

</body>
</html>

これをブラウザで表示すると以下のようになります。

f:id:sho322:20141001075346j:plain

スラスラわかるHTML&CSSのきほん

スラスラわかるHTML&CSSのきほん