olとulの使い分け極意をおしえてしんぜよう！

いったい何様だ。
こんにちは。うぇぶ屋はんげつ堂です。
htmlの豆知識的なというかこうしたほうがクオリティあがるんでね？とかそんな感じのことも書いていこうかなとね。思いまして。

olとulの使い分けをデザイン上での数字のあるなしだけで決めてる人、騙されてます。

（いや、騙すつもりは誰にもないんだけど。）
なぜならリストの頭に数字がつくとか黒丸がつくとかはただのあしらいであり、使い分けの材料にするべきはそのリストの内容自体だからです！
ばばーん！！！！
（とかなんとか言ってみたけど正直「正しい意味を持つhtml」を組む明確な理由というのがもうhtmlコードのクオリティただ一点になる気がしている………）
（なんならたまに仕様を確認しないと古い基準で組んでるってことも起こったりするので気を付けなければね）

olとulの違いって？

そもそもこの二つ、デフォルトで見た目の上ではリストの頭が数字になるか中黒になるかしか違いがありません。
ですがね、リストの頭なんてもんはcssであしらいをいくらでも変えられるものなのです。
じゃあこの二つ、いったいなんなの？語源はなに？
という疑問を抱く人もいるかもしれません。昔聞かれました。調べました。

「ol」は「Ordered　list（順序リスト）」の略
「ul」は「Unordered　list（順不同リスト）」の略

つまり
順番が必要なリストはolを使用し
順番がごっちゃになってもいいリストはulを使う！
ね？簡単でしょう？

ちょっと確認問題

では、今から提示する二つのリスト、いったいどっちにどっちを使えばいいでしょうか？

Aのリスト
・卵を容器に割り入れます
・砂糖、薄口醤油などの調味料を加え、溶きほぐします
・玉子焼き器に油をしき、火にかけます
・焼きます

Bのリスト
1.豚肉
2.ジャガイモ
3.にんじん
4.玉ねぎ
5.顆粒和風だし

答え合わせ

正直どっちがどっちって話を書いたばかりではあるので、こんなすぐ練習問題出す意味ある？みたいな構成行き当たりばったり感。
というか、何だったら1画面に問題と答えが収まっちゃう。
…
さすがにダメだわ。






ってことで昔ながらの姑息な手をつかって幅を稼いでみたけれどどうだろう。
お待ちかね（待ってないかも）
Aのリストはol、Bのリストはulです。

解説

なぜそうなるのか。
簡単に見分ける方法として、リストアイテム一個一個はさみでちょん切って順番バラバラにして成り立つかどうか。
もしくは、リストアイテムとリストアイテムの間に「次へ」を表すような矢印を入れてみて意味が通るかどうか。

例えばAのリストをバラバラにしてみて

・焼きます
・卵を容器に割り入れます
・玉子焼き器に油をしき、火にかけます
・砂糖、薄口醤油などの調味料を加え、溶きほぐします

…なんのこっちゃでしょ。
ということはこのリストは順序リスト、つまりolを使うべきとなる。

ではBのリスト今度は間に矢印を挟んでみましょう

1.豚肉
↓
2.ジャガイモ
↓
3.にんじん
↓
4.玉ねぎ
↓
5.顆粒和風だし

なんかのクイズの問題かな。
脱出ゲームとかでありそうな感じになりました。
正直こっちについては全部揃えばいいので順番は関係ありません。
よって順不同リスト、ulを使用する。となるわけです。

タグ自体の意味を考えて使用しよう

ってことで締めです。
別にタグの用法が違って使われていることに憂えてるとか嘆いてるとかではないですが、できる限り意味を理解して使用していきたい所存。
とか言いながら仕様がかわったり、あるいは新しく増えたりそんな世界なので新しい情報は追っかけていかないとなぁとおもうはんげつ堂でございました。
ってことで念のためmozillaのタグリファレンスで確認したところ

HTML の <ol> 要素は、項目の順序付きリストを表し、ふつうは番号付きのリストとして表示されます。

HTML の <ul> 要素は、項目の順序なしリストを表します。一般的に、行頭記号を伴うリストとして描画されます。

ってことで長々ぐだぐだ語ったことはあってますね！今のところ！
ほっと胸をなでおろす私なのでした。
え？dl（definition list（定義リスト））はどうなんだ？って？
それはまた後程いつか～～

タグ仕様参照：mozilla HTML要素リファレンス