Di postingan sebelumnya kita sudah membahas cara membuat judul di HTML. Kali ini kita akan bahas cara membuat list di HTML. Berikut AneIqbal sajikan panduan lengkapnya.
Membuat 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. Sehingga, ordered list ini cocok untuk benda atau hal yang sifatnya berurutan atau deretan.
Selain ordered list, ada juga unordered list atau tidak berurutan. Berikut bagaimana pembuatan list yang tidak urut.
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?
Unordered list ini cocok untuk membuat daftar benda atau hal yang sifatnya tidak berhubungan atau acak.
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 mengenai cara membuat list di HTML. Semoga panduan di atas bisa dengan mudah dipahami dan diikuti.
Selanjutnya yang akan kita bahas yakni cara membuat link di HTML.
