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でまとめるのが自然です。