Daftar belanja Siti memuat beras, telur, minyak goreng, dan kopi bubuk. Urutan item pada daftar tersebut tidak mengubah maknanya: seluruhnya harus dibeli, tanpa nomor yang menentukan prioritas. Untuk kumpulan item semacam ini, HTML menyediakan unordered list, yaitu daftar yang item-itemnya setara dan bebas urutan. Pada Chapter ini kita membedah anatomi elemen ul, aturan isi yang mengikatnya, waktu yang tepat untuk memilihnya, lalu mempraktikkannya pada daftar belanja Siti.

Anatomi ul dan li #

Unordered list dibangun oleh dua elemen yang selalu bekerja berpasangan. Elemen ul berperan sebagai wadah daftar, sedangkan setiap item dibungkus elemen li (list item). Perhatikan contoh tiga item berikut:

html 
<ul>
  <li>Beras</li>
  <li>Telur</li>
  <li>Minyak goreng</li>
</ul>

Output yang Dihasilkan:

text 
Browser menampilkan tiga baris dengan bullet di depannya:
  - Beras
  - Telur
  - Minyak goreng

Mari kita telaah peran tiap baris:

  1. Baris 1 (<ul>): tag pembuka wadah daftar yang menyatakan “mulai dari sini, isinya kumpulan item”.
  2. Baris 2-4 (<li>): tiga elemen li, satu untuk setiap item belanja.
  3. Baris 5 (</ul>): tag penutup yang mengakhiri daftar; konten setelah baris ini tidak lagi menjadi bagian daftar.

Kapan Urutan Tidak Penting #

Aturan praktisnya sederhana: pilih ul ketika menukar posisi dua item tidak mengubah makna daftar. Karena tidak ada nomor yang mengikat, pembaca bebas membaca dari item mana pun. Beberapa konten yang cocok disusun sebagai ul:

  • daftar belanja dan daftar kebutuhan bahan,
  • fitur-fitur unggulan pada halaman produk,
  • kumpulan tautan di dalam menu navigasi,
  • rangkuman poin pada catatan rapat.

Sebaliknya, ketika nomor urut justru membawa makna, misalnya langkah resep atau peringkat, pilihan yang tepat adalah ordered list yang kita bahas pada Chapter berikutnya.

Aturan Isi Elemen ul #

Spesifikasi HTML menetapkan content model ul: anak langsungnya hanya boleh elemen li. Spasi, tab, dan komentar HTML boleh berada di dalam ul karena semuanya bukan elemen, hanya penanda pada teks sumber. Selain itu, penempatan apa pun di dalam ul akan ditolak validator. Teks yang ditulis langsung di antara item, misalnya, menghasilkan pesan galat Text not allowed in element ul in this context.

Contoh Lengkap: Daftar Belanja Siti #

Simpan file berikut sebagai daftar-belanja.html, lalu buka dengan browser untuk melihat hasilnya:

html daftar-belanja.html 
<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Daftar Belanja Siti</title>
</head>
<body>
  <h1>Daftar Belanja Mingguan</h1>
  <p>Disusun oleh Siti untuk belanja di pasar akhir pekan.</p>
  <ul>
    <li>Beras 5 kg</li>
    <li>Telur satu lusin</li>
    <li>Minyak goreng</li>
    <li>Kopi bubuk</li>
  </ul>
</body>
</html>

Output yang Dihasilkan:

text 
Jendela browser menampilkan:
  - Judul besar "Daftar Belanja Mingguan"
  - Satu paragraf pengantar
  - Empat item belanja, masing-masing diawali bullet

Uraian baris-per-baris bagian yang menentukan:

  1. Baris 9 (<h1>): judul halaman yang diperkenalkan pada section Teks dan Formatting.
  2. Baris 10 (<p>): paragraf pengantar yang memberi konteks daftar di bawahnya.
  3. Baris 11 (<ul>): wadah daftar ditulis tanpa atribut tambahan karena perilaku bawaannya memadai.
  4. Baris 12-15 (<li>): empat item belanja; jumlah li bebas sesuai kebutuhan konten.
  5. Baris 16 (</ul>): penutup wadah daftar; seluruh item berada di antara tag pembuka dan penutup ini.

Bullet Bawaan dan Styling #

Tanpa satu baris CSS pun, daftar ini tampil berbullet: browser menerapkan stylesheet bawaan yang menambahkan penanda titik pada setiap li. Bentuk penanda itu murni urusan tampilan. Ketika kita sampai pada section HTML dan CSS, penanda dapat diubah bentuknya lewat properti list-style-type, diganti gambar, atau dihilangkan seluruhnya. Meski penandanya dihilangkan, makna “kumpulan item setara” tetap tersimpan di dalam struktur HTML, dan browser tetap mengenali konten tersebut sebagai daftar.

Daftar item setara kini masuk kotak peralatan kita. Pertanyaan berikutnya: bagaimana bila urutan justru bermakna? Chapter Ordered Lists menjawabnya dengan elemen ol beserta atribut penomorannya.

Referensi resmi untuk pendalaman:

Berkas Sumber

Berkas pendukung halaman ini dapat diunduh dan dijalankan langsung sesuai penjelasan di atas.

daftar-belanja.html

Unduh berkas
html 
<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Daftar Belanja Siti</title>
</head>
<body>
  <h1>Daftar Belanja Mingguan</h1>
  <p>Disusun oleh Siti untuk belanja di pasar akhir pekan.</p>
  <ul>
    <li>Beras 5 kg</li>
    <li>Telur satu lusin</li>
    <li>Minyak goreng</li>
    <li>Kopi bubuk</li>
  </ul>
</body>
</html>