「ulとolの違いをわからず使っている」
「リストの頭に､ulは点がつく､olは数字がつくじゃないの？」
こういった悩みにお答えします｡
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でということに限らず､一般的な文章としても箇条書きリストの考え方は同じです｡
AIが意味を理解できないということについては､中田敦彦のYouTube大学の動画が参考になります｡
