Tutorial HTML untuk Pemula: Membuat Daftar/List di HTML
Halo gan. Di postingan sebelumnya kita sudah membahas cara membuat judul/heading di HTML. Kali ini kita akan bahas cara membuat daftar/list di HTML.
Membuat daftar/list di HTML
Di HTML, kita dapat membuat daftar/list. Ada 2 jenis list: berurutan (ordered list) dan tidak berurutan (unordered list).
Ordered list akan menampilkan daftar dengan nomor. Tagnya adalah <ol>.
Unordered list akan menampilkan daftar dengan bulatan. Tagnya adalah <ul>.
Sedangkan listnya sendiri tagnya adalah <li>. Tag <li> dimasukkan di antara tag ordered atau unordered list.
Membuat ordered list
Sebagai contoh, kita akan membuat list warna pelangi. Kode HTMLnya:
<!DOCTYPE html> <html> <head> <title>Membuat ordered list</title> </head> <body> <h2>Warna pelangi</h2> <ol> <li>Merah</li> <li>Jingga</li> <li>Kuning</li> <li>Hijau</li> <li>Biru</li> <li>Nila</li> <li>Ungu</li> </ol> </body> </html>
Web browser akan menampilkan seperti berikut:
Secara otomatis, ordered list akan menampilkan nomor urutannya.
Kita lanjut ke unordered list.
Barangkali Anda tertarik baca:
- Tutorial HTML untuk Pemula: Membuat Link di HTML
- Tutorial HTML untuk Pemula: Memasukkan Gambar di HTML
- Tutorial HTML untuk Pemula: Membuat Tabel di HTML
Barangkali Anda tertarik baca:
- Tutorial HTML untuk Pemula: Membuat Link di HTML
- Tutorial HTML untuk Pemula: Memasukkan Gambar di HTML
- Tutorial HTML untuk Pemula: Membuat Tabel di HTML
Membuat unordered list
Kita pakai contoh yang di atas saja, hanya ganti tag <ol> menjadi tag <ul> agar terlihat jelas perbedaannya.
Berikut kodenya:
<!DOCTYPE html> <html> <head> <title>Membuat unordered list</title> </head> <body> <h2>Warna pelangi</h2> <ul> <li>Merah</li> <li>Jingga</li> <li>Kuning</li> <li>Hijau</li> <li>Biru</li> <li>Nila</li> <li>Ungu</li> </ul> </body> </html>
Web browser akan menampilkan:
Unordered list akan menampilkan list dengan bulatan. Terlihat perbedaannya kan?
Kegunaan lain dari list HTML
Selain membuat list, tag list juga bisa digunakan untuk membuat navigasi halaman web, tetapi harus dibantu dengan CSS.
Kita juga bisa menempatkan list di dalam list. Bahasa jawanya itu nested list, list beranak atau list bersarang.
Sampai sini selesai pembahasan kita tentang pembuatan list di HTML.
Selanjutnya yang akan kita bahas yakni cara membuat link di HTML.