【HTML】「ul」「ol」の違いとは?使い分けてSEO内部施策に貢献!

この記事は約4分で読めます。
広告

HTMLでリストを書くときに便利な「ul」ですが、2つ以上同じスタイルを並べる時もかなり使えます!
コーポレートサイトやブログサイトを作成、LPなどを作る時もほぼすべての要素が「ul」で書いちゃいます。
でも、この記述ってあってるのかなと思って調べると、検索順位に影響する可能性があるらしいんだ。
「ul」を使っていい所、使っちゃダメで別のタグで書かなきゃいけない所などルールがあるから一緒に勉強しよう。
では、実際の使いどころと一緒に、より良いコーディングについてみていこう!

「ul」を使っていい所

「ul」を使っていい所
先にもお話したように、自分は「ul」を多用しすぎちゃう。
例えば、比較する2つの要素は、確実に「ul」で書く!他には一覧表示のコンテンツも「ul」で書く!headerのメニューも「ul」だし、SNSリンクも「ul」。footerのメニューも、SNSリンクも「ul」で書く!バナーのリンク集も「ul」で書く!その他にも今思いつかないけど、滅茶苦茶「ul」を使う。でもこれはこれで正解みたい。
「ul」は、順番が無いリストという意味の「Unordered List」の頭文字をとったもので、1、2,3…の順番が無ければどんな所でも利用可能なんだ。逆に順番があるリストは?

「ol」を使った方が良い所

「ol」を使った方が良い所
メニューや比較、一覧など順番が無いリストは、「ul」が適しているけど、順番のあるリストにはなるべく「ol」を使った方が良いよ!
「ol」を使う。かぁ。。。うん。オフィスレディ。。。いや違うオーダードリスト(Ordered List)の頭文字をとったもの。
「ol」は順番有りのリストや順序があるリストという意味。オフィスで働く女性ではない!
「ol」の使いどころは、ランキングや昇順、降順などのソート結果、ブログ記事の関連度とか順位がある要素。

htmlで「ul」、「ol」の書き方

「ol」は、順番のあるリストで、「ul」は順番が無いリストってわかっちゃったから、じゃーその使い方と注意点を見てみよう!
「ul」「ol」のリストは共に、「<ul></ul>」「<ol></ol>」の直下には「<li></li>」タグしか入れちゃいけない決まりがあるんだ。
それ以外の決まりごとは無いから自由に使えるのが良い所!
それではまず「ul」の書き方から見てみよう!

「ul」の書き方

<ul>
 <li>リスト1</li>
 <li>リスト2</li>
 <li><a href="">リスト3</a></li>
</ul>

この様に「ul」の直下には絶対「li」タグで囲わなくちゃいけないんだ。
でもこれがCSSでスタイリングしたり、jsで動きを付けたりするのが滅茶便利なんだよね!
jQueryで「li」要素を指定したりjQueryで繰り返し処理したりjQueryでようその数を取得したり色々出来ちゃうから、多用しすぎてHTMLがdivとリストだらけになることが結構ある!
「li」直下はもう自由で、中にdivを入れても良いしspanやpタグを入れても、例みたいにaタグを入れて1つだけリンクにしても良い。

「ol」の書き方

<ol>
 <li>リスト1</li>
 <li>リスト2</li>
 <li><div>リスト3</div></li>
</ol>

「ol」の書き方も基本は「ul」と一緒で、見た目も注意点も特に何も変わらない。
でも検索ロボットが見た時に「ol」は順番があるリストだから1番上が最も重要な要素と認識しやすくなるんだ!
この「ul」「ol」要素って一緒に使うことができると思う?

「ul」「ol」を一緒に使う書き方

<ol>
 <li>
  <p>〇●のリスト</p>
  <ol>
   <li>その1</li>
   <li>その2</li>
   <li>その3</li>
  </ol>
 </li>
 <li>リスト2</li>
 <li>リスト3</li>
</ol>

「ul」「ol」って意味が違うから使い分けができそうなのは分かった!
でも、たま~に基本は順番が無いリストなんだけど、項目内にランキングを置いたりとか、順位付けのある要素を入れたい時がある。時がある。時がある。極稀だからあまり説明してもあれかも。
そういえば、昔「稀人」って怖い映画あったよね。
あの映画滅茶苦茶すきだったな~底冷えのする恐怖「感染」や「残穢」を見た後と同じ感覚になって良かった。
「稀人」、アマプラかネットフリックスに有ったらもう一回みたいなぁ。
「ul」「ol」を混ぜて使う場合も、直下には必ず「li」を入れるルールは一緒で、例のように利用できる。
また、逆に「ol」の中に「ul」っていうのもできる。

コメント

タイトルとURLをコピーしました