BAB 7 : LIST (DAFTAR) DALAM HTML
1. Pengertian List
List (daftar) dalam HTML digunakan untuk menampilkan sekumpulan data dalam bentuk:
- Daftar berurutan
- Daftar tidak berurutan
- Daftar deskripsi
List sangat sering digunakan dalam:
- Menu makanan
- Navigasi website
- Fitur produk
- Sidebar
2. Jenis-Jenis List di HTML
HTML memiliki 3 jenis list:
| Jenis | Tag |
|---|---|
| Ordered List | <ol> |
| Unordered List | <ul> |
| Description List | <dl> |
3. Ordered List (<ol>)
3.1 Pengertian
Digunakan untuk daftar yang berurutan (ada nomor).
3.2 Contoh
<ol>
<li>Bangun tidur</li>
<li>Sarapan</li>
<li>Berangkat sekolah</li>
</ol>3.3 Atribut Ordered List
Type angka/format:
<ol type="A">
<li>Item</li>
</ol>Pilihan:
1→ angka (default)A→ huruf besara→ huruf kecilI→ romawi besari→ romawi kecil
3.4 Studi Kasus (Langkah Tutorial)
<h2>Cara Membuat Akun</h2>
<ol>
<li>Buka website</li>
<li>Klik daftar</li>
<li>Isi data</li>
<li>Klik submit</li>
</ol>👉 Digunakan untuk step-by-step
4. Unordered List (<ul>)
4.1 Pengertian
Digunakan untuk daftar tanpa urutan (bullet).
4.2 Contoh
<ul>
<li>Nasi Goreng</li>
<li>Mie Ayam</li>
<li>Sate</li>
</ul>4.3 Atribut Bullet Style
<ul type="square">
<li>Item</li>
</ul>Jenis:
- disc (default)
- circle
- square
4.4 Studi Kasus (Menu Makanan)
<h2>Menu Restoran</h2>
<ul>
<li>Nasi Goreng</li>
<li>Ayam Bakar</li>
<li>Es Teh</li>
</ul>👉 Ini contoh real di website restoran
5. Description List (<dl>)
5.1 Pengertian
Digunakan untuk menjelaskan istilah.
5.2 Struktur
<dl>
<dt>HTML</dt>
<dd>Bahasa markup</dd>
</dl>5.3 Studi Kasus (Istilah IT)
<dl>
<dt>HTML</dt>
<dd>Bahasa untuk membuat website</dd>
<dt>CSS</dt>
<dd>Untuk desain tampilan</dd>
</dl>6. Nested List (List di dalam List)
6.1 Pengertian
List bisa dibuat bertingkat.
6.2 Contoh (Menu Kategori)
<ul>
<li>Makanan
<ul>
<li>Nasi Goreng</li>
<li>Mie Ayam</li>
</ul>
</li>
<li>Minuman
<ul>
<li>Es Teh</li>
<li>Jus</li>
</ul>
</li>
</ul>👉 Digunakan untuk:
- Menu kategori
- Sidebar
- Dropdown menu
7. Studi Kasus Utama (NAVIGASI WEBSITE)
Ini bagian paling penting 🔥
7.1 Navigasi Sederhana
<ul>
<li>Home</li>
<li>Profil</li>
<li>Kontak</li>
</ul>7.2 Navigasi dengan Link
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="profil.html">Profil</a></li>
<li><a href="kontak.html">Kontak</a></li>
</ul>👉 Ini struktur navbar website asli
7.3 Navigasi Dropdown (Dasar)
<ul>
<li>Produk
<ul>
<li><a href="#">Laptop</a></li>
<li><a href="#">HP</a></li>
</ul>
</li>
</ul>👉 Ini dasar dari:
- Dropdown menu
- E-commerce kategori
8. Contoh Program Lengkap (Menu + Navigasi)
<!DOCTYPE html>
<html>
<head>
<title>Menu Website</title>
</head>
<body>
<h1>Website Restoran</h1>
<h2>Navigasi</h2>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Kontak</a></li>
</ul>
<h2>Menu Makanan</h2>
<ul>
<li>Nasi Goreng</li>
<li>Ayam Bakar</li>
</ul>
<h2>Menu Minuman</h2>
<ul>
<li>Es Teh</li>
<li>Jus Jeruk</li>
</ul>
</body>
</html>9. Best Practice Industri
✔ Gunakan <ul> untuk navigasi
Karena tidak butuh urutan
✔ Gunakan <ol> untuk langkah
Misalnya:
- Tutorial
- Prosedur
✔ Gunakan nested list untuk menu kompleks
✔ Gabungkan dengan <a> untuk link
10. Kesalahan Umum Siswa
❌ Tidak menggunakan <li>
<ul>
Nasi Goreng
</ul>👉 Salah
❌ Salah memilih jenis list
👉 Menu → harusnya <ul>, bukan <ol>
❌ Struktur tidak rapi
11. Latihan Siswa
Latihan 1
Buat:
- 1 ordered list (kegiatan pagi)
Latihan 2
Buat:
- Menu makanan (unordered list)
Latihan 3
Buat:
- Navigasi website dengan link
12. Mini Project
🎯 Buat Halaman: “Website Restoran”
Isi:
- Navigasi (Home, Menu, Kontak)
- Menu makanan (list)
- Menu minuman (list)
- Minimal 1 nested list
13. Kesimpulan
List HTML digunakan untuk:
- Menampilkan data terstruktur
- Membuat menu & navigasi
- Membuat kategori
Tag utama:
<ul>, <ol>, <li>, <dl>