cssでリストを表すulとolの違いと使い分けについて

cssで箇条書き（リスト）にする場合…といえば、ulで組むと思いますが、同じくリスト表示となるolというセレクタとの使い分けをどうしていますか？

私は、見た目が同じなら…と思ってulばかり使って、olを覚えようとしていませんでしたが。。最近ちょっと調べる機会があったので、ulとolの違いや用途についてまとめてみたいと思います。

セマンティックWebが今後、よりSEO対策に重要視された時、使用頻度も増えるかもしれません。

cssデフォルトでの違い

ということで、まずはulとolを比べてみましょう。

ulの場合

<ul>
<li>リスト01</li>
<li>リスト02</li>
<li>リスト03</li>
</ul>

• リスト01
• リスト02
• リスト03

olの場合

<ol>
<li>リスト01</li>
<li>リスト02</li>
<li>リスト03</li>
</ol>

1. リスト01
2. リスト02
3. リスト03

このように、同じリストですが、cssでリストマークを指定しないデフォルトのままだと、olで指定した場合、リストマークが数字で表示されます。

※スマホだと数字ではなく、通常のリストマークになるようです。
すみません、サンプルの記述ミスで勘違いでした。

…と、ここまではご存じの方も多いかと思います。

ulとolの違いはリストマークだけ？

この違いはSEOから見ると、セマンティックWebの考え方にも似ていて、通常の箇条書きの場合はulを使うべきで、何らかの手順を箇条書きにしたものはolを使うことによって、検索エンジンにも内容がわかりやすく伝わるのではないでしょうか？

人の目で見ると同じリストですが、こう考えるとただ改行にしたリストよりも、内容がわかりやすいですよね？

そもそも、ulとはUnordered List（並列列挙リスト）の略で、olはOrdered List（順序付きリスト）の略とされています。

www.htmq.com

ulとolの違いと使い分けについてまとめ

これを知っておくだけで、リストをcssで組む時に、ulとolを迷い無く使い分けることができますね。

みなさんはどう使ってましたか？cssの構築は言ってしまえば、全てdivで組み、それぞれにクラス属性を付けても構築できてしまいます。
ですが、それだと検索エンジンは全ての文字や文脈を読み取らなければ記事の内容を把握することができません。

今回のように正しいセレクタを選択するこによって検索サーバーにもわかりやすいcssを心がけたいものですね。