HTML Dasar #8 - Membuat Daftar: Ordered List (ol), Unordered List (ul), List Item (li)

byFerdian Rahabista -
0

Pernahkah kamu membuat daftar belanjaan, daftar tugas sekolah, atau langkah-langkah memasak? Di HTML, kita bisa membuat daftar dengan rapi menggunakan tag list. Ada dua jenis daftar utama: berurutan (ordered) dan tidak berurutan (unordered).

Dua Jenis Daftar di HTML

Jenis Tag Simbol Kapan Pakai?
Ordered List (Berurutan) <ol> 1, 2, 3 atau A, B, C Langkah-langkah, ranking, resep
Unordered List (Tidak Berurutan) <ul> • (bullet), ○, ▪ Daftar belanja, fitur produk, catatan

Kedua jenis daftar menggunakan tag yang sama untuk itemnya yaitu <li> (list item).

Analogi Sederhana:
Ordered List (ol) seperti resep masakan — urutan langkahnya penting, tidak bisa dibolak-balik.
Unordered List (ul) seperti daftar belanjaan — kamu bisa beli telur dulu atau susu dulu, sama saja.

Struktur Dasar Daftar

Ordered List (Daftar Bernomor)

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

Hasilnya:

  1. Item pertama
  2. Item kedua
  3. Item ketiga

Unordered List (Daftar dengan Bullet)

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

Hasilnya:

  • Pisang
  • Apel
  • Jeruk

Mengubah Jenis Penomoran (Atribut type)

Untuk <ol>, kita bisa mengubah gaya penomorannya:

Atribut type Hasil Contoh
type="1" Angka (default) 1, 2, 3
type="A" Huruf besar A, B, C
type="a" Huruf kecil a, b, c
type="I" Romawi besar I, II, III
type="i" Romawi kecil i, ii, iii

Contoh penggunaan:

type="A"
  1. Satu
  2. Dua
  3. Tiga
type="i"
  1. Satu
  2. Dua
  3. Tiga

Mengubah Gaya Bullet (CSS list-style-type)

Untuk <ul>, kita bisa mengubah bentuk bullet dengan CSS:

circle (lingkaran kosong)
  • Item 1
  • Item 2
square (kotak)
  • Item 1
  • Item 2
none (tanpa bullet)
  • Item 1
  • Item 2

Studi Kasus: Halaman Resep Masakan

Buat file resep-nasi-goreng.html dan praktikkan kedua jenis daftar:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Resep Nasi Goreng Spesial</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 700px;
            margin: 0 auto;
            padding: 20px;
            background: #fef9e6;
        }
        .card {
            background: white;
            padding: 25px;
            border-radius: 20px;
            box-shadow: 0 4px 10px rgba(0,0,0,0.1);
        }
        h1 {
            color: #d35400;
            border-bottom: 3px solid #d35400;
            padding-bottom: 10px;
        }
        h2 {
            color: #e67e22;
            margin-top: 25px;
        }
        .waktu {
            background: #fdebd0;
            padding: 10px;
            border-radius: 10px;
            margin: 20px 0;
        }
    </style>
</head>
<body>

    <div class="card">
        <h1>Resep Nasi Goreng Spesial</h1>
        
        <div class="waktu">
            Waktu persiapan: 15 menit | Waktu memasak: 10 menit | Porsi: 2 orang
        </div>

        <h2>Bahan-bahan (Unordered List)</h2>
        <ul>
            <li>2 piring nasi putih (sebaiknya nasi semalam)</li>
            <li>2 butir telur</li>
            <li>3 siung bawang putih (cincang halus)</li>
            <li>5 siung bawang merah (iris tipis)</li>
            <li>3 sdm kecap manis</li>
            <li>1 sdm saus tiram</li>
            <li>Garam dan merica secukupnya</li>
            <li>Minyak goreng secukupnya</li>
        </ul>

        <h2>Langkah-langkah (Ordered List)</h2>
        <ol>
            <li>Panaskan minyak di wajan dengan api sedang.</li>
            <li>Tumis bawang putih dan bawang merah hingga harum.</li>
            <li>Masukkan telur, orak-arik hingga matang.</li>
            <li>Tambahkan nasi putih, aduk hingga merata.</li>
            <li>Masukkan kecap manis, saus tiram, garam, dan merica.</li>
            <li>Aduk terus selama 3-5 menit hingga bumbu meresap.</li>
            <li>Angkat dan sajikan di piring.</li>
        </ol>

        <h2>Tips Sukses</h2>
        <ul>
            <li>Gunakan nasi yang sudah dingin agar tidak lengket</li>
            <li>Api harus besar agar nasi goreng wangi</li>
            <li>Bisa tambahkan ayam, udang, atau sosis sesuai selera</li>
        </ul>
    </div>

</body>
</html>

Daftar Bersarang (Nested List)

Kita bisa membuat daftar di dalam daftar untuk struktur yang lebih kompleks:

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

Hasilnya:

  • Buah-buahan
    • Apel
    • Pisang
    • Jeruk
  • Sayuran
    • Wortel
    • Brokoli

Memulai Penomoran dari Angka Tertentu (Atribut start)

Untuk <ol>, kita bisa memulai penomoran dari angka tertentu:

<ol start="5">
    <li>Lima</li>
    <li>Enam</li>
    <li>Tujuh</li>
</ol>

Hasilnya:

  1. Lima
  2. Enam
  3. Tujuh

Atribut reversed (Penomoran Terbalik)

Untuk membuat daftar bernomor dari besar ke kecil:

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

Hasilnya:

  1. Pertama
  2. Kedua
  3. Ketiga

Studi Kasus: Daftar Tugas dengan Prioritas

<!DOCTYPE html>
<html>
<head>
    <title>To-Do List</title>
    <style>
        body { font-family: Arial; max-width: 500px; margin: auto; padding: 20px; }
        .urgent { color: red; font-weight: bold; }
        .normal { color: green; }
    </style>
</head>
<body>

    <h1>To-Do List Hari Ini</h1>
    
    <h2>Prioritas Tinggi (Urgent)</h2>
    <ul>
        <li class="urgent">Selesaikan tugas HTML Dasar #8</li>
        <li class="urgent">Kirim email ke klien sebelum jam 12</li>
    </ul>

    <h2>Prioritas Sedang (Normal)</h2>
    <ul>
        <li class="normal">Belanja bahan makanan</li>
        <li class="normal">Olahraga 30 menit</li>
    </ul>

    <h2>Urutan Pekerjaan (Wajib Berurutan!)</h2>
    <ol>
        <li>Buka laptop dan buka VS Code</li>
        <li>Buat file HTML baru</li>
        <li>Tulis kode sesuai materi</li>
        <li>Simpan dan lihat hasil di browser</li>
        <li>Push ke GitHub</li>
    </ol>

</body>
</html>

Daftar Description List (<dl>) - Bonus

Selain ol dan ul, ada jenis daftar ketiga: Description List untuk istilah dan definisinya.

<dl>
    <dt>HTML</dt>
    <dd>HyperText Markup Language, bahasa untuk membuat struktur website.</dd>
    
    <dt>CSS</dt>
    <dd>Cascading Style Sheets, bahasa untuk mempercantik tampilan website.</dd>
    
    <dt>JavaScript</dt>
    <dd>Bahasa pemrograman untuk membuat website interaktif.</dd>
</dl>

Hasilnya:

HTML
HyperText Markup Language, bahasa untuk membuat struktur website.
CSS
Cascading Style Sheets, bahasa untuk mempercantik tampilan website.
JavaScript
Bahasa pemrograman untuk membuat website interaktif.

Kesalahan Umum Pemula

  • Lupa menutup tag </li> → Tidak fatal, tapi sebaiknya tetap ditutup agar rapi
  • Menulis teks langsung di dalam <ol> atau <ul> → Harus dibungkus <li> dulu
  • Mencampur ol dan ul tanpa nesting yang benar → Pastikan struktur bersarang rapi
  • Menggunakan ol untuk daftar yang tidak butuh urutan → Pakai ul saja lebih tepat

Latihan Singkat

  1. Buat file HTML baru dengan judul "Rencana Liburan Sekolah"
  2. Buat unordered list (ul) berisi 5 tempat wisata yang ingin kamu kunjungi
  3. Buat ordered list (ol) berisi langkah-langkah persiapan liburan (minimal 5 langkah)
  4. Buat nested list (daftar bersarang) untuk "Peralatan yang Dibawa":
    • Pakaian (dengan sub-item: baju, celana, jaket)
    • Perlengkapan mandi (dengan sub-item: sabun, sikat gigi)
  5. Simpan dan buka di browser

Intisari Hari Ini

  • <ol> = daftar bernomor (ordered list) → untuk urutan yang penting
  • <ul> = daftar dengan bullet (unordered list) → untuk daftar biasa
  • <li> = item daftar (list item) → dipakai di dalam ol dan ul
  • Bisa membuat daftar bersarang (nested list) untuk struktur kompleks
  • type untuk mengubah gaya penomoran, start untuk angka awal, reversed untuk urutan terbalik
Tantangan Akhir Pekan: Buat halaman "My Dream Vacation" yang berisi:
  • Daftar negara yang ingin dikunjungi (unordered list, minimal 5 negara)
  • Untuk setiap negara, buat nested list berisi 3 tempat wisata di negara tersebut
  • Buat itinerary (rencana perjalanan) 5 hari menggunakan ordered list
  • Tambahkan description list untuk menjelaskan 3 istilah penting terkait perjalanan (misal: Visa, Passport, Currency)
Bagikan hasilnya ke teman-temanmu!

Artikel Sebelumnya: HTML Dasar #7 - Menambahkan Gambar (img) dengan src, alt, width, height
Artikel Selanjutnya: HTML Dasar #9 - Membuat Tabel Sederhana: table, tr, td, th

Tags

Anda mungkin menyukai postingan ini

Lebih baru Lebih lama

نموذج الاتصال