HTML5における<dt>タグの使い方

今までリストでは<li>タグを使用していたと思いますが、今回は記述リストと呼ばれる、 <dl><dd><dt>の3つのタグで構成される記述リストのうちの一つ、<dt>タグの使い方をご紹介します。

HTML5における<dt>タグの使い方

まず、<dt>タグが使われる記述リストについて説明します。記述リストの、基本形は以下のような形になります。

上記のコードの表示サンプルです。

スクリーンショット 2016-05-23 11.42.34

ブラウザのデフォルトの表示で、<dt>要素と<dd>要素は、このように区別されて表示されます。基本コードを見てわかると思いますがが、<dt>タグは、<dl><dd><dt>の3つのタグで構成される記述リストの用語の名前などを表すものです。

<dl>要素は、1つ以上の<dt>要素(用語の名前)と、1つ以上の<dd>要素(用語の説明)の2種類から成り立ちます。

リストで一般的なものに、<ul><ol>がありますが、この2つはリストアイテムが<li>だけなので、使い方が限られてきます。逆にそちらの方が向いている時もあるので使い分けましょう。

<dt>要素が名前、<dd>要素が説明といった使い方をするので、様々なコンテンツに応用することができます。用語の名前・説明と書いたように辞書のような使い方もできますし、名前の欄に日付、説明の欄にお知らせや更新履歴を表示することもできます。とても便利なので、<li>だけではなく取り入れてみましょう。


Welcome to UX MILK

UX MILKはより良いサービスやプロダクトを作りたい人のためのメディアです。

このサイトについて

購読

平日・週2回更新