ulとdlのどちらを使うか迷うことがある

Question

ulとdlのどちらを使うか迷うことがあるのですが、
どう区別していますか？

dtの説明がddに来ている場合はdl。
何かの説明ではなくただ単語を羅列する場合は、ulという判断でしょうか？

定義リストかただのリストかの違いだという事はわかるのですが、
具体的にその二つの違いがはっきりしません。

下記サイトの認識で良いのでしょうか？
http://www.hp-sakusei.info/07/index11.php

そもそもリストとは一覧表、名簿、目録などを意味するそうですが、
単語の羅列をする場合に、リストを使うという認識で良いのでしょうか？

Answer 1

改めて編集し直しました。
これまでの内容より分かりやすくなっていると思います。
###各リスト要素の説明と主な用途
<ul> 順不同リスト(Unordered List)
箇条書きで項目を列挙したい時に使うリスト要素。
項目の順序が入れ替わっても不都合の無いリストは順不同リストを使う。

例

• 目録
• 一覧表

等々

<ol> 順序付きリスト(Ordered List)
順序が重要な項目を列挙したい時に使うリスト要素。
項目の順序が入れ替わると都合が悪いリストは順序付きリストを使う。

例

• 目次
• 順位・序列
• 時系列
• 段取り・手順

等々

<dl> 記述リスト(Description List)
項目(語句)とそれに言及した文章を列挙したい時に使うリスト要素。
見出しを付けてひとつのセクションとして扱うには少々大袈裟な内容をまとめる時に使う事が多い。
つまり、細目とそれに言及した文章を列挙する時に最適なのが記述リストであると考えられる。

※
HTML4.01やXHTMLなどでは定義リスト(Definition List)となっていましたが、HTML5では定義である必要が無くなり記述リスト(Description List)になりました。定義リストの使い方を迷う事はないと思うので、ここでは記述リストについて説明しています。

例

• 用語と定義(説明)
• 質問と回答
• 日付と記録
• 役とそれを担う人の名前(劇での配役や組織での役職など)
• 原因(または予想)と結果
• データのトピック(キー)と値

等々

###各リスト要素を使った例

<h1>ビーフカレーのレシピ</h1>
<p>おいしいビーフカレーを作りましょう。</p>

<h2>材料</h2>
<p>4人前</p>
<!-- 箇条書きの項目<li> -->
<ul>
  <li>牛肉 400g</li>
  <li>たまねぎ 1個</li>
  <li>にんじん 1本</li>
  <li>以下略</li>
</ul>

<h2>作り方</h2>
<!-- 順序が重要な項目<li> -->
<ol>
  <li>たまねぎの半分をすりおろし、残りは薄切りにする。</li>
  <li>牛肉が大きい場合はひと口より少し大きめの食べやすいサイズに切る。</li>
  <li>すりおろしたたまねぎと牛肉を混ぜあわせ、塩コショウを振って1時間置く。</li>
  <li>にんじんとにんにく・しょうがをすりおろす。</li>
  <li>以下略</li>
</ol>

<h2>ビーフカレーにおすすめの部位</h2>
<p>ビーフカレーにぴったりな牛肉の部位を紹介します。色々な部位を試して自分好みのビーフカレーを作ってみてください。</p>
<!-- 語句(項目)<dt>と文章<dd>の組み合わせ -->
<dl>
  <dt>バラ肉</dt>
  <dd>赤身と脂身が薄く交互に重なった部位で、煮込んでも固くならず煮崩れないのでカレーと相性が良い。</dd>
  <dt>すね肉</dt>
  <dd>最も運動量が高い部位であるため筋や腱が多く脂肪分は少ない。しかし、じっくりと煮込む事で柔らかく旨味の濃い仕上がりになるため、一手間かけて作る時におすすめの部位。</dd>
  <dt>もも肉</dt>
  <dd>以下略</dd>
</dl>

<h2>よくある質問</h2>
<p>このレシピに関してよく寄せられる質問への回答をまとめました。</p>
<!-- 語句(項目)<dt>と文章<dd>の組み合わせ -->
<dl>
  <dt>牛肉以外のお肉でもおいしく出来ますか？</dt>
  <dd>もちろん！牛肉以外のお肉でもおいしくできます。お好きなお肉を使って自分好みのカレーを作ってみてください。</dd>
  <dt>豚肉で作る時はどのような部位がおすすめですか？</dt>
  <dd>甘い脂身と柔らかい肉質のばら肉や、しっかりとした噛みごたえと脂身の少ないヘルシーなもも肉がおすすめです。</dd>
  <dt>鶏肉で作る時はどのような部位がおすすめですか？</dt>
  <dd>以下略</dd>
</dl>

あとはドキュメントとその文脈に応じてリストを使い分ける事を意識していれば適切なマークアップが出来ると思います。

Comments

[退会済みユーザー]

ありがとうございます。

dlの方は、dtの説明分がddに来る場合という事でおかげさまでよくわかりました。

ただ、問答をしているわけではありませんが、
ulの例は

<dt>財布の中身</dt>
<dd>10000円札 2枚</dd>
<dd>1000円札 3枚</dd>
～

と考える事もできてしまうような気がするのですが、どうしてこちらでなくulの方をであると区別すれば良いのでしょうか？

ちなみに、下記のようにタイトルや見出しの説明となっていない、ただの羅列の場合はdlでない事はもちろんわかります。
<ul>
<li>10000円札 2枚</li>
<li>1000円札 3枚</li>
<li>500円硬貨 1枚</li>
<li>100円硬貨 6枚</li>
<li>ライフカード</li>
<li>Pontaカード</li>
<li>TSUTAYAカード</li>
</ul>

[flat]

すべて整理して回答の方にまとめました。