HTMLのdl・dt・ddタグの使い方について

今回は「HTMLのdl・dt・ddタグの使い方」について紹介します。

それでは早速見ていきましょう!

dl・dt・ddタグとは?

dl・dt・ddタグとは、説明リストや定義リストを作るために使うHTMLタグのことです。

例えば用語の説明や、ニュースリストをマークアップする際に使われます。

dlタグの中に、用語を表すdtタグと用語の説明をするddタグが入ります。

dtとddの数は複数でも大丈夫です!

dl→「definition list」の略で、リスト全体を囲います。

dt→「definition term」の略で、用語の名前に使います。

dd→「definition description」の略で、dtの用語の説明に使います。

dl・dt・ddタグのマークアップ例

今回は「dl・dt・ddタグ」を使って、実際のWEBサイトでもよく使われる「ニュースリスト」をマークアップしていきましょう!

完成形はこちら!

See the Pen
Untitled
by webis (@webis-co)
on CodePen.

◎HTML

dlタグの中に、日付を表すdtタグと日付に対するニュースのタイトルを表すddタグを用意します。

◎CSS

「display: flex;」で横並びにしてニュースリストを作成しました。

まとめ

以上が、HTMLdldtddタグの使い方」でした。

この記事を書いた人
Yujiro WEBコーダー

大阪のWEB制作会社で働くコーダー。コーディングにハマり、気づいたらWEB制作を仕事にしていました。現在は新規のWEBサイト制作やWordPressカスタマイズしたり、当技術ブログを運営しています。

関連記事