Ya itu semua setidaknya akan terlihat seperti list, tapi membuat list dengan kedua cara di atas sangat tidak disarankan.

Dalam HTML ada tag atau elemen tersendiri untuk melakukan hal tersebut yaitu dengan menggunakan….

Mengenal Macam Elemen List

Tercatat ada tiga elemen yang dapat ditugaskan untuk membuat suatu list di HTML. Elemen-elemen tersebut antara lain:

• Ordered List
• Unordered List
• Description List

Ketiganya memiliki perbedaan yang akan kita bahasa satu-satu di bawah ini…

Ordered List

Merupakan jenis list yang ditampilkan dengan diwakili oleh angka (defaultnya) secara urut. Ordered list dibentuk dengan menggunakan tag

yang kemudian dilanjutkan menggunakan tag
1. untuk mewakili setiap item (item list) di dalamnya.

   Contoh penerapan:

   
   
   
   
   	
   
   
   	
   3 Framework PHP Terpopuler
   	
   
   		
   Laravel
   		
   Codeigniter
   		
   Symfony
   	
   
   
   

   Keluaran:

   Selain dengan angka, setiap item list juga dapat diwakili dengan menggunakan huruf seperti A, B, C atau bahkan menggunakan angka romawi I, II, III.

   Hal tersebut bisa dilakukan dengan menerapkan nilai dari atribut type. Nilai-nilai yang disediakan antara lain:

   • A – untuk nilai berupa alfabet (uppercase) A, B, C, dan seterusnya
   • a – untuk nilai berupa alfabet (lowercase) a, b, c, dan seterusnya
   • I – untuk nilai berupa angka romawi (uppercase) I, II, III, dan seterusnya
   • i – untuk nilai berupa angka romawi (lowercase) i, ii, iii, dan seterusnya

   Contoh Penerapan

   
   
   
   
   	
   
   
   	
   List dengan Nomor
   	
   
   		
   Laravel
   		
   Codeigniter
   		
   Symfony
   	
   	
   List dengan Huruf (Uppercase)
   	
   
   		
   Laravel
   		
   Codeigniter
   		
   Symfony
   	
   	
   List dengan Huruf (Lowercase)
   	
   
   		
   Laravel
   		
   Codeigniter
   		
   Symfony
   	
   	
   List dengan Angka Romawi (Uppercase)
   	
   
   		
   Laravel
   		
   Codeigniter
   		
   Symfony
   	
   	
   List dengan Angka Romawi (Lowercase)
   	
   
   		
   Laravel
   		
   Codeigniter
   		
   Symfony
   	
   
   
   

   Keluaran:

   Unordered List

   Sedangkan untuk unordered list merupakan jenis list yang setiap itemnya diwakili dengan simbol. Cara membuatnya dengan menggunakan tag

   dengan setiap item di dalamnya dibuat menggunakan tag
   • sama seperti sebelumnya.

     Contoh:

     
     
     
     
     	
     
     
     	
     3 Bahasa Pemrograman Terpopuler
     	
     
     		
     Python
     		
     Javascript
     		
     Java
     	
     
     
     

     Keluaran:

     Sama seperti ordered list, atribut type juga dapat digunakan pada unordered list namun dengan berbeda nilai yang tersedia. Untuk unordered list nilai dari atribut type antara lain:

     • circle – menampilkan lingkaran
     • disc – menampilkan lingkaran hitam
     • square – menampilkan simbol kotak
     • none – tidak menampilkan simbol apa-apa

     Contoh penerapan:

     
     
     
     
     	
     
     
     	
     List dengan Nilai Disc
     	
     
     		
     Python
     		
     Javascript
     		
     Java
     	
     	
     List dengan Nilai Circle
     	
     
     		
     Python
     		
     Javascript
     		
     Java
     	
     	
     List dengan Nilai Rectangle
     	
     
     		
     Python
     		
     Javascript
     		
     Java
     	
     	
     List dengan Nilai None
     	
     
     		
     Python
     		
     Javascript
     		
     Java
     	
     
     
     

     Keluaran:

     Selain dengan simbol melalui atribut type, kita juga diizinkan menggunakan gambar melalui atribut style CSS.

     
     
     
     
     	
     
     
     	
     List dengan Ikon
     	
     
     		
     Laravel
     		
     Codeigniter
     		
     Symfony
     	
     
     
     

     Keluaran:

     Description List

     Description list merupakan jenis list yang berisi penjelasan atau deskripsi dari sesuatu. Untuk membuat description list kita butuh tiga tag antara lain:

     • – definition list, tag untuk membuat definition list

     • – definition term, tag untuk membuat istilah yang akan dideskripsikan
     • – definition description, tag untuk membuat definisi, deskripsi atau penjelasan dari istilah

     Seperti inilah format penulisannya

     Contoh:

     
     
     
     
     	
     
     
     	
     Apa yang dibutuhkan untuk membuat website?
     	
     
     		
     HTML
     		
     HTML singkatan dari HyperText Markup Language, merupakan bahasa markup yang digunakan untuk membuat struktur website
     		
     CSS
     		
     CSS singkatan dari Cascade Stylesheet, merupakan bahasa stylesheet yang digunakan untuk mempercantik tampilan website
     		
     Javascript
     		
     Merupakan bahasa yang mampu membuat suatu halaman website menjadi lebih dinamis dan interaktif
     	
     
     
     

     Keluaran:

     List Bersarang

     Sebuah list dikatakan list bersarang atau nested list bila dalam suatu list terdapat list lagi. Simpelnya list di dalam list. Sebagai contoh di bawah ini,

     Tag ol digunakan untuk membuat list apa?

     Ordered List di HTML. Ordered list dibuat dengan tag

     .

     Apa fungsi LI dalam membuat list?

     Fungsi li pada html adalah untuk menampilkan item pada unordered dan ordered list. Sedangkan pada description list tidak menggunakan tag
   • .