HTMLのdlとul どちらが正しいと思いますか

あるスクールのホームページを作成するとします。
各クラスの詳細説明のリストに使うのはどちらの書き方が正しいですか？

①
<dl>
<dt>〇〇クラス</dt>
<dd>
料金ややることの説明（長めの文章）
</dd>
<dt>〇〇クラス</dt>
<dd>
料金ややることの説明（長めの文章）
（必要があればpなどのタグ）
</dd>
・
・
・
</dl>

②
<ul>
<li>
<h3>〇〇クラス</h3>
<div>
<pなどのタグ>料金ややることの説明（長めの文章））</p>
</div>
</li>
<li>
<h3>〇〇クラス</h3>
<div>
<pなどのタグ>料金ややることの説明（長めの文章））</p>
</div>
</li>
・
・
・
</ul>

よろしくお願いします。

No.3 回答者： naktak 回答日時： 2023/02/24 11:18

dl, dt, dd になります。

dl, dt, dd はリストされた情報の定義や説明を行う時に利用します。
質問にある内容や、QAやトラブルシューティングなど。

ul, li は順序が不問な、説明が不要な単純な箇条書きリスト、手順、行情報などに利用します。

No.2 回答者： wellow 回答日時： 2023/02/23 11:44

ulタグ～liタグは、箇条書きリスト（番号をつけるならolタグ）、dlタグ～dtタグは定義リストに適用すべきものだから、質問文の趣旨にはdl、dt、ddの順が正しい。

ただし質問者が悩むように使い方は結構曖昧で、見栄えのほうが重視されるから、「・」とかを付けたい等の理由でul、liが多用される傾向はあるかもしれない。

No.1 回答者： Hypnomatic 回答日時： 2023/02/23 11:43

どちらの書き方も正しい書き方ですが、使い分けることができます。

①の場合、説明する内容を「用語（用語説明）」という形式でリストアップする方法です。用語説明の形式は、特に専門用語を多く使う場合や、比較的長い文章を用いて説明する場合に向いています。

一方、②の場合は、見出しとして「〇〇クラス」という大きなタイトルを表示し、その下に詳細説明を挿入する方法です。見出しの下に説明を直接挿入することで、スムーズに読み進めることができます。また、見た目がスッキリとし、視覚的にも理解しやすくなります。

どちらの書き方を採用するかは、情報の伝達形式に合わせて決めることができます。例えば、専門用語が多い場合には①を、簡潔にわかりやすく伝えたい場合には②を採用すると良いでしょう。