始めに

なぜ書こうと思ったのか。
それは、デザイナーさんやバックエンドチームのHTMLコード見たら、この要素の使い分けしていなかったというのがきっかけです。

この2つの要素は意味も異なります。
また、何よりコードだけで「どのようなリスト」なのかが一目で分かります。
なにより、「1,*** 2,*** 3,***」のように、わざわざ数字を書く必要もなくなります。¹

どう違う？

ol

olは、箇条書きと異なり順番が意味をもつリストです。
意図的に順番付けをしたいリストに使います。

個人的には、
・手順
・単純な順位に関する事（1位、2位、3位・・・）
・優先度で順位をつけたい事（優先度1、優先度2・・・）
等に使っています。

例

<h1>車の発進方法</h1>
<ol>
  <li>ブレーキを踏みます</li>
  <li>エンジンをかけます</li>
  <li>ギヤをドライブに入れます</li>
  <li>サイドブレーキを解除します</li>
  <li>ゆっくりブレーキをリリースします</li>
  <li>アクセルをゆっくり開けます</li>
</ol>

ul

項目の順序なしのリストに使用します。
ごく普通の箇条書きに使用しています。

例

<h1>車の標準装備</h1>
<ul>
  <li>カーナビ</li>
  <li>オートエアコン</li>
  <li>遮熱/UVカットガラス</li>
  <li>レザーシート</li>
</ul>

その時表示させたいリストに、少しでも順番に意味があると思ったらolを使用する、順番は不要な場合は「ul」としておくと大きな間違いはないかと思います。
その他、何かの定義（用語など）の場合は説明リスト（dl）を使ってください。

参考

https://developer.mozilla.org/ja/docs/Web/HTML/Element/ol
https://developer.mozilla.org/ja/docs/Web/HTML/Element/ul

表示されない場合は、list-style-type等でstyleがあたっています） ↩

olとULを使い分けましょう

始めに

どう違う？

ol

例

ul

例

参考