Daftar itu ada di mana-mana — belanja, resep, langkah tutorial, menu restoran. HTML punya tiga jenis list utama yang bisa Anda pakai.

1. Unordered List — Daftar Bullet

Kalau urutan item gak penting, pakai ini. Misalnya daftar belanja, fitur website, atau menu.

<ul>
    <li>Apel</li>
    <li>Mangga</li>
    <li>Pisang</li>
</ul>

Hasilnya:

• Apel
• Mangga
• Pisang

<ul> = unordered list, <li> = list item. Bullet-nya default-nya titik, tapi bisa diganti pakai CSS.

---

2. Ordered List — Daftar Angka

Kalau urutan penting, pakai ini. Misalnya langkah tutorial, ranking, atau instruksi.

<ol>
    <li>Pertama</li>
    <li>Kedua</li>
    <li>Ketiga</li>
</ol>

Hasilnya:

1. Pertama
2. Kedua
3. Ketiga

Ganti Tipe Penomoran

<!-- Huruf kecil -->
<ol type="a">
    <li>Item a</li>
    <li>Item b</li>
</ol>

<!-- Huruf besar -->
<ol type="A">
    <li>Item A</li>
    <li>Item B</li>
</ol>

<!-- Angka romawi -->
<ol type="i">
    <li>Item i</li>
    <li>Item ii</li>
</ol>

Mulai dari Nomor Tertentu

<ol start="5">
    <li>Item 5</li>
    <li>Item 6</li>
    <li>Item 7</li>
</ol>

Urutan Terbalik

<ol reversed>
    <li>Item 3</li>
    <li>Item 2</li>
    <li>Item 1</li>
</ol>

---

3. Nested List — Daftar Bersarang

List bisa di-ding di dalam list lain. Kayak hierarki.

<ul>
    <li>Buah
        <ul>
            <li>Apel</li>
            <li>Mangga</li>
            <li>Pisang</li>
        </ul>
    </li>
    <li>Sayur
        <ul>
            <li>Bayam</li>
            <li>Kangkung</li>
        </ul>
    </li>
</ul>

Anda juga bisa campur:

<ul>
    <li>Buah
        <ol>
            <li>Apel (merah)</li>
            <li>Mangga (kuning)</li>
        </ol>
    </li>
    <li>Sayur
        <ol>
            <li>Bayam (hijau)</li>
            <li>Wortel (orange)</li>
        </ol>
    </li>
</ul>

---

4. Description List — Daftar Label-Deskripsi

Cocok buat glossary, FAQ, atau metadata.

<dl>
    <dt>HTML</dt>
    <dd>HyperText Markup Language — bahasa markup untuk membuat halaman web.</dd>
    
    <dt>CSS</dt>
    <dd>Cascading Style Sheets — bahasa untuk styling halaman web.</dd>
    
    <dt>JavaScript</dt>
    <dd>Bahasa pemrograman untuk membuat website interaktif.</dd>
</dl>

• <dl> = description list
• <dt> = term (label)
• <dd> = detail (deskripsi)

---

5. Custom Bullet — Ganti Tampilan List

Default bullet (•) bisa diganti pakai CSS:

<style>
    .emoji-list li::before {
        content: "🍎 ";
    }
    
    .icon-list li::before {
        content: "✓ ";
        color: green;
    }
</style>

<ul class="emoji-list">
    <li>Apel</li>
    <li>Mangga</li>
</ul>

Bisa juga pakai emoji, icon, atau gambar sebagai bullet.

---

6. Horizontal List — Buat Menu

<style>
    .menu {
        list-style: none;
        padding: 0;
        display: flex;
        gap: 20px;
    }
    
    .menu a {
        text-decoration: none;
        color: #333;
    }
</style>

<ul class="menu">
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/blog">Blog</a></li>
    <li><a href="/contact">Contact</a></li>
</ul>

List yang tadinya vertikal jadi horizontal — cocok buat navigasi.

---

7. Checklist — To-Do List

<style>
    .checklist {
        list-style: none;
        padding-left: 0;
    }
    
    .checklist li::before {
        content: "☐ ";
    }
    
    .checklist li.done::before {
        content: "☑ ";
        color: green;
    }
</style>

<ul class="checklist">
    <li class="done">Belajar HTML</li>
    <li class="done">Belajar CSS</li>
    <li>Belajar JavaScript</li>
    <li>Belajar React</li>
</ul>

---

8. Contoh Lengkap

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>List dalam HTML</title>
</head>
<body>
    <h1>Contoh List</h1>
    
    <!-- Unordered -->
    <h2>Daftar Belanja</h2>
    <ul>
        <li>Apel</li>
        <li>Mangga</li>
        <li>Pisang</li>
    </ul>
    
    <!-- Ordered -->
    <h2>Langkah Memasak</h2>
    <ol>
        <li>Persiapkan bahan</li>
        <li>Potong sayuran</li>
        <li>Masak dengan api sedang</li>
        <li>Sajikan</li>
    </ol>
    
    <!-- Nested -->
    <h2>Menu Restoran</h2>
    <ul>
        <li>Makanan
            <ul>
                <li>Nasi Goreng</li>
                <li>Mie Ayam</li>
            </ul>
        </li>
        <li>Minuman
            <ul>
                <li>Es Teh</li>
                <li>Jus Jeruk</li>
            </ul>
        </li>
    </ul>
    
    <!-- Description -->
    <h2>Glossary</h2>
    <dl>
        <dt>HTML</dt>
        <dd>HyperText Markup Language</dd>
        <dt>CSS</dt>
        <dd>Cascading Style Sheets</dd>
    </dl>
</body>
</html>

---

9. Recap

Elemen	Fungsi	Kapan Pakai
<ul>	Unordered list	Urutan gak penting
<ol>	Ordered list	Urutan penting
<li>	List item	Item dalam list
<dl>	Description list	Label + deskripsi
<dt>	Term	Label
<dd>	Detail	Deskripsi

Atribut <ol>

Atribut	Fungsi
type	Tipe penomoran (a, A, i, I)
start	Nomor awal
reversed	Urutan terbalik

---

Penutup

List itu elemen fundamental yang dipake di mana-mana. Pahami kapan pakai unordered, ordered, dan description list — maka konten Anda jadi lebih terstruktur.

Di artikel selanjutnya, kita bahas Tabel — cara bikin tabel, menggabungkan cell, dan styling.

---