Developer Cupuh: Jenis-Jenis List pada HTML

Jenis-Jenis List pada HTML - Bagi seorang developer web pasti sudah tidak asing lagi dengan hal-hal yang terkit dengan list atau daftar. Untuk membuat sebuah daftar barang misalnya pada HTML tidaklah sulit. Namun sebelum mempelajari lebih lajut tentang bagaimana cara membuatnya, alangkah baiknya kita memahami terlebih dahulu jenis dan tipe-tipe list pada HTML. Mari kita perhatikan gambar berikut :

Gambar Jenis List HTML

Ordered List

List jenis ini merupakan list yang memiliki urutan tertentu. Ada lima jenis tipe list yang dapat digunakan diantaranya menggunakan angka arab, huruf abjad kapital, huruf abjad kecil, angka romawi besar, dan angka romawi kecil.

Contoh penerapan pada baris kode :

Baris kode disamping merupakan salah satu contoh cara membuat list dengan urutan menggunakan angka arab. Untuk tipe yang lainnya kita hanya perlu mengganti value pada attribut type. Untuk membuat sebuah Ordered List harus dimulai dengan tag <ol>. Seluruh anggota list dituliskan masing-masing diantara tag <li>. dan diakhiri dengan penutup tag </ol>. Default dari Ordered List adalah list dengan type angka arab 1,2,3 . . dst yang artinya apabila baris kode hanya menggunakan tag <ol> tanpa memberikan attribut type maka type angka arab lah yang akan tampak pada browser.

Hasil yang tampak pada Browser :

UnOrdered List

List jenis ini merupakan list yang tidak memiliki aturan urutan tertentu. Ada empat type yang dapat digunakan diantaranya disc, circle, square dan none.

Baris kode disamping merupakan salah satu contoh cara membuat UnOrdered List dengan type circle. Untuk type yang lainya hampir sama dengan Ordered List, kita hanya perlu mengganti value dari property list-style-type. Perlu diperhatikan bahwa tag untuk membuat Unordered list adalah tag <ul> berbeda dengan Ordered List yang menggunakan tag <ol>. Default dari UnOrdered List adalah list dengan type disc yang artinya apabila baris kode hanya menggunakan tag <ol> tanpa memberikan attribut style dan properti list-style-type maka type disc lah yang akan tampak pada browser.

Hasil yang tampak pada browser :

Selain kedua jenis list tersebut masih ada lagi jenis list namun tidak termasuk keduanya yaitu Description List. List tipe ini digunakan untuk membuat daftar deskripsi pada setiap anggota List.

Mari kita Lihat baris kode berikut :

Description List dibangun dengan tag <dl> yang mana setiap anggotanya dibuat dengan tag <dt> dan setiap deskripsi dari anggota tersebut dibuat dengan tag <dd>.

Hasil yang tampak pada Browser :

Sebuah anggota dalam list dapat berupa list baru yang mana memiliki beberapa anggota sendiri. Kondisi seperti itu biasa disebut dengan Nested List. Masih Bingung ? yuk langsung kita perhatikan baris kode berikut :

Baris kode ke-11 sampai baris kode ke-15 merupakan sebuah list sendiri yang disisipkan pada salah satu anggota dari list utama sehingga tampak seperti sebuah list didalam list, itulah yang disebut Nested List.

Hasil yang tampak pada Browser :

Bagaimana temen-temen, mudah sekali bukan cara membuat list di HTML? Semoga Tutorial Jenis-Jenis List pada HTML kali ini dapat dengan mudah dipahami ya. Salam Belajar, Tetap Semangat !