Caution

お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。

HTMLタグ辞典

<ul> / <ol> / <li>

『ul』は順序のない箇条書きリスト、『ol』は順序のある番号付きリストを作成する要素で、リストの各項目は『li』要素で記述します。

構文

<!-- 箇条書きリスト（順序なし） -->
<ul>
  <li>項目1</li>
  <li>項目2</li>
  <li>項目3</li>
</ul>

<!-- 番号付きリスト（順序あり） -->
<ol>
  <li>手順1</li>
  <li>手順2</li>
  <li>手順3</li>
</ol>

属性一覧

タグ・属性	概要
ul	順序のないリストを作成します。各項目の先頭にはデフォルトで黒丸（●）が付きます。
ol	順序のあるリストを作成します。各項目の先頭にはデフォルトで連番数字が付きます。
li	リストの各項目を表します。『ul』または『ol』の直接の子要素として使用します。
ol[type]	番号の種類を指定します。『1』（数字）、『a』（小文字アルファベット）、『A』（大文字）、『i』（ローマ数字小）、『I』（ローマ数字大）が指定できます。
ol[start]	リストの開始番号を指定します。例：『start="3"』と指定すると3から始まります。
ol[reversed]	番号を逆順（降順）にします。値の指定は不要です。
li[value]	『ol』内の特定の『li』に番号を上書き指定します。

サンプルコード

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
</head>
<body>

  <!-- 箇条書きリスト -->
  <h2>好きな食べ物</h2>
  <ul>
    <li>ラーメン</li>
    <li>カレー</li>
    <li>寿司</li>
  </ul>

  <!-- 番号付きリスト（3から開始） -->
  <h2>準備手順（続き）</h2>
  <ol start="3">
    <li>ファイルを保存する</li>
    <li>ブラウザで確認する</li>
    <li>修正して繰り返す</li>
  </ol>

  <!-- リストのネスト（入れ子） -->
  <h2>プログラミング言語</h2>
  <ul>
    <li>フロントエンド
      <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
      </ul>
    </li>
    <li>バックエンド
      <ul>
        <li>PHP</li>
        <li>Python</li>
      </ul>
    </li>
  </ul>

</body>
</html>

実行結果

『ul』の項目には黒丸が付き、『ol』には連番が付いて表示されます。リストをネストすると、内側のリストは字下げされて表示されます。

好きな食べ物
  ● ラーメン
  ● カレー
  ● 寿司

準備手順（続き）
  3. ファイルを保存する
  4. ブラウザで確認する
  5. 修正して繰り返す

プログラミング言語
  ● フロントエンド
      ○ HTML
      ○ CSS
      ○ JavaScript
  ● バックエンド
      ○ PHP
      ○ Python

概要

『ul』と『ol』はどちらもリストを表す要素ですが、意味が異なります。順番に意味がない（「好きな食べ物」など）場合は『ul』、順番が重要な（「手順」「ランキング」など）場合は『ol』を選ぶと適切な文書構造になります。

リスト要素の中には別のリストを入れ子にすることができます。入れ子にする際は『li』の中に直接テキストを書いてから子リストを書くのが正しい構造です。『ul』や『ol』の直接の子として『li』以外の要素を置くのはHTMLの仕様上無効な構造となります。

リストのマーカー（黒丸や番号）の表示はCSSで自由にカスタマイズできます。『list-style-type』プロパティでマーカーの種類を変えたり、『list-style: none』で非表示にしたりすることもよく行われます。ナビゲーションメニューも『ul』と『li』で作られることが多く、その場合はマーカーをCSSで非表示にします。