Dalam HTML, elemen <ul> (unordered list) digunakan untuk membuat daftar yang tidak berurutan, yang berarti item dalam daftar tidak memiliki urutan tertentu. Setiap item dalam daftar didefinisikan menggunakan <li> (list item). Biasanya, daftar tidak berurutan ditampilkan dalam bentuk bullet points (•) secara default, tetapi tampilannya bisa disesuaikan dengan CSS agar menggunakan simbol lain seperti kotak (■) atau lingkaran (○).

Daftar tidak berurutan (<ul>) sering digunakan untuk menampilkan daftar menu navigasi, daftar fitur produk, daftar tugas, atau elemen lain yang tidak perlu disusun dalam urutan tertentu. Jika Anda membutuhkan daftar yang memiliki urutan tertentu (seperti langkah-langkah atau peringkat), sebaiknya gunakan <ol> (ordered list) sebagai gantinya.

Contoh Penggunaan <ul> dan <li>

1. Daftar Sederhana

<ul>
  <li>Apel</li>
  <li>Pisang</li>
  <li>Jeruk</li>
  <li>Semangka</li>
</ul>

Penjelasan: Ini adalah contoh daftar buah-buahan yang ditampilkan dengan bullet points secara default.

2. Daftar Menu Navigasi

<ul>
  <li><a href="index.html">Beranda</a></li>
  <li><a href="tentang.html">Tentang Kami</a></li>
  <li><a href="layanan.html">Layanan</a></li>
  <li><a href="kontak.html">Kontak</a></li>
</ul>

Penjelasan: <ul> digunakan untuk membuat menu navigasi dengan tautan di dalam <li>.

3. Daftar Tugas (Checklist)

<ul>
  <li>✔ Mengerjakan tugas sekolah</li>
  <li>✔ Membaca buku</li>
  <li>❌ Membersihkan kamar</li>
  <li>❌ Berolahraga</li>
</ul>

Penjelasan: Setiap item daftar bisa memiliki simbol berbeda (✔ untuk selesai, ❌ untuk belum selesai).

4. Daftar Bersarang (Nested List)

<ul>
  <li>Buah-buahan
    <ul>
      <li>Apel</li>
      <li>Pisang</li>
      <li>Jeruk</li>
    </ul>
  </li>
  <li>Sayuran
    <ul>
      <li>Wortel</li>
      <li>Bayam</li>
      <li>Tomat</li>
    </ul>
  </li>
</ul>

Penjelasan: Ini adalah contoh daftar bersarang (nested list), di mana ada subdaftar di dalam item utama.

5. Daftar Fitur Produk

<ul>
  <li>✅ Layar Full HD</li>
  <li>✅ Baterai tahan lama</li>
  <li>✅ Kamera 108MP</li>
  <li>✅ Prosesor terbaru</li>
</ul>

Penjelasan: Simbol bisa digunakan untuk menyoroti fitur yang dimiliki produk tertentu.

Dengan memahami penggunaan <ul> dan <li>, kita bisa menyajikan informasi dalam bentuk daftar yang lebih terstruktur dan mudah dibaca.