使い分けできてる？初心者も上級者も確認しておきたいdlタグの使い方とリストタグとの違い！

 

やぁ、やっと水泳で2km泳げるようになったユトピ(@yutopi60pa)だよ。
 

前回のHTMLタグリファレンスでは「リストタグ」についてみていきましたね。
ulタグやらolタグ、liタグの特徴や使いかたなんかを見ていきましたね。
・あなたは正しくできてる？「リストタグ」を使って分かりやすい箇条書きを作ろう！
 

実はリストタグはこれだけじゃないんです。
もう一つ大事なものがあります。
 
 
 

それは『dlタグ』です！

 
 
 

今回は『dlタグ』について解説していこうと思いますぞ！
 
 

dlタグとは？

 

dlタグはDefinition Listの略で、定義リストを作成する際に使用するタグです。
定義リストを作る場合はdlタグ以外にも、dtタグ、ddタグを使ってリストを作成していきます。

 

定義リストとはなんぞや？

 
確かに。難しい言葉を使うなよって感じですね。
要するにリストの項目ごとに「説明文」を追加することができるのがdlタグのいう定義リストのことです。
 

例えば歴史上の人物を並べたリストに、一人一人の説明を項目ごとに付け加えていくことができます。
ulタグやolタグはただ項目を並べるだけでしたよね。これがdlタグの特徴です。
 

使い方を説明する前に、実際に書いてみましょう！
 
 

 

このようにしてdlタグを使っていきます。
全体を囲むdlタグ、項目の名前を囲むdtタグ、その説明をddタグが囲っていますね。
 

ちなみにdlタグはulタグやolタグにあったマーカーは付きません。
ですので、type属性はもちろん、CSSプロパティの「list-style」を使っても何も表示されません。
※詳しいリストタグのマーカーについてはこちらの記事をご覧あれ → リストタグの属性とlist-styleプロパティ
 

ではリストタグのようにマーカーを表示したい場合はどうすればよいのでしょうかね？
それはまた次回だ！！
ちょっと待ってて！

 

ちなみにdlタグでは、dhタグに対して複数のddタグを付け加えることもできます。
 
 

こんな感じでdlタグを使うことができます！
使い勝手は非常に多いので、是非とも使っていきましょう！

 
 

まとめ

 

以上がdlタグの解説です。
定義リストなんて難しそうな名前でしたが、使ってみると意外と単純なことがわかりますよね。
 

最初のうちはulタグやolタグとの区別がつきにくいかもしれないですが、しっかりと状況に応じてこれらのリストタグを使い分けていきましょう！