dl内に複数の説明項目がある場合、ddとul liのどちらを使うか?

dlタグの中にリスト形式のコンテンツを含める場合に、複数のddタグを使うか、ulタグを使うかで迷うことがあるので整理しました。

判断に迷う場合は、「項目間の関係性(並列な列挙か、独立した定義か)を軸に考える」と、よりセマンティクスなマークアップができると思います。

<dl>
	<dt>見出し</dt>
	<dd>リスト項目</dd>
	<dd>リスト項目</dd>
	<dd>リスト項目</dd>
</dl>

<dl>
	<dt>見出し</dt>
	<dd>
		<ul>
			<li>リスト項目</li>
			<li>リスト項目</li>
			<li>リスト項目</li>
		</ul>
	</dd>
</dl>

ddが適切なケース

dtで示された概念や用語に対して、それぞれのリスト項目が独立した「説明」として成り立つ場合は、複数のddを使用するのが適切と考えます。

例1. 複数の意味を持つ用語の説明

「リンゴ」という用語に対して、複数の意味を示す場合。

<dl>
<dt>リンゴ</dt>
<dd>果物の一種。バラ科リンゴ属の落葉高木になる。</dd>
<dd>情報技術企業。iPhoneやMacintoshなどを開発・販売する。</dd>
<dd>スラングで「主要なもの」「最も重要なもの」を指すことがある。</dd>
</dl>

例2. 製品仕様

「ディスプレイ」という項目に対して、独立した情報を示す場合。

<dl>
<dt>ディスプレイ</dt>
<dd>種類:有機EL</dd>
<dd>サイズ:6.1インチ</dd>
<dd>解像度:2532 x 1170ピクセル</dd>
</dl>

例3. 人物プロフィール

ある人物の「役割」について、複数の異なる役割や立場を羅列する場合。

<dl>
<dt>ジョン・スミス</dt>
<dd>役職: 最高経営責任者(CEO)</dd>
<dd>専門分野: 人工知能、データサイエンス</dd>
<dd>受賞歴: 2020年技術革新賞</dd>
</dl>

例4. お問い合わせ

「お問い合わせ先」というラベルに対して、複数の情報を与える場合。

<dl>
<dt>お問い合わせ先</dt>
<dd>電話番号:03-1234-5678</dd>
<dd>メール:info@example.com</dd>
</dl>

ulタグが適切なケース

dtで示された一つの概念や用語に対して、それぞれのリスト項目が独立した「説明」として成り立たない場合は、ひとつのddの中にulでまとめてマークアップするのが適切と考えます。

例1. レシピの材料

<dl>
	<dt>材料</dt>
	<dd>
		<ul>
			<li>南高梅 2L(1kg)</li>
			<li>露茜梅 2L(1kg)</li>
			<li>ホワイトリカー(1800mL)</li>
			<li>氷砂糖(1kg)</li>
		</ul>
	</dd>
</dl>

上記内容を複数のddでマークアップした場合、「材料=南高梅」「材料=露茜梅」のように、各行が個別の定義と解釈されるため、セマンティクス的には不自然です。

例2. 営業時間

「営業時間」に対して、曜日ごとの時間帯を列挙する場合。

<dl>
  <dt>営業時間</dt>
  <dd>
    <ul>
      <li>月〜金:10:00〜19:00</li>
      <li>土・日:11:00〜18:00</li>
      <li>祝日:12:00〜17:00</li>
    </ul>
  </dd>
</dl>

「営業時間=月〜金:10:00〜19:00」では説明として成立せず、全体でひとつの「営業時間の説明」を構成します。

例3. 対応ブラウザ

「対応環境」に対して、サポートするブラウザを列挙する場合。

<dl>
  <dt>対応ブラウザ</dt>
  <dd>
    <ul>
      <li>Google Chrome(最新版)</li>
      <li>Mozilla Firefox(最新版)</li>
      <li>Safari(最新版)</li>
      <li>Microsoft Edge(最新版)</li>
    </ul>
  </dd>
</dl>

「対応ブラウザ=Google Chrome」では不完全で、リスト全体で「対応ブラウザの一覧」という説明になります。

例4. 注意事項

「ご利用にあたっての注意事項」に対して、複数の注意点を列挙する場合。

<dl>
  <dt>注意事項</dt>
  <dd>
    <ul>
      <li>キャンセルは3日前までにご連絡ください。</li>
      <li>お支払いは現金のみとなります。</li>
      <li>駐車場のご用意はございません。</li>
    </ul>
  </dd>
</dl>

「注意事項=キャンセルは3日前まで〜」では「注意事項の定義」として成立しません。各項目は並列した注意点の列挙であり、ulでまとめるのが自然です。