List: Daftar Berpoin dan Bernomor

Dua Jenis List

HTML punya dua jenis daftar. Pilih berdasarkan makna, bukan tampilan:

<ul> (unordered list): urutan tidak penting. Tampil sebagai bullet.

<ul>
  <li>Indomie</li>
  <li>Telur</li>
  <li>Kecap</li>
</ul>

<ol> (ordered list): urutan penting. Tampil sebagai nomor.

<ol>
  <li>Rebus air</li>
  <li>Masukkan mie</li>
  <li>Tiriskan dan bumbui</li>
</ol>

Aturannya sederhana: daftar belanja pakai <ul> (mau beli telur dulu atau mie dulu sama saja), langkah resep pakai <ol> (kebalik urutannya bisa gagal masak).

Anatomi List

Strukturnya selalu tiga lapis:

1. Tag pembungkus: <ul> atau <ol>
2. Tiap item: <li> (list item)
3. <li> tidak boleh berdiri sendiri tanpa pembungkusnya

Catatan teknis: Browser otomatis memberi indentasi dan marker (bullet/nomor) pada list. Kalau suatu hari kamu mau menghilangkan bullet-nya, itu urusan CSS, bukan dengan mengganti tag. Struktur HTML-nya tetap list.

List Bersarang

List bisa dimasukkan ke dalam item list lain untuk struktur bertingkat:

<ul>
  <li>Makanan
    <ul>
      <li>Nasi goreng</li>
      <li>Mie ayam</li>
    </ul>
  </li>
  <li>Minuman
    <ul>
      <li>Es teh</li>
      <li>Kopi susu</li>
    </ul>
  </li>
</ul>

Perhatikan: <ul> yang bersarang ditaruh di dalam <li>, bukan di antara dua <li>. Ini pola yang dipakai menu navigasi dropdown di banyak website.

Nomor Awal Kustom

Atribut start pada <ol> menentukan angka awal:

<ol start="5">
  <li>Langkah kelima</li>
  <li>Langkah keenam</li>
</ol>

Berguna kalau daftar langkah terpotong oleh penjelasan di tengah artikel lalu dilanjutkan lagi.

List Deskripsi (Bonus)

Ada jenis ketiga yang jarang dikenal: <dl> (description list) untuk pasangan istilah dan definisi:

<dl>
  <dt>HTML</dt>
  <dd>Bahasa markup untuk struktur halaman web.</dd>
  <dt>CSS</dt>
  <dd>Bahasa untuk mengatur tampilan halaman web.</dd>
</dl>

Cocok untuk glosarium, FAQ, atau daftar istilah. Jarang dipakai tapi bagus untuk diketahui.

Kapan Memakai Apa

• Navigasi menu: <ul>
• Langkah tutorial: <ol>
• Daftar fitur produk: <ul>
• Syarat dan ketentuan berurut: <ol>

Kalau ragu, tanya ke diri sendiri: "apakah urutannya penting?" Kalau ya, <ol>. Kalau tidak, <ul>.