HTML / 要素

HTMLのリスト — 順番や項目のまとまりを伝える

HTMLのリストは、いくつかの項目をひとまとまりとして伝えます。順番に意味があるときはol、項目を並び替えても意味が変わらないときはulを使います。それぞれの項目はliで囲みます。

先に結論

olは「順番が大切なリスト」です。料理の手順や、順位のように、並び方で意味が変わるときに使います。

ulは「順番が大切ではないリスト」です。買い物の品や、必要な道具のように、項目を入れ替えても伝える内容が変わらないときに使います。

liはリストの中の一つの項目です。リストを作るときは、項目ごとにliで囲みます。

料理の手順は、順番を変えると結果が変わります。このような場合はolを使います。ブラウザーは通常、項目に番号を付けて表示します。

<ol>
  <li>野菜を洗う</li>
  <li>野菜を切る</li>
  <li>鍋で煮る</li>
</ol>

買い物の品は、どれを先に書いても同じ内容を伝えられます。このような場合はulを使います。ブラウザーは通常、項目の前に印を付けて表示します。

<ul>
  <li>ノート</li>
  <li>ペン</li>
  <li>消しゴム</li>
</ul>

項目の中に、さらに項目をまとめることもできます。内側のリストは、親のliの中に置きます。

<ul>
  <li>果物
    <ul>
      <li>りんご</li>
      <li>みかん</li>
    </ul>
  </li>
  <li>野菜</li>
</ul>

章の続きなど、番号を途中から始めたいときはolにstartを付けます。

<ol start="4">
  <li>4番目</li>
  <li>5番目</li>
</ol>

reversedを付けると逆向きに番号が進みます。特定の項目だけ番号を変える必要がある場合は、そのliにvalueを付けます。どちらも、見た目だけを整えるための設定ではなく、リストの番号を表します。

番号や点の形を変えたいときは、CSSのlist-style-typeを使えます。番号の見た目を変えても、olが伝える「順番が大切」という意味は変わりません。見た目を理由にolとulを選ばないようにしましょう。

リストの意味を伝えるために、行頭へ「・」や「1.」を手で入力する必要はありません。olやulを使うと、ブラウザーや支援技術が項目のまとまりを判断しやすくなります。