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

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

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

見出し
リスト項目
リスト項目
リスト項目
見出し
  • リスト項目
  • リスト項目
  • リスト項目

ddが適切なケース

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

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

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

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

例2. 製品仕様

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

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

例3. 人物プロフィール

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

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

例4. お問い合わせ

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

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

ulタグが適切なケース

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

例1. レシピの材料

材料
  • 南高梅 2L(1kg)
  • 露茜梅 2L(1kg)
  • ホワイトリカー(1800mL)
  • 氷砂糖(1kg)

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

例2. 営業時間

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

営業時間
  • 月〜金:10:00〜19:00
  • 土・日:11:00〜18:00
  • 祝日:12:00〜17:00

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

例3. 対応ブラウザ

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

対応ブラウザ
  • Google Chrome(最新版)
  • Mozilla Firefox(最新版)
  • Safari(最新版)
  • Microsoft Edge(最新版)

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

例4. 注意事項

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

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

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

WATANABE Takeshi
WATANABE Takeshi
渡邉岳 / ウェブデザイナ / 愛猫家

1981年新潟生まれ、千葉育ち。2007年よりウェブデザイナ・ディレクタとして、数社のウェブサイト設計および運用に従事したのち、2014年に「渡邉岳デザイン室」の屋号でフリーランスとして独立。同時に東京を離れて地方に移住。「少ないほど豊かである」の哲学に基づき、感覚に頼らず、機能美を重視した、使い心地の良いウェブデザインを追求しています。猫と工作とブラストビートが好き。