HTML lists itu ibarat daftar belanjaan kamu—rapi, terstruktur, dan gampang dibaca! Dalam HTML, ada tiga jenis list yang bisa kamu pakai: Unordered List, Ordered List, dan Description List. Penasaran gimana cara bikinnya? Gas, kita bahas satu per satu!
1. Unordered HTML List (<ul>)
Unordered list alias daftar tanpa urutan cocok buat nge-list item yang gak perlu nomor atau urutan tertentu. Biasanya ditandai dengan bullet points (titik, lingkaran, atau kotak).
Cara Pakai <ul>
Cukup pakai <ul> buat bungkus list, lalu <li> buat itemnya:
<ul>
<li>Ayam Geprek</li>
<li>Es Teh Manis</li>
<li>Nasi Uduk</li>
</ul>Hasilnya bakal keliatan seperti ini:
Kamu juga bisa ngubah style bullet-nya pakai CSS:
ul {
list-style-type: square; /* Bisa diganti circle atau none */
}Kode lebih lengkapnya:
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: square; /* Bisa diganti circle atau none */
}
</style>
</head>
<body>
<ul>
<li>Ayam Geprek</li>
<li>Es Teh Manis</li>
<li>Nasi Uduk</li>
</ul>
</body>
</html>Hasilnya:
2. Ordered HTML List (<ol>)
Kalo daftar kamu butuh urutan yang jelas, misalnya langkah-langkah masak Indomie, pakai Ordered List (<ol>).
Cara Pakai <ol>
<ol>
<li>Rebus air sampai mendidih</li>
<li>Masukkan mie dan tunggu 3 menit</li>
<li>Tiriskan, tambahin bumbu, aduk rata</li>
<li>Siap disantap!</li>
</ol>Outputnya:
Bisa juga pakai tipe angka lain, kayak huruf atau angka Romawi:
<ol type="A">
<li>Plan</li>
<li>Design</li>
<li>Code</li>
</ol>Hasilnya:
3. HTML Description List (<dl>)
Kalo mau bikin daftar dengan penjelasan, pakai Description List (<dl>). Ini cocok buat definisi, glosarium, atau pairing item sama deskripsinya.
Cara Pakai <dl>
<dl>
<dt>HTML</dt>
<dd>Bahasa markup buat bikin website</dd>
<dt>CSS</dt>
<dd>Bahasa styling buat mempercantik tampilan web</dd>
<dt>JavaScript</dt>
<dd>Bahasa pemrograman buat bikin web lebih interaktif</dd>
</dl>Hasilnya:
Biar makin kece, tambahin styling biar deskripsinya rata kiri:
dl dt {
font-weight: bold;
margin-top: 10px;
}
dl dd {
margin-left: 20px;
}Kode lebih lengkapnya:
<!DOCTYPE html>
<html>
<head>
<style>
dl dt {
font-weight: bold;
margin-top: 10px;
}
dl dd {
margin-left: 20px;
}
</style>
</head>
<body>
<dl>
<dt>HTML</dt>
<dd>Bahasa markup buat bikin website</dd>
<dt>CSS</dt>
<dd>Bahasa styling buat mempercantik tampilan web</dd>
<dt>JavaScript</dt>
<dd>Bahasa pemrograman buat bikin web lebih interaktif</dd>
</dl>
</body>
</html>Hasilnya:
4. HTML List Tags
Sekarang kita rangkum tag-tag penting yang dipakai buat bikin list di HTML:
| Tag | Fungsi |
| <ul> | Membuat unordered list (daftar tanpa urutan) |
| <ol> | Membuat ordered list (daftar berurutan) |
| <li> | Elemen dalam <ul> atau <ol> |
| <dl> | Membuat description list (daftar dengan deskripsi) |
| <dt> | Menampilkan istilah dalam <dl> |
| <dd> | Menampilkan deskripsi dalam <dt> |
Kesimpulan
Pakai list di HTML itu simpel dan bikin tampilan website lebih rapi. Unordered List buat daftar tanpa urutan, Ordered List buat yang perlu nomor, dan Description List buat yang butuh penjelasan. Jangan lupa tambahin CSS biar makin keren!
Mau belajar HTML lebih lanjut? Stay tuned di blog ini!
Komentar