webmas.jp

<dl> は用語と値のセットで使用する説明リストを指定するものです。この要素内に <dt> タグとそれに続く <dd> タグ、そして場合によってはそのふたつを内包する <div>が配置されます。

分類

フローコンテンツ、<dl> 要素の子要素が 1 つの名前と値のグループの場合は知覚可能コンテンツ

内包できるもの

<dt> タグとそれに続く <dd> タグ、任意で <script> 要素、 <template> 要素

サンプル

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

日付、時間、人名、地名、作品名、質問内容など色々な用途に使用できます。

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

リストなので <dt> と <dd> のセットを連続して配置していくことができます。ひとつの <dl> グループに対し、<dt> <dd> の分類を統一して使います。Q&A のリストを作るならその <dl> グループは Q&A だけに使用します。

<dl>
	<dt>Q<dt>
	<dd>A</dd>

	<dt>Q</dt>
	<dd>A</dd>

	<dt>Q</dt>
	<dd>A</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>