Membuat List & Jenis-jenis List Dalam Html - HTML

List atau daftar dalam halaman HTML terdiri dari tipe beraturan dan tidak berarutan. Kalau dalam Microsoft Word disebut Bullet and Numbering. Fungsinya adalah untuk memasukkan data dalam bentuk daftar untuk memudahkan penbacaan.

Untuk membuat list dalam HTML digunakan beberapa tag penyusunya yaitu <ul> penanda sebuah kelompok daftar, dan <li> penanda setiap daftar di dalamnya. Secara default list akan di awali oleh karakter lingkaran hitam.

Kali ini kita bahas terlebih dahulu cara membuat list dalam bentuk tidak beraturan. Untuk membuatnya lihat contoh kode di bawah ini
<ul>
   <li>Sepak Bola</li>
   <li>Basket</li>
   <li>Bulu Tangkis</li>
</ul>

Susunan tag di atas akan menghasilkan tampilan seperti berikut ini
  • Sepak Bola
  • Basket
  • Bulu Tangkis
Contoh di atas adalah list dalam bentuk tidak beraturan. karakter tanda awalnya (lingkaran hitam) bisa diganti dengan beberapa tipe yang sudah disediakan dalam HTML. Untuk menggantinya tag tersebut harus ditambahkan dengan kode CSS dengan tipe tertentu.

Circle Lingkaran kosong
square Kotak
none Tanpa tanda awal apapun

Untuk penerapannya bisa ikuti sususnan skrip di bawah ini seperti contoh skrip tadi dengan tipe circle
<ul style="list-style:circle">
   <li>Sepak Bola</li>
   <li>Basket</li>
   <li>Bulu Tangkis</li>
</ul>
Hasilnya akan tampak seperti ini
  • Sepak Bola
  • Basket
  • Bulu Tangkis
Silahkan coba sendiri mengganti dengan tipe lainnya untuk melihat hasilnya. Sedikit saya jelaskan mengenai atribut di dalamnya. style adalah atribut CSS internal, list-style merupakan nama style untuk list dan circle adalah tipe penanda awal list. Untuk mengganti tipe lainnya cukup dengan mengganti circle menjadi tipe lain seperti aquare.

Itulah tadi cara membuat list dalam bentuk tidak beraturan. Untuk list jenis beraturan dalam bentuk angka dan huruf akan saya tuliskan pada tutorial selanjutnya.