Bikin daftar belanjaan, langkah-langkah, atau definisi? HTML punya elemen list yang pas buat itu! Bikin informasimu makin gampang dibaca.
16m bacaanKuis WajibMicro Badge Lesson
Sekarang kita bakal belajar cara bikin daftar atau list di HTML. Ini berguna banget buat nampilin informasi yang berurutan, gak berurutan, atau bahkan daftar definisi.
Yuk, Bikin List yang Kece! Rapi dan Gampang Dibaca
Sering kan kita nemu informasi yang paling enak disajiin dalam bentuk daftar? Misalnya, daftar belanjaan, langkah-langkah resep masakan, fitur-fitur produk, atau bahkan daftar istilah penting. Nah, HTML ngerti banget kebutuhan ini dan nyediain beberapa jenis elemen buat bikin daftar yang rapi dan terstruktur.
Ada tiga jenis daftar utama yang bisa kita buat di HTML:
Unordered List (Daftar Tak Berurut): Buat daftar yang urutannya gak terlalu penting.
Ordered List (Daftar Berurut): Buat daftar yang urutannya penting, kayak langkah-langkah.
Description List (Daftar Deskripsi): Buat daftar istilah dan definisinya.
Yuk, kita bedah satu-satu!
1. Unordered List (<ul>): Daftar Santai Tanpa Nomor
Unordered List (daftar tak berurut) dipakai kalau urutan item dalam daftarmu itu gak krusial. Misalnya, daftar topping pizza favoritmu, atau daftar buah-buahan kesukaan. Gak masalah kan kalau apel disebut sebelum pisang, atau sebaliknya?
Tag Pembungkus: Kita pakai tag <ul> (singkatan dari Unordered List) buat ngebungkus keseluruhan daftarnya.
Tag Item Daftar: Setiap item di dalam daftar dibungkus pake tag <li> (singkatan dari List Item).
Secara default, browser biasanya nampilin item di unordered list pake bullet points (bulatan kecil) di depannya.
Hasilnya, setiap item bakal punya bulatan di depannya. Gampang kan?
2. Ordered List (<ol>): Daftar Rapi dengan Urutan
Kebalikannya dari <ul>, Ordered List (daftar berurut) dipakai kalau urutan item dalam daftarmu itu penting banget. Contoh paling umum ya langkah-langkah dalam resep masakan, instruksi perakitan barang, atau ranking juara.
Tag Pembungkus: Kita pakai tag <ol> (singkatan dari Ordered List).
Tag Item Daftar: Sama kayak <ul>, setiap itemnya dibungkus pake tag <li>.
Secara default, browser bakal nampilin item di ordered list pake penomoran (angka 1, 2, 3, ...) di depannya.
Contoh Ordered List:
html
<h2>Cara Membuat Kopi Susu Enak:</h2><ol> <li>Siapkan gelas dan satu sachet kopi instan.</li> <li>Masukkan kopi ke dalam gelas.</li> <li>Tambahkan gula sesuai selera (opsional).</li> <li>Tuangkan air panas secukupnya, aduk rata.</li> <li>Tambahkan susu kental manis atau susu cair.</li> <li>Aduk kembali dan kopi susu siap dinikmati!</li></ol><h2>Ranking Buku Terbaik Versi Saya:</h2><ol> <li>The Bookshop</li> <li>On Air</li> <li>Careless People</li></ol>
Otomatis deh itemnya dikasih nomor urut.
Atribut Tambahan buat <ol> (Opsional):
Kamu bisa ngatur tampilan penomoran di <ol> pake beberapa atribut:
type: Buat ngubah jenis penanda urutan. Nilainya bisa:
start: Buat nentuin nomor awal urutan (harus angka).
html
<ol type="1" start="5"> <li>Item ini akan jadi nomor 5</li> <li>Item ini akan jadi nomor 6</li></ol>
reversed: Atribut boolean (cukup ditulis aja) buat bikin urutan nomornya jadi kebalik (dari besar ke kecil).
html
<ol reversed> <li>Item ini akan punya nomor paling besar</li> <li>Item ini nomornya lebih kecil</li> <li>Item ini nomornya paling kecil (misal, nomor 1 jika ada 3 item)</li></ol><ol start
Meskipun atribut ini ada, seringkali untuk kustomisasi tampilan list yang lebih kompleks, orang lebih milih pake CSS.
3. Description List (<dl>, <dt>, <dd>): Daftar Istilah dan Penjelasannya
Jenis daftar yang ketiga ini agak beda. Description List (atau Definition List) dipakai buat nampilin pasangan istilah dan definisinya, atau pasangan nama dan nilai. Bayangin kayak kamus mini atau daftar spesifikasi produk.
Description list ini melibatkan tiga tag:
<dl> (Description List): Tag pembungkus utama keseluruhan daftar deskripsi.
<dt> (Description Term / Definition Term): Tag buat nulis istilah, nama, atau kata kunci yang mau dijelasin.
<dd> (Description Details / Definition Description): Tag buat nulis penjelasan, definisi, atau nilai dari istilah yang ada di <dt> sebelumnya.
Satu <dt> bisa punya beberapa <dd> terkait, atau beberapa <dt> bisa punya satu <dd> yang sama.
Contoh Description List:
html
<h2>Istilah Populer di Dunia Kopi:</h2><dl> <dt>Espresso</dt> <dd>Minuman kopi pekat yang dibuat dengan mengekstraksi biji kopi menggunakan air panas bertekanan tinggi.</dd> <dd>Dasar dari banyak minuman kopi lainnya seperti latte dan cappuccino.</dd> <dt>Latte</dt> <dd>Minuman kopi yang terbuat dari espresso dan susu steamed, dengan lapisan tipis busa susu di atasnya.</dd> <dt>Americano</dt> <dd>Minuman kopi yang dibuat dengan menambahkan air panas ke dalam espresso, menghasilkan rasa yang mirip kopi hitam biasa tapi dengan intensitas espresso.</dd></dl><h2>Spesifikasi Laptop Gaming XZ100:</h2><dl> <dt>Prosesor</dt> <dd>Intel Core i9 Generasi Terbaru</dd> <dt>RAM</dt> <dd>32GB DDR5</dd> <dt>Penyimpanan</dt> <dd>1TB NVMe SSD</dd> <dt>Kartu Grafis</dt> <dd>NVIDIA GeForce RTX Seri 40</dd></dl>
Browser biasanya akan ngasih sedikit indentasi pada elemen <dd> biar keliatan beda dari <dt>-nya.
Nesting List: Daftar di Dalam Daftar!
Sama kayak elemen HTML lainnya, kita juga bisa bikin nested list alias daftar di dalam daftar. Ini berguna banget kalau kita punya sub-poin di dalam salah satu item daftar kita.
Kamu bisa nge-nest <ul> di dalam <li> dari <ul> atau <ol> lain, atau sebaliknya.
Contoh Nested List:
html
<h2>Kurikulum Belajar Web Development:</h2><ol> <li> HTML Dasar <ul> <li>Struktur Dokumen</li> <li>Elemen dan Tag</li> <li>List, Link, dan Gambar</li> </ul> </li> <li> CSS Dasar <ul> <li>Selector</li> <li>Box Model</li> <li>Layouting (Flexbox & Grid)</li> </ul> </li> <li> JavaScript Dasar <ul> <li>Variabel dan Tipe Data</li> <li>Fungsi</li> <li>DOM Manipulation</li> </ul> </li></ol>
Browser biasanya bakal otomatis ngubah style penanda (bullet atau nomor) buat nested list biar keliatan bedanya.
Nah, itu dia cara bikin berbagai macam daftar di HTML. Dengan <ul>, <ol>, dan <dl>, kamu bisa nyajiin informasi yang terstruktur dengan lebih efektif dan mudah dibaca. Jangan ragu buat pake list kapan pun kamu ngerasa informasinya lebih enak diliat dalam bentuk poin-poin.
Selanjutnya, kita bakal belajar salah satu fitur paling ikonik dari web: cara membuat Link (Tautan)! Ini yang bikin web jadi "hypertext". Seru kan?
Checkpoint KuisTarget: 70%
Kuis List di HTML
Kuis ini wajib untuk sertifikat. Kamu tetap bisa lanjut ke pelajaran berikutnya dan mengerjakannya nanti.
