【HTML】ulタグとolタグの違いは？使い分けについて解説！

Webサイトを閲覧していると、箇条書きや、左に番号が振られたリストを見ることがありますよね。

これらはulolというタグを使用して実装されています。

しかし、「どっちを使うべきかわからない」「どの場面でul・olを使うべきかわからない」という方もいるかと思います。

そこで今回の記事では、ulタグとolタグの使い分けや正しい使い方について解説していきます！

使用例なども合わせて紹介しますので、参考になれば幸いです。

ulタグ・olタグの基本的な情報

まず最初に、ulタグ、olタグとは何なのかを簡単に説明していきます。

ulタグは順序なしリスト

ulはUnordered Listの略で、順序なしリストと呼ばれています。

主に順序を変更しても意味が変わらないリストを作成するときに使用します。箇条書きなどによく使われていますね。

<ul>
  <li>順序なしリスト</li>
  <li>順序なしリスト</li>
  <li>順序なしリスト</li>
</ul>

構文は上記のとおりで、ulの直下にはli(list item)タグのみを配置することができます。

ブラウザ上では、ulタグでリストを作成すると、以下のような見た目になります。

各項目の左側に「・」がついていますね。

これは、ブラウザが持つデフォルトのCSSに、以下のコードが用意されているからです。

ul {
  list-style-type: disc; /* リストに円をつける */
}

olタグは順序付きリスト

olはOrdered Listの略で、順序付きリストと呼ばれています。

こちらは順序が意味を持つリストを作成するときに使用します。

例えば、手順や道順を説明する場合、順番自体に意味がありますよね。olタグはそういった場面で使用します。

<ol>
  <li>順序付きリスト</li>
  <li>順序付きリスト</li>
  <li>順序付きリスト</li>
</ol>

構文はulと同じで、直下にはliタグを配置することができます。

olタグで作成したリストを、ブラウザ上で確認してみましょう。

各項目の左側には、番号が振られていますね。

olタグはブラウザの標準のCSS内で、数字を表示する指定がされています。

ul {
  list-style-type: decimal; /* リストに数値をつける */
}

olタグ・ulタグの使い分け

ここからは、実際にどんな場面でulタグ・olタグを使うべきかを解説していきます。

まずどのように使い分けるかについてですが、もう一度ulとolの特徴を見てみましょう。

これら2つの違いは、順番に意味があるかどうかですよね。

ulはどんな順番でも意味は変わりませんが、olは順番を入れ替えると意味が変わってしまいます。

なので、ulかolで迷ったときは、まずは中身の項目の順番を入れ替えてみてください。

もし入れ替えても問題ない場合はulタグ、入れ替えると意味が変わる場合はolタグを使用しましょう。

以下で具体例を出しつつ説明していきます。

ulタグ・olタグの使い分けの具体例

ここでは以下の3つの例を用いて、ulタグ・olタグの使い分けを見ていきましょう。

買い物リストを作る場合はulタグ

以下のような買い物リストがあったとします。

この場合、項目をただ箇条書きにして並べているだけで、並び順に意味はないですよね。

項目の位置を入れ替えても、特に何も変わりません。

このように、並び替えても意味が全く変わらない場合はulを使用しましょう。

ランキング表を作る場合はolタグ

以下のような人気料理ランキングを例にして見ていきます。

この場合は、人気がある項目順に並んでいるので、並び順自体に意味があります。

同レベルの項目をただ並べているのではなく、1位は一番人気、2位は二番目に人気、というふうに数字に明確な意味があります。

1位と3位の項目を入れ替えると、意味が全く異なりますよね。

このように、並び順に特別な意味がある場合はolを使用しましょう。

手順を説明する場合はolタグ

続いて手順を説明する場合を見ていきましょう。

ここではWebサイト制作の手順を例にしています。

手順を説明する場合は、1が終わったら2、2が終わったら3…というように、並び順に意味がありますね。

1から順番に進める必要があるため、項目を入れ替えることはできません。

この場合も並び順にある特定の意味があるため、olを使用します。

【まとめ】並び順に意味がないならulタグ、特別な意味があるならolタグ

ulタグとolタグをまとめると、以下のとおりです。

ulは箇条書きにして項目を並べるときによく使用します。

olはランキング表や手順の説明など、順番がある特定の意味をもつ場合に使用します。

ulかolかで迷ったときは、

というふうにして判別してみてください！

あわせて読みたい

【CSS】olタグの数字の背景に色付きの円をつける方法 順序付きリストolタグを使うことで、番号付きのリストを作ることができます。 olタグのデフォルトの見た目 順序付きリスト デフォルトの見た目は こんな感じ しかしデフ…