ol/ulタグの使い方と違いについて

olとulタグはリストを作る要素です。olは順番を表示し、ulは順不同のリストを作る際に利用します。

HTML5になり追加された属性も掲載しています。

olタグ

使用例
<ol><li></li></ol>

リストを作るときに使用します。下の例のように記述します。するとリストの行頭に順番が表示されます。


	リスト
	リスト
	リスト

リストのスタート番号を決めることができます。


	リスト
	リスト
	リスト

リストは上から順番に重要な順に番号をつけるものですが、reversedを指定すると逆に表示されます。


	リスト
	リスト
	リスト

<ol> は必須のタグですが、使い方は文章内の項目を箇条書きにして説明したい場合に使うのが基本的な使い方です。よく見かける例としはブログの目次に利用されています。

ページのコンテンツの上部にこれから説明するコンテンツの内容を要約して、表示することで、このページが何について書かれているかを伝える役目もあります。

こちらの画像のようにページ上部に目次があるとわかりやすい。

<ol><ul>で書かれたものはGoogleが重要度の高い文字として認識するといわれています。

使用例
<ul><li></li></ul>

順不同（番号のない丸や四角等）のリストを作るときに使用します。行頭記号のスタイルはCSSで指定します。また、検索エンジン上では重要な項目として認識されます。

グローバルナビゲーションやローカルナビゲーションを作るときににも使用します。スタイルシート(CSS)でデザインを作ります。

グローバルナビゲーションやサイドメニューを作る際にも<ul>を使うのが一般的です。パンくずナビゲーションを作る際にも利用できます。

グローバルナビゲーションを作りたい方はこちらの記事を参考にしてください。
グローバルナビゲーションの作り方

また、行頭記号をチェックマークなどの画像にする方法もよく使います。スタイルシートの「list-style-image」などを使いますが、フォントやアイコンのサイズによって、ずれが生じます。

そのような時には「background」にアイコンを設定して、「margin/paddin/line-height」などで調整します。詳しくは下記記事にまとめてあります。
「ずれないリスト画像の設定方法」もご覧ください。


 1-1リスト
 1-2リスト
  
   2-1リスト
   2-2リスト
  
 
 1-3リスト