どうも、7noteです。今回は使い分けをできていない人のための、olとulの話です。

書き方は基本変わらない

まずは基本的なolとulの書き方。

HTML

<ul>
    <li>あああ</li>
    <li>いいい</li>
    <li>ううう</li>
</ul>

HTML

<ol>
    <li>あああ</li>
    <li>いいい</li>
    <li>ううう</li>
</ol>

似ているが、タグの意味は別物

タグの意味は、どちらも箇条書きリストという意味ですが・・・

ul・・・（順番のない箇条書きリスト）
ol・・・（順番のある箇条書きリスト）

というように、olは１番2番3番と順番があるような項目に対して使用します。
逆にulは順不同の項目に対して使用します。

使用例

HTML

<!-- 果物の種類 -->
<ul>
    <li>りんご</li>
    <li>みかん</li>
    <li>ばなな</li>
</ul>

HTML

<!-- 手紙を送る方法 -->
<ol>
    <li>STEP.1 紙とペンを用意</li>
    <li>STEP.２ 手紙を書く</li>
    <li>STEP.3 切手を貼ってポストに投函</li>
</ol>

このように、手紙の送り方には順番があるのでこのような場合はolを使うのが適しているでしょう。
果物の種類には特に順番がないので、ulで書くことが望ましいでしょう。
しかし、これならどうでしょうか？

HTML

<!-- 果物の種類（五十音順） -->
<ol>
    <li>ばなな</li>
    <li>みかん</li>
    <li>りんご</li>
</ol>

これならolを使います。（ulを使うという方の意見もあるかもしれませんが。）
この場合はタグの順番や中身に対して五十音順という意味がもたらされているので、順番があるolを使います。

なぜ使い分ける必要があるのか

答えは明確でSEOのためだと言えるでしょう。divやspanだけでホームページを作ることは可能です。
でも様々な種類のタグがあるのはそのタグに意味があるからです。
それぞれのタグにはヘッダーという意味や見出しという意味がついています。
タグを内容に沿って適切に使うことで優良なサイトだと検索エンジンが評価します。

一般に公開されるWEBサイトであれば検索エンジンに良い評価をもらえるのかはSEOに関るのでとても重要です。
だからulとolも小さな違いかもしれませんが、小さな違いもしっかりと理解して使い分けることでより良いサイトを作ることに繋がります。

まとめ

まぁ後輩とかに「ulとolってどうして使い分けるんですか？」と聞かれたときに。
「olは順番がある時に使うんだよ」というのでもいいのですが、
「Googleに好かれるサイトにするためだよ」とかサラッと言える方がなんかカッコよくないですか？
ま、後輩はキョトンとするだけかもしれませんが。。。（笑）