List HTML: Cara Membuat Daftar Terstruktur dengan Tag ol, ul, dan li
List HTML adalah mekanisme di HTML untuk membuat daftar terstruktur menggunakan tag khusus, bukan tanda strip atau angka yang diketik manual. Dengan struktur ini, browser memahami bahwa sekumpulan baris adalah satu kelompok data yang saling terkait. Mesin pencari dan screen reader juga mengenali pola tersebut sebagai daftar. Karena itu, penggunaan list HTML sangat penting dalam halaman tutorial, dokumentasi, menu, ringkasan poin, dan langkah kerja.
Di materi ini kita bahas dari paling dasar: konsep daftar di HTML, arti setiap tag, aturan penempatan, variasi jenis daftar, lalu contoh praktik dan studi kasus supaya bisa langsung diterapkan.
Konsep Dasar List HTML dalam Struktur Halaman
Dalam dokumen web, tidak semua informasi cocok ditulis sebagai paragraf panjang. Banyak data lebih jelas jika disusun dalam bentuk poin. Di sinilah struktur daftar dipakai. List HTML memberi “wadah” dan “item” sehingga hubungan antar baris menjadi eksplisit.
Keuntungan memakai struktur daftar:
- lebih mudah dipindai pembaca
- cocok untuk langkah bertahap
- rapi untuk poin fitur
- terbaca jelas oleh mesin pencari
- membantu aksesibilitas navigasi
Tanpa tag daftar, kumpulan poin hanya dianggap teks biasa.
Tag Utama Penyusun List HTML
Struktur daftar dibangun oleh tiga tag inti:
<ol>sebagai wadah daftar berurutan<ul>sebagai wadah daftar tidak berurutan<li>sebagai item di dalamnya
Pola dasarnya selalu sama: wadah → item → item → item.
Contoh pola:
<ul> <li>Item</li> <li>Item</li> </ul>
List HTML dengan Ordered List untuk Urutan Langkah
Ordered list dipakai saat urutan punya arti. Misalnya prosedur, resep, atau tahapan kerja. Browser otomatis memberi nomor sehingga kamu tidak perlu mengetik angka sendiri.
Contoh langkah kerja:
<ol> <li>Buka Visual Studio Code</li> <li>Buat file index.html</li> <li>Tulis struktur dasar</li> <li>Simpan file</li> </ol>
Jika satu langkah dihapus, nomor menyesuaikan otomatis. Ini keunggulan struktur daftar dibanding penomoran manual.
Pengaturan Nomor Awal
Nomor tidak harus mulai dari satu.
<ol start="4"> <li>Tahap lanjutan</li> <li>Tahap akhir</li> </ol>
Jenis Penomoran Alternatif
Bisa diubah ke huruf atau romawi.
<ol type="A">
Pilihan umum: 1, A, a, I, i.
List HTML dengan Unordered List untuk Poin Bebas
Unordered list dipakai saat urutan tidak penting. Biasanya tampil dengan bullet. Cocok untuk daftar fitur, karakteristik, atau komponen.
Contoh poin kemampuan:
<ul> <li>Mudah dibaca</li> <li>Struktur jelas</li> <li>Ramah SEO</li> </ul>
Gunakan jenis ini saat posisi item tidak memengaruhi makna.
Peran Tag li sebagai Item Daftar
Tag li berarti list item. Semua baris isi daftar harus dibungkus li. Tag ini tidak boleh berdiri di luar wadah daftar.
Contoh valid:
<ol> <li>Langkah</li> </ol>
Contoh tidak valid:
<li>Langkah</li>
Editor modern biasanya menandai kesalahan ini.
Struktur Bersarang pada List HTML (Nested List)
Daftar bisa dibuat bertingkat dengan menaruh daftar kedua di dalam item pertama. Ini disebut nested list. Berguna untuk membuat outline atau kategori bertingkat.
Contoh struktur bertingkat:
<ul>
<li>Bahasa Web
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</li>
<li>Database</li>
</ul>
Nested list sering dipakai di:
- outline materi
- menu navigasi
- struktur modul belajar
Description List untuk Istilah dan Penjelasan
Ada satu jenis daftar khusus untuk pasangan istilah dan arti. Struktur ini berbeda dari bullet dan nomor.
Tag yang dipakai:
- dl sebagai wadah
- dt sebagai istilah
- dd sebagai penjelasan
Contoh:
<dl> <dt>ol</dt> <dd>wadah daftar berurutan</dd> <dt>li</dt> <dd>item di dalam daftar</dd> </dl>
Cocok untuk glosarium dan daftar definisi.
Praktik Lengkap: Menggabungkan Beberapa Jenis Daftar
Latihan berikut menggabungkan beberapa bentuk daftar dalam satu halaman.
<!DOCTYPE html> <html> <head> <title>Latihan Struktur Daftar</title> </head> <body> <h2>Tahapan Belajar</h2> <ol> <li>Dasar</li> <li>Latihan</li> <li>Proyek kecil</li> </ol> <h2>Tools</h2> <ul> <li>Code editor</li> <li>Browser</li> </ul> <h2>Istilah</h2> <dl> <dt>ul</dt> <dd>daftar bullet</dd> </dl> </body> </html>
Coba ubah jumlah item dan lihat bagaimana struktur tetap konsisten.
Studi Kasus: Mengubah Daftar Manual Menjadi Struktur Tag
Daftar manual:
1. Install 2. Setup 3. Run
Versi terstruktur:
<ol> <li>Install</li> <li>Setup</li> <li>Run</li> </ol>
Sekarang urutan dikenali sebagai data terstruktur, bukan teks biasa.
Kesalahan Umum Saat Membuat Struktur Daftar
Kesalahan yang sering terjadi:
- mengetik bullet manual
- item di luar wadah
- salah pilih jenis daftar
- tidak memakai nested saat perlu level
- mencampur paragraf dan item tanpa struktur
Memakai tag yang tepat membuat dokumen lebih kuat secara teknis.
Referensi Teknis Elemen Daftar
Dokumentasi resmi elemen daftar tersedia di MDN Web Docs: https://developer.mozilla.org/en-US/docs/Web/HTML sebagai rujukan teknis lanjutan.
Lanjutan Seri HTML Dasar
Setelah memahami struktur daftar, materi berikutnya membahas pembuatan tautan menggunakan tag link. Pastikan juga kamu sudah memahami <a href=”/heading-html”>struktur heading</a> supaya kerangka dan poin daftar saling mendukung dalam satu halaman. Berikutnya kita masuk ke hyperlink dan anchor tag secara praktik.
