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」っていうのもできる。

SNSフォローボタン
エンデ・バタローをフォローする
サイト制作

東京に住み始めて4年目。

前は神戸に。その前は名古屋に住んでいました。

ある年の冬、車で島根県へ旅行に出かけました。
同県の山中にある寒村をゆるゆると走っていると地面が凍結しており
車ごと川に滑り落ちそうになった経験を持つ30才(男)です。

フロントエンドを始めて4年目になります。
エディタはAtomを利用して、日々の業務でイラレとフォトショ、HTMLとCSSとjavascriptとphpを使用してます。
仕事をしていて、検索する手間を省くためフロント技術ブログを書いています。

エンデ・バタローをフォローする
スポンサーリンク
初めてのブログ

コメント

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