Unordered List `<ul>`: Membuat List Tanpa Urutan di HTML

Artikel ini merupakan bagian dari seri Belajar HTML untuk Pemula di hanifmu.com. Setelah membahas ordered list <ol>, kita lanjut ke unordered list <ul>. List tanpa urutan untuk item-item yang tidak memerlukan prioritas tertentu.

Apa itu Unordered List?

Unordered list adalah list di mana setiap item ditandai dengan bullet (tanda strip) tanpa nomor urut. HTML punya tag <ul> untuk ini.

Unordered list cocok untuk:

• Daftar fitur
• Menu navigasi
• Pilihan opsi
• Item yang urutannya tidak penting

Struktur Dasar Unordered List

Tag <ul> jadi container, item list pakai tag <li>:

<ul>
  <li>Item pertama</li>
  <li>Item kedua</li>
  <li>Item ketiga</li>
</ul>

Hasilnya:

• Item pertama
• Item kedua
• Item ketiga

Attribute type pada Unordered List

Attribute type mengatur jenis bullet yang digunakan. Ada tiga pilihan:

Type=“disc” (Default)

Bullet berupa titik hitam penuh. Ini default kalau tidak pakai attribute type:

<ul type="disc">
  <li>Item pertama</li>
  <li>Item kedua</li>
  <li>Item ketiga</li>
</ul>

Output:

• Item pertama
• Item kedua
• Item ketiga

Type=“circle”

Bullet berupa lingkaran kosong:

<ul type="circle">
  <li>Item pertama</li>
  <li>Item kedua</li>
  <li>Item ketiga</li>
</ul>

Output: ◦ Item pertama ◦ Item kedua ◦ Item ketiga

Type=“square”

Bullet berupa kotak:

<ul type="square">
  <li>Item pertama</li>
  <li>Item kedua</li>
  <li>Item ketiga</li>
</ul>

Output: ▪ Item pertama ▪ Item kedua ▪ Item ketiga

Nested Unordered List

Nested unordered list artinya list di dalam list. Tambah tag <ul> di dalam <li>:

<ul>
  <li>
    Buah-buahan
    <ul>
      <li>Apel</li>
      <li>Pisang</li>
      <li>Mangga</li>
    </ul>
  </li>
  <li>
    Sayuran
    <ul>
      <li>Bayam</li>
      <li>Kangkung</li>
      <li>Wortel</li>
    </ul>
  </li>
</ul>

Output:

• Buah-buahan
  • Apel
  • Pisang
  • Mangga
• Sayuran
  • Bayam
  • Kangkung
  • Wortel

Nested dengan Type Berbeda

Type bisa beda untuk nested list:

<ul type="disc">
  <li>
    Makanan
    <ul type="circle">
      <li>Nasi goreng</li>
      <li>Mie ayam</li>
      <li>Soto</li>
    </ul>
  </li>
  <li>
    Minuman
    <ul type="circle">
      <li>Es teh</li>
      <li>Kopi</li>
      <li>Jus jeruk</li>
    </ul>
  </li>
</ul>

Output:

• Makanan ◦ Nasi goreng ◦ Mie ayam ◦ Soto
• Minuman ◦ Es teh ◦ Kopi ◦ Jus jeruk

Unordered List vs Ordered List

Pilih <ul> kalau urutan item tidak masalah. Pilih <ol> kalau urutan item penting.

Contoh Penggunaan Praktis

Menu Navigasi

<nav>
  <ul>
    <li><a href="/">Beranda</a></li>
    <li><a href="/tentang">Tentang</a></li>
    <li><a href="/layanan">Layanan</a></li>
    <li><a href="/kontak">Kontak</a></li>
  </ul>
</nav>

Daftar Fitur

<ul>
  <li>Syntax highlighting</li>
  <li>Autocomplete</li>
  <li>Live preview</li>
  <li>Git integration</li>
</ul>

Checklist

<ul>
  <li>✅ Beli bahan masakan</li>
  <li>✅ Siapkan peralatan</li>
  <li>⬜ Masak nasi goreng</li>
  <li>⬜ Makan bersama</li>
</ul>

Best Practice Unordered List

• Gunakan <ul> untuk item yang tidak memerlukan urutan
• Gunakan <ol> untuk item yang urutannya penting (langkah, peringkat)
• Nested list maximal 2-3 level agar tetap mudah dibaca
• Kombinasikan dengan CSS untuk bullet yang lebih menarik

Ringkasan

• <ul> untuk unordered list (list tanpa urutan)
• Item pakai tag <li>
• Attribute type: disc (default), circle, square
• Nested list: tambah <ul> di dalam <li>
• Pilih <ul> kalau urutan tidak penting, <ol> kalau urutan penting

Langkah Selanjutnya

Kita sudah bahas unordered list. Lanjut ke description list <dl> di artikel berikutnya.