Unordered List

Dari daftar belanja sampai daftar fitur produk, banyak informasi berbentuk deretan butir yang urutannya tidak bermakna. Membalik urutan daftar belanja tidak mengubah isinya sedikit pun. Untuk deretan seperti itu, HTML menyediakan unordered list.

Chapter ini membahas aturan isi ul, penanda bawaannya, contoh daftar belanja lengkap dengan bedahnya, serta satu kesalahan penempatan teks yang paling sering terjadi.

Aturan Dasar ul #

Elemen ul (unordered list) adalah wadah daftar yang urutan butirnya tidak bermakna. Aturan isinya ketat: child langsung dari ul hanya boleh satu jenis elemen — li. Teks telanjang, paragraf, gambar, atau heading tidak boleh ditaruh langsung di dalam ul; semuanya harus dibungkus li lebih dulu.

Kesalahan yang paling sering muncul adalah mengetik teks langsung di dalam ul:

<ul>
  Kopi bubuk 250 gram
  <li>Gula aren</li>
</ul>

Validator menandai baris kedua sebagai teks yang tidak sah di dalam ul, sehingga struktur di atas tidak valid. Perbaikannya sederhana — bungkus teks itu dengan li:

<ul>
  <li>Kopi bubuk 250 gram</li>
  <li>Gula aren</li>
</ul>

Contoh Daftar Belanja #

Mekanismenya: ul hanya berperan sebagai penanda “ini satu daftar”, sedangkan li adalah butir-butirnya. Browser kemudian menambahkan penanda bulatan di depan tiap li secara otomatis. Berikut daftar belanja Budi:

<ul>
  <li>Kopi bubuk 250 gram</li>
  <li>Gula aren satu bungkus</li>
  <li>Roti tawar</li>
  <li>Keju cheddar 100 gram</li>
</ul>

Hasil Render:

Mari kita telaah kode di atas:

1. Baris 1 (<ul>): wadah daftar; elemen ini tidak menampilkan teks apa pun — tugasnya menandai bahwa isi di bawahnya adalah satu daftar.
2. Baris 2-5 (<li>...</li>): empat butir; browser menyisipkan penanda bulatan di depan masing-masing tanpa kita mengetiknya.
3. Urutan butir: keempat li sederajat — membalik urutannya tidak mengubah makna daftar. Itulah ciri unordered list.

Penanda adalah Urusan CSS #

Bulatan yang tampil itu bukan bagian dari makna ul. Bentuk penanda — bulatan penuh, bulatan kosong, kotak, atau tanpa penanda — diatur CSS lewat properti list-style-type. Konsekuensinya, jangan memilih ul karena ingin tampil bulatan; pilih ul karena urutan butirnya memang tidak bermakna.

Kapan Memakai ul #

Tiga pemakaian yang paling sering dijumpai:

Ringkasan #

• ul untuk daftar tanpa urutan bermakna; child langsungnya hanya li.
• Teks telanjang di dalam ul tidak sah — bungkus dengan li.
• Penanda bulatan adalah tampilan bawaan browser; bentuknya diatur CSS.
• ul cocok untuk daftar fitur, menu navigasi, dan daftar artikel.

Chapter berikutnya membahas saudara ul: ordered list — daftar yang urutannya justru menjadi inti maknanya.