ol要素とul要素の正しい使い分け方

公開日

ウェブページを作る際、使用頻度が比較的高い要素にリスト (一覧) があります。このリストの中に、項目の並び順の有無で使い分ける必要のあるol要素とul要素があります。

今回は、ol要素とul要素の正しい使い分け方について解説します。

ol要素は順序があるリスト

Ordered List (順序付けされた一覧) の頭文字を取ったol要素は、その名の通り、項目の並び方に順序がある場合に使用します。

ブラウザで表示される際、リスト項目の先頭には通常、数字が付きます。

ul要素は順序がないリスト

Unordered List (順序付けされていない一覧) の頭文字を取ったul要素は、その名の通り、項目の並び方に順序がない場合に使用します。

ブラウザで表示される際、リスト項目の先頭には通常、ビュレット (bullet / 弾丸) と呼ばれる黒丸などが付きます。

時に悩むリストの使い分け方

ol要素とul要素のどちらを使うべきかで悩むケースが稀にあります。例えば、

  • ブログ記事一覧
  • パンくずリスト (パンくずナビゲーション)
  • ページネーション (ページ分割ナビゲーション)

これらをリストとして扱った場合、どちらの要素を使うべきだと思いますか？

ブログ記事一覧の場合

どのような記事一覧かで変わると思います。

ブログ記事は通常、時系列順に並ぶので、ol要素が相応しいと思われます。

しかし、「オススメ記事」のように記事を部分的にピックアップした場合、時系列は重要ではないので、ul要素でも問題ないでしょう。

パンくずリストの場合

パンくずリストをどのような情報と捉えるかで変わると思います。

パンくずリストは通常、「最上位のページ」「祖先のページ」「現在のページ」の順に並べるので、ol要素が相応しいと思われます。

しかし、あるウェブサイトで次のようにマークアップしているのを見たことがあります。

<ul>
  <li>
    <a>最上位のページ</a>
    <ul>
      <li>
        <a>祖先のページ</a>
        <ul>
          <li>
            <a>現在のページ</a>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

パンくずリストをウェブサイトの階層の一部分として捉えるのであれば、このul要素を入れ子にしたマークアップも間違いではないと思います。

ページネーションの場合

ページ分割されたウェブページで使用されるページネーションは通常、ページ数の順で並んでいるため、ol要素が相応しいと思われます。

しかし、「最初のページ」「前のページ」「次のページ」「最後のページ」といった特定のページへのリンクが含まれる場合があります。この場合、

  1. 最初のページ
  2. 前のページ
  3. ページ
  4. 次のページ
  5. 最後のページ

と並べる場合もあれば、

  1. 前のページ
  2. 最初のページ
  3. ページ
  4. 最後のページ
  5. 次のページ

のように並べる場合もあると思います。つまり、絶対的な並び順があるわけではないため、ul要素の方が相応しいとも言えます。

ol要素とul要素を使い分けるためのポイント

ここまでで、ol要素とul要素の使い分け方が、ケースバイケースであることが分かっていただけたかと思います。つまり、リストを使う場面に合わせて、その都度、適切な方を選択しなければなりません。

ある程度、経験を積んだWebクリエイターであれば、適切な方を問題なく選択できるかもしれませんが、初心者の方には難しいかもしれません。

では、簡単に適切な方を選択するための基準がないのかと言えば、あります。それは、

ol要素
項目を入れ替えるとコンテンツとして成立しない
ul要素
項目を入れ替えてもコンテンツとして成立する

ということです。ol要素とul要素の使い分けで迷ったときは項目を入れ替えてみてください。

〆

正確に、丁寧に、適切に、作ったウェブページがGoogleさんにきちんと届きますように、と願わずにはいられません。

関連記事