HTMLのリストとは？ul・ol・liの違いと書き方を初心者向けに解説

HTMLで箇条書きを作ろうとすると、ul、ol、liという3つのタグが登場します。「どれを外側に書くの？」「黒丸と数字の違いだけ？」と迷う人も多いでしょう。

リスト全体をulまたはolで囲み、一つひとつの項目をliで書きます。ulとolは見た目ではなく、項目の順序に意味があるかどうかで選ぶのが基本です。

この記事は、HTMLを書き始めた人に向けて、箇条書き・番号付きリスト・リンクを含む項目・入れ子の書き方を解説します。最後はパソコン上のHTMLファイルで学習メニューを作り、子項目を一つ増やして、リストの親子関係を確かめましょう。

HTMLのリストと3つのタグ

HTMLのリストは、関連する複数の項目を一つのまとまりとして表す仕組みです。持ち物、特徴、手順、目次など、同じ役割を持つ項目を並べるときに使います。

改行だけで項目を並べても、見た目は一覧にできます。リストタグを使うと、ブラウザや、画面の内容を読み上げるスクリーンリーダーなどにも「ここは複数項目からなる一覧」と伝えられます。

ulは順序を入れ替えても意味が変わらない一覧、olは順序に意味がある一覧に使います。各項目を表すのがliです。仕様の使い方を日本語で確認したいときは、MDNのulリファレンスを参照してください。

ul・ol・liの親子関係

基本の形は、外側の箱がulまたはol、箱の中にある各項目がliです。以下の短いコード例は、HTMLファイルの<body>と</body>の間へ書きます。ファイル全体のコードは、後半の「リストで学習メニューを作る手順」に用意しています。

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

この例では、ulがリスト全体をまとめ、3つのliがそれぞれの項目を表します。項目を増やすときはulを増やすのではなく、同じulの中へliを追加します。

ulとolの選び方

どちらを使うか迷ったら、項目の順序を入れ替えてみてください。

• 順序を入れ替えても意味が変わらない: ul
• 順序を入れ替えると手順や意味が変わる: ol

たとえば「用意するもの」は並び順が変わっても困らないためulが向いています。一方、「ファイルを保存する→ブラウザで開く→表示を確認する」は順番が重要なのでolが向いています。

ulタグで番号なしリストを書く

ulは unordered list（順序なしリスト）の略です。項目の順番を入れ替えても意味が変わらない一覧に使います。

<h2>用意するもの</h2>
<ul>
  <li>テキストエディター</li>
  <li>Webブラウザ</li>
  <li>練習用フォルダー</li>
</ul>

多くのブラウザでは、初期状態で各項目の先頭に黒丸などのマーカーが表示されます。ただし、マーカーの形は見た目の設定であり、ulの本質は「順序に意味がない」ことです。

ulが向いている代表例

• 必要な道具や持ち物
• 商品やサービスの特徴
• 同じ階層のカテゴリー
• 順位を付けない選択肢

ulの直下には、基本的にリスト項目のliを置きます。説明文を入れたい場合は、次のようにliの中へ書きましょう。

<ul>
  <li>HTML：ページの構造を作る</li>
  <li>CSS：ページの見た目を整える</li>
</ul>

olタグで番号付きリストを書く

olは ordered list（順序付きリスト）の略です。作業手順、順位、時系列など、項目の順番が意味を持つ一覧に使います。

<h2>表示を確認する手順</h2>
<ol>
  <li>HTMLファイルを保存する</li>
  <li>ブラウザでファイルを開く</li>
  <li>リストの表示を確認する</li>
</ol>

ブラウザは通常、liへ1、2、3のような番号を自動で付けます。途中へ項目を追加しても後続の番号が自動で調整されるため、数字を本文へ直接書く必要はありません。

開始番号や逆順を指定する方法

ここからは、番号を調整したいときの補足です。属性は開始タグに追加する設定で、番号を4から始める場合はolにstart="4"を指定します。次の例は4、5と表示されます。

<ol start="4">
  <li>見出しを追加する</li>
  <li>リストを追加する</li>
</ol>

reversed属性を付けると、大きい番号から小さい番号へと採番します。項目の文章が上下に並び替わるわけではありません。startを省略した次の3項目の例では、番号は3、2、1になります。

<ol reversed>
  <li>第3位</li>
  <li>第2位</li>
  <li>第1位</li>
</ol>

ol内の途中の項目から番号を変える場合は、そのliにvalue属性で整数を指定します。指定した項目に続く番号も、その値から採番されます。ul内のliに指定しても、番号指定としての意味はありません。

<ol>
  <li>項目1</li>
  <li value="5">項目5</li>
  <li>項目6</li>
</ol>

上の例で先頭に付く番号は1、5、6です。属性を省略すると、通常は1から1ずつ増えます。まずは属性なしで練習し、必要になったらMDNのolの属性とMDNのliのvalue属性を確認してください。

liタグの中に書ける内容

liは list item（リスト項目）の略です。短い文字列だけでなく、リンクや段落、さらに別のリストも含められます。

リンクを項目にする場合は、liの中へaタグを書きます。aはリンクを作るタグ、hrefはリンク先を指定する属性です。

<ul>
  <li><a href="index.html">ホーム</a></li>
  <li><a href="about.html">プロフィール</a></li>
</ul>

上の例でリンクを開くには、このコードを書いたHTMLファイルと同じフォルダーにindex.htmlとabout.htmlを用意する必要があります。ファイルがなければ、リンクの文字は表示されてもページは開けません。保存場所が違うときの指定は、HTMLの相対パスと絶対パスの違いで確認できます。

説明が長い項目は、liの中へ段落を入れることもできます。pは文章の段落を表すタグです。

<ul>
  <li>
    <p>HTMLは、見出しや段落などページの構造を表します。</p>
  </li>
  <li>
    <p>CSSは、色や余白などページの見た目を整えます。</p>
  </li>
</ul>

ただし、短い一文だけならpで囲まず、liへ直接書く方が簡潔です。内容のまとまりに応じて使い分けましょう。

リストを入れ子にする正しい書き方

項目の中に小分類や下位項目があるときは、リストを入れ子にします。重要なのは、子リストを対応する親項目のli内へ置くことです。

<ul>
  <li>タグを書く
    <ul>
      <li>見出し</li>
      <li>段落</li>
      <li>リスト</li>
    </ul>
  </li>
  <li>ブラウザで確認する</li>
</ul>

このコードでは、「見出し」「段落」「リスト」が「タグを書く」の下位項目だと構造で表しています。外側をul、内側をolにするなど、階層ごとに種類を変えることもできます。

間違いやすい入れ子の書き方

次のように、子リストを外側のulの直下へ置くのは避けましょう。

<!-- 誤った例 -->
<ul>
  <li>タグを書く</li>
  <ul>
    <li>見出し</li>
    <li>段落</li>
    <li>リスト</li>
  </ul>
</ul>

ブラウザが見た目を補正して表示する場合でも、親子関係が正しく伝わるとは限りません。子リストは「どの項目の下位にあるか」を示すため、その親のliが閉じる前に入れます。

リストで学習メニューを作る手順

パソコンのテキストエディターとWebブラウザを使います。練習専用のフォルダーを作り、エディターで空のファイルを開いておきましょう。以下のコードは、ファイル全体へ貼り付けて使えるHTMLです。

保存や開き方で迷ったら、HTMLの基本構造と最初のWebページの作り方で手順を確認できます。

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>HTML学習メニュー</title>
</head>
<body>
  <h1>HTML学習メニュー</h1>

  <h2>準備するもの</h2>
  <ul>
    <li>テキストエディター</li>
    <li>Webブラウザ</li>
    <li>練習用フォルダー</li>
  </ul>

  <h2>学ぶ順番</h2>
  <ol>
    <li>HTMLファイルを作る</li>
    <li>タグを書く
      <ul>
        <li>見出し</li>
        <li>段落</li>
        <li>リスト</li>
      </ul>
    </li>
    <li>ブラウザで確認する</li>
  </ol>
</body>
</html>

リストが表示されない・崩れるときの確認

まず編集したファイルを保存し、開いているブラウザを再読み込みします。それでも表示が合わないときは、症状に対応する行から確認しましょう。

終了タグの不足や入れ子の誤りを自分で見つけにくい場合は、Nu Html Checkerへコードを貼り付けて検証できます。エラー行だけでなく、その少し前にある閉じ忘れも確認しましょう。

よくある質問

ulとolは見た目で選んでもよいですか？

基本は内容の意味で選びます。順序を入れ替えても意味が変わらなければul、手順や順位など意味が変わるならolです。黒丸や数字などの見た目はCSSで変更できます。

liタグを単独で使えますか？

リスト項目として使うliは、ulまたはolの中へ置きます。liだけを並べず、リスト全体を表す親タグと組み合わせてください。

入れ子は何階層まで作れますか？

HTMLではリストをさらに入れ子にできますが、深くしすぎると読む順序や終了タグの対応が分かりにくくなります。必要最小限の階層にし、複雑なら見出しや別のリストへ分けましょう。

olの番号を4から始められますか？

はい。<ol start="4">のようにstart属性へ開始番号を指定します。途中から変えるときは、そのliにvalueを指定します。後続の項目も、指定した番号から続けて採番されます。

liの終了タグは省略できますか？

HTML仕様では条件によって省略できますが、初心者のうちは</li>まで書くことをおすすめします。タグの対応が見やすくなり、入れ子のミスを減らせます。

まとめ

HTMLのリストは、関連する項目を同じまとまりとして伝えるための構造です。

• 順序を入れ替えても意味が変わらない一覧はul
• 手順や順位など、順序に意味がある一覧はol
• 一つひとつの項目はli
• 子リストは対応する親項目のli内へ置く
• 見た目はHTMLの意味を決めてからCSSで整える

まずは「用意するもの」をul、「作業の手順」をolで一つずつ書いてみてください。保存・表示・項目追加まで試すと、外側のリストと各項目の役割を確かめられます。

Web制作全体でHTMLがどのような役割を持つのか整理したい人は、Web制作とは？仕事内容・必要なスキル・学び方を初心者向けに解説もあわせてご覧ください。

目的別に次の記事を選ぶ

リストを書けたら、ページに追加したい内容に合わせて次の基礎を学びましょう。

リンクや画像も使ってページの内容を増やしたいなら、見出し・段落・リンク・画像に使うタグと、属性の書き方を確認してください。

あわせて読みたい

HTMLタグとは？見出し・段落・リンク・画像の書き方を初心者向けに解説 HTMLタグの役割と基本の書き方を初心者向けに解説。h1〜h6、p、a、imgを使い、見出し・段落・リンク・画像を含むプロフィールページを作ります。

料金や特徴を同じ条件で比較したいなら、表の基本を確認してください。単純な項目の一覧はリスト、複数の比較軸がある情報は表、と使い分ける手がかりになります。

あわせて読みたい

HTMLの表とは？table・tr・th・tdの違いと書き方を初心者向けに解説 HTMLの表を作るtable・tr・th・tdの違いと書き方を初心者向けに解説。基本構造、見出しセル、caption・scope、セル結合、よくある間違いをコードで学べます。