Unordered List (ul)

Unordered List (ul) 🔵

Unordered list adalah cara menampilkan daftar item yang tidak memiliki urutan tertentu — setiap item setara satu sama lain dan tidak ada yang harus didahulukan. Ditandai dengan bullet point sebagai penanda item.

Struktur Dasar

Sama seperti <ol>, unordered list menggunakan dua tag:

• <ul> — pembungkus keseluruhan daftar (unordered list)
• <li> — setiap item di dalam daftar (list item)

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
  <li>PHP</li>
  <li>Python</li>
</ul>

Hasilnya di browser:

• HTML
• CSS
• JavaScript
• PHP
• Python

Browser otomatis menambahkan bullet point — tidak perlu ditulis manual.

Jenis-Jenis Bullet dengan list-style-type

Secara default browser menggunakan lingkaran penuh (disc). Jenisnya bisa diubah via CSS:

<style>
  .disc   { list-style-type: disc; }     /* ● default */
  .circle { list-style-type: circle; }   /* ○ lingkaran kosong */
  .square { list-style-type: square; }   /* ■ kotak */
  .none   { list-style-type: none; }     /* tanpa bullet */
</style>

<!-- Disc (default) -->
<ul class="disc">
  <li>Item satu</li>
  <li>Item dua</li>
</ul>

<!-- Circle -->
<ul class="circle">
  <li>Item satu</li>
  <li>Item dua</li>
</ul>

<!-- Square -->
<ul class="square">
  <li>Item satu</li>
  <li>Item dua</li>
</ul>

<!-- Tanpa bullet -->
<ul class="none">
  <li>Item satu</li>
  <li>Item dua</li>
</ul>

Hasilnya:

disc       circle     square     none
● Item     ○ Item     ■ Item     Item
● Item     ○ Item     ■ Item     Item

Nested List — List Bertingkat

<ul> bisa bersarang di dalam <li> untuk membuat sub-daftar. Browser secara otomatis mengubah jenis bullet di setiap tingkatan:

<ul>
  <li>Front-end
    <ul>
      <li>HTML</li>
      <li>CSS
        <ul>
          <li>Flexbox</li>
          <li>Grid</li>
          <li>Animasi</li>
        </ul>
      </li>
      <li>JavaScript</li>
    </ul>
  </li>
  <li>Back-end
    <ul>
      <li>Node.js</li>
      <li>Python</li>
      <li>PHP</li>
    </ul>
  </li>
  <li>Database
    <ul>
      <li>MySQL</li>
      <li>MongoDB</li>
    </ul>
  </li>
</ul>

Hasilnya:

● Front-end
    ○ HTML
    ○ CSS
        ■ Flexbox
        ■ Grid
        ■ Animasi
    ○ JavaScript
● Back-end
    ○ Node.js
    ○ Python
    ○ PHP
● Database
    ○ MySQL
    ○ MongoDB

Perhatikan bullet berubah otomatis — disc → circle → square setiap tingkat lebih dalam.

Menghilangkan Bullet & Styling Kustom

Salah satu penggunaan paling umum <ul> adalah sebagai navigasi menu — bullet dihilangkan dan item ditata secara horizontal:

<style>
  nav ul {
    list-style: none;     /* hilangkan bullet */
    padding: 0;           /* hilangkan padding default */
    margin: 0;
    display: flex;        /* tata item secara horizontal */
    gap: 24px;
    background-color: #1e1e1e;
    padding: 14px 24px;
  }

  nav ul li a {
    color: white;
    text-decoration: none;
    font-size: 16px;
  }

  nav ul li a:hover {
    color: #4a9eed;
  }
</style>

<nav>
  <ul>
    <li><a href="#">Beranda</a></li>
    <li><a href="#">Tentang</a></li>
    <li><a href="#">Layanan</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Kontak</a></li>
  </ul>
</nav>

Hasilnya — navigasi horizontal tanpa bullet:

█████████████████████████████████████████
  Beranda   Tentang   Layanan   Blog   Kontak
█████████████████████████████████████████

Bullet Kustom dengan Gambar atau Emoji

Menggunakan gambar sebagai bullet via CSS:

<style>
  ul.kustom {
    list-style: none;
    padding: 0;
  }

  ul.kustom li {
    padding: 8px 0 8px 28px;
    position: relative;
  }

  ul.kustom li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    background-image: url("centang.png");
    background-size: contain;
  }
</style>

Menggunakan karakter / emoji sebagai bullet:

<style>
  ul.centang {
    list-style: none;
    padding: 0;
  }

  ul.centang li::before {
    content: "✓ ";
    color: #22c55e;
    font-weight: bold;
  }
</style>

<ul class="centang">
  <li>Belajar HTML dasar</li>
  <li>Memahami CSS styling</li>
  <li>Menguasai JavaScript</li>
</ul>

Hasilnya:

✓ Belajar HTML dasar
✓ Memahami CSS styling
✓ Menguasai JavaScript

Penggunaan Nyata <ul> di Web

1. Navigasi Menu:

<nav>
  <ul>
    <li><a href="/">Beranda</a></li>
    <li><a href="/produk">Produk</a></li>
    <li><a href="/kontak">Kontak</a></li>
  </ul>
</nav>

2. Daftar Fitur Produk:

<ul>
  <li>Pengiriman gratis ke seluruh Indonesia</li>
  <li>Garansi uang kembali 30 hari</li>
  <li>Dukungan pelanggan 24 jam</li>
  <li>Pembayaran aman dan terenkripsi</li>
</ul>

3. Daftar Tag / Kategori Blog:

<ul class="tags">
  <li><a href="#">HTML</a></li>
  <li><a href="#">CSS</a></li>
  <li><a href="#">JavaScript</a></li>
  <li><a href="#">Tutorial</a></li>
</ul>

4. Breadcrumb Navigasi:

<nav>
  <ul class="breadcrumb">
    <li><a href="/">Beranda</a></li>
    <li><a href="/blog">Blog</a></li>
    <li>Tutorial HTML</li>
  </ul>
</nav>

Perbedaan <ul> vs <ol>

Kesalahan Umum Pemula

<!-- SALAH — li di luar ul -->
<li>Item tanpa pembungkus</li>

<!-- SALAH — elemen non-li langsung di dalam ul -->
<ul>
  <p>Ini salah</p>
  <li>Item benar</li>
</ul>

<!-- SALAH — pakai ul hanya untuk indent teks -->
<ul>
  <li>Teks ini hanya ingin masuk ke dalam</li>
</ul>
<!-- Gunakan CSS padding/margin untuk indent, bukan ul -->

<!-- BENAR -->
<ul>
  <li>Item pertama</li>
  <li>Item kedua</li>
  <li>Item ketiga</li>
</ul>

Reset Style Default Browser

Setiap browser menambahkan padding dan margin default pada <ul>. Untuk tampilan yang konsisten, selalu reset dulu:

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

Lalu tambahkan style sesuai kebutuhan dari nol — ini memberikan kontrol penuh atas tampilan list.

Ringkasan

💡 Tips: <ul> adalah salah satu elemen HTML yang paling sering digunakan di luar konteks "daftar" biasa — navigasi menu, tag artikel, breadcrumb, dropdown, semua umumnya dibangun dari <ul> dan <li>. Kuasai cara styling-nya dengan CSS karena ini akan sangat sering dipakai dalam proyek nyata. 🚀