Kalau lo lagi belajar HTML dan mau bikin daftar yang nggak pake urutan angka, unordered list adalah solusinya! Unordered list ini sering dipakai buat bikin menu, daftar fitur, atau poin-poin penting dalam konten web. Yuk, kita bahas tuntas mulai dari dasarnya sampai cara bikin daftar horizontal dengan CSS.
1. Apa Itu Unordered HTML List?
Unordered list atau daftar tanpa urutan adalah elemen HTML yang digunakan buat menampilkan daftar item tanpa nomor urut. Biasanya, setiap item dalam daftar ini dikasih bullet point (•) secara default.
Format dasar unordered list dalam HTML kayak gini:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>Kode di atas bakal nampilin daftar seperti ini:
2. Unordered HTML List – Pilih Tanda Bullet Sendiri
Tanda bullet bawaan HTML emang buletan hitam, tapi kita bisa ubah bentuknya dengan CSS. Cek beberapa pilihan berikut:
ul {
list-style-type: square; /* Bisa diganti dengan disc, circle, atau none */
}Kode lebih lengkapnya:
<html>
<head>
<style>
ul {
list-style-type: square; /* Bisa diganti dengan disc, circle, atau none */
}
</style>
</head>
<body>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</body>
</html>Hasilnya:
Pilihan list-style-type yang bisa dipakai:
- disc (default) → •
- circle → ◦
- square → ■
- none → (menghilangkan bullet point)
3. Nested HTML Lists (Daftar Bersarang)
Mau bikin daftar di dalam daftar? Bisa banget! Ini namanya nested list.
<ul>
<li>Buah-buahan
<ul>
<li>Apel</li>
<li>Pisang</li>
<li>Jeruk</li>
</ul>
</li>
<li>Sayuran</li>
</ul>Hasilnya kayak gini:
4. Bikin List Horizontal Pakai CSS
Kalau lo mau bikin daftar jadi horizontal (misalnya buat menu navigasi), tambahin sedikit CSS kayak gini:
ul {
list-style-type: none;
padding: 0;
margin: 0;
display: flex;
}
li {
margin: 0 15px;
}Kode di atas bakal bikin item list sejajar secara horizontal, cocok buat navigasi website.
Kode lebih lengkapnya:
<html>
<head>
<style>
ul {
list-style-type: none;
padding: 0;
margin: 0;
display: flex;
}
li {
margin: 0 15px;
}
</style>
</head>
<body>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</body>
</html>Hasilnya:
5. Ringkasan Materi (Chapter Summary)
Nah, buat lo yang butuh rangkuman cepat, berikut poin-poin penting yang udah kita bahas:
- Unordered list: daftar tanpa nomor urut.
- Mengubah bullet dengan CSS (
list-style-type). - Nested list: daftar di dalam daftar.
- Membuat daftar horizontal dengan CSS (
display: flex).
6. Tag HTML untuk List
Biar makin paham, ini daftar tag HTML yang sering dipakai buat bikin list:
<ul>→ unordered list<li>→ list item<ol>→ ordered list (buat daftar yang pake angka)<dl>→ definition list (buat daftar istilah)<dt>→ definition term (judul istilah dalam<dl>)<dd>→ definition description (penjelasan istilah dalam<dl>)
Itulah panduan lengkap tentang HTML unordered lists. Semoga bermanfaat buat ngoding lo! Kalau masih ada pertanyaan, langsung aja komen di bawah. Happy coding!
Komentar