webmas.jp

<dt> は用語と値のセットで使用する説明リストにおける「用語」を指定するものです。このタグは <dl> タグの中に配置され、 <dd> タグと組み合わせて使用します。

分類

なし

内包できるもの

フローコンテンツ　ただし <header>、<footer>、区分コンテンツ、見出しコンテンツを除く

サンプル

まずは <dl> タグを配置し、この要素の中に <dt> と <dd> が入ります。<dt> の用語、続いて <dd> の値（用語に対する説明文など）を配置します。

<dl>
	<dt>用語<dt>
	<dd>値</dd>
</dl>

複数の用語に対し共通した説明がある場合は <dt> を連続して使用することもできます。

<dl>
	<dt>JR東日本 東北新幹線</dt>
	<dt>JR東日本 秋田新幹線</dt>
	<dt>JR東日本 東北本線<dt>
	<dt>JR東日本 田沢湖線</dt>
	<dt>JR東日本 花輪線</dt>
	<dt>JR東日本 北上線</dt>
	<dt>JR東日本 大船渡線</dt>
	<dt>JR東日本 大船渡線BRT</dt>
	<dt>JR東日本 八戸線<dt>
	<dt>IGR いわて銀河鉄道線</dt>
	<dt>三陸鉄道 リアス線</dt>
	<dd>岩手県内を走る鉄道です。</dd>
</dl>

リストなので <dt> と <dd> のセットを連続して配置していくことができます。

<dl>
	<dt>用語<dt>
	<dd>値</dd>

	<dt>用語</dt>
	<dd>値</dd>

	<dt>用語</dt>
	<dd>値</dd>
</dl>

HTML5 の場合、<dt> と <dd> の組み合わせは <div> タグを使用してひとつのグループにまとめることも可能です。このグループ化によってどの用語とどの値がセットなのか分かりやすくなるとともに CSS で装飾しやすくなるなどのメリットがあります。

<dl>
	<div>
		<dt>用語<dt>
		<dd>値</dd>
	</div>

	<div>
		<dt>用語</dt>
		<dd>値</dd>
	</div>

	<div>
		<dt>用語</dt>
		<dd>値</dd>
	</div>
</dl>