List

Susun daftar berurutan dan tak berurutan dengan ol dan ul.

Pahami konsepnya

Daftar (list) menyajikan data berurutan ke bawah dan hadir dalam dua rasa. Ordered list <ol> memberi nomor pada tiap butirnya — cocok untuk langkah yang urutannya penting, seperti resep atau prosedur. Unordered list <ul> menandai butir dengan bulatan — cocok untuk kumpulan yang urutannya bebas, seperti daftar belanja.

Keduanya memakai tag yang sama untuk isiannya: <li> (list item). Satu li berisi satu butir; menaruh teks langsung di dalam ol atau ul tanpa li adalah kesalahan yang membuat struktur kacau. Browser merapikan penomoran dan bullet secara otomatis — kamu hanya menulis isinya.

Daftar bisa bersarang: letakkan ul atau ol baru di dalam sebuah li untuk membuat sub-daftar. Struktur inilah kerangka asli menu navigasi website — diberi sentuhan CSS, sebuah ul berubah menjadi menu horizontal atau dropdown.

Coba contoh kode

<h3>Langkah memasak mie</h3>
<ol>
  <li>Didihkan air</li>
  <li>Masukkan mie</li>
  <li>Tiriskan dan bumbui</li>
</ol>

<h3>Belanja bulanan</h3>
<ul>
  <li>Beras</li>
  <li>Minyak goreng</li>
  <li>Kopi</li>
</ul>

ol menomori 1-2-3 dengan sendirinya, ul memunculkan bullet pada tiap li. Ganti urutan langkah di ol dan penomoran ikut menyesuaikan tanpa perlu menyunting angka manual — keunggulan kecil yang sangat terasa pada daftar panjang.

Daftar bersarang

<ul>
  <li>Front-end
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
    </ul>
  </li>
  <li>Back-end</li>
</ul>

Sub-daftar menempel DI DALAM li induknya, bukan setelahnya — perhatikan penutup </li> berada setelah sub-ul selesai. Kesalahan umum pemula justru meletakkan ul di luar li sehingga tingkatan tersasar.

Latihan singkat

Buat daftar bernomor rencana harianmu dengan satu sub-daftar tak bernomor di dalamnya, lalu tukar posisi dua butir utama dan amati penomorannya.