ハシウェブ

Web制作、プログラミングに関する情報を発信するブログ

箇条書きリストはどっちを使うの? ulとolの使い分け 【コーディング】

箇条書きリストはどっちを使うの? ulとolの使い分け 【コーディング】

「ulとolの違いをわからず使っている」
「リストの頭に、ulは点がつく、olは数字がつくじゃないの?」

悩み

こういった悩みにお答えします。

目次
  1. ulとolの使い分け
  2. 一般的なホームページパーツでの使用例
    1. ナビゲーションには「ul」
    2. パンくずリストには「ol」
    3. ページネーションには「ol」
  3. まとめ

ulとolの使い分け

順序に意味があるか、ないかを考えます。

  • ul … 順序に意味がないリスト
  • ol … 順序に意味があるリスト

リストのデザインに「ドットマーカーがあるからul」、「数字があるからol」という覚え方をしている人も多い気がします。

なので、リストでulとolを使い分けずにリストはすべてulでコーディングしているサイトをよく見かけます。

リストデザインの数字やドットに惑わされないように、「reset.css」等を使用したほうが初歩段階では上達できると思います。

一般的なホームページパーツでの使用例

ナビゲーションには「ul」

ホームページのヘッダー、フッター等にあるナビゲーションは明確な順番は無いのでulを使用します。
サイドバー等にあるカテゴリも同様にulを使用します。

<ul>
  <li>html</li>
  <li>css</li>
  <li>java script</li>
  <li>php</li>
</ul>

パンくずリストには「ol」

パンくずリストは、ホームページの階層構造をたどって、ユーザーが現在どのページを見ているのかわをわかりやすくするものです。
トップページを1階層目として、2階層目、3階層目と順番に並ぶものなのでolを使用します。

パンくずリストを設置していないサイトもありますが、検索エンジン最適化(SEO)スターター ガイドでgoogleが設置を推奨しているので必ず設置するようにしましょう。構造化マークアップするとなお良いです。

<ol>
  <li>TOP</li>
  <li>ブログ一覧</li>
  <li>ブログ詳細</li>
</ol>

ページネーションには「ol」

ページネーション(ページ送り、ページング)は、ブログやニュース等の一覧ページで件数が増えたとき、ページ分けをするときに使用します。
厳密には「最初のページ」「前のページ」「次のページ」「最後のページ」の扱いが順番であるのか微妙ですが、1ページ目、2ページ目、3ページ目と順番に並ぶのでolを使用します。

<ol>
  <li>最初のページ</li>
  <li>前のページ</li>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>次のページ</li>
  <li>最後のページ</li>
</ol>

まとめ

HTMLコーディングにおいて、デザインさえしっかりしっかりできていれば、タグの使い方はあまり重要に思われないことが多いですが、ソースの意味をgoogleに正しく伝えることはSEO的に重要なので、できるかぎりこだわっていったほうがよいと思います。

AIが意味を理解することは、今のところ難しいみたいなので、HTMLタグの使い方を意識したり、構造化マークアップをすることは、今後のSEOに好影響があるかもしれません。

箇条書きリストについては、マコなり社長の動画が参考になります。
htmlでということに限らず、一般的な文章としても箇条書きリストの考え方は同じです。

【皆知らない】仕事ができない人の「文章の書き方」10選