ナビゲーション、記事の目次、商品の一覧。ページの中で並んでいるものは、たいていリストで書かれています。ここを雑に書くと、あとでCSSを当てるときに苦労するので、最初に型を押さえておきましょう。

順番があるかどうかで使い分ける

  • ul … 順番に意味がない並び（メニュー、特徴の列挙など）。頭に「・」が付く
  • ol … 順番に意味がある並び（手順、ランキングなど）。自動で番号が振られる
  • li … 中の1項目。ul と ol のどちらでも、項目は必ず li で書く

番号を自分で「1.」「2.」と打つ必要はありません。ol にしておけば、途中に項目を足しても番号は勝手に振り直されます。ここが手打ちとの大きな違いです。

CODEul と ol を並べて比べるコードを書き換えると、すぐ下で動きます

ol の項目を1つ増やしてみてください。番号が自動で振り直されます。<ul> を <ol> に書き換えてみるのも分かりやすいです。

ul の直下に置けるのは li だけ

見落としやすいルールがあります。ul や ol のすぐ内側に書けるのは li だけで、p や div を直接置くことはできません。文章を入れたいときは、li の中に入れます。

よくある間違いと、正しい形
<!-- 間違い：ul の直下に p がある -->
<ul>
  <p>おすすめ</p>
  <li>HTML</li>
</ul>

<!-- 正しい：文章は li の中に入れる -->
<p>おすすめ</p>
<ul>
  <li>HTML</li>
</ul>

入れ子にすると階層になる

li の中に、さらに ul を入れることもできます。目次の「大項目・小項目」はこの形です。このとき、内側の ul は li を閉じる前に書きます。

CODEリストを入れ子にするコードを書き換えると、すぐ下で動きます

内側の ul は </li> より前に置きます。閉じる位置を変えると崩れるので、インデントを揃えて書くのがコツです。

ナビゲーションもリストで書く

サイトのメニューは、見た目こそ横並びですが、中身は「順番に意味のない並び」なのでリストで書くのが基本です。横並びにするのはCSSの仕事で、HTMLの段階では縦に並んでいて構いません。この分担を覚えておくと、あとでレイアウトを変えたくなったときにHTMLを書き直さずに済みます。