Ada tiga jenis list di HTML:

1. Ordered List adalah list yang terurut;
2. Unordered List adalah list yang tak terurut;
3. Description List adalah list yang berisi definisi.

1. Ordered List

Ordered list adalah sebuah list yang terurut. List ini ditandai dengan angka atau huruf di depannya sebagai penanda bahwa list ini terurut. Ordered list dibuat dengan tag

. Tag ini memiliki anak berupa tag untuk membuat item list yaitu
1. (list item).

    
    
         
              
         
   
         
             
   10 distro linux yang sering digunakan di Indonesia
    
             
    
                  
   Ubuntu
    
                  
   Mint
    
                  
   BlankOn
    
                  
   Fedora
    
                  
   Debian
    
                  
   CentOS
    
                  
   OpenSUSE
    
                  
   ElementaryOS
    
                  
   BackTrack
    
                  
   Kali Linux
    
             
    
         
   

   Hasilnya :

   List diatas diurutkan berdasarkan angka dari 1 sampai 10. Lalu bagaimana kalau kita ingin menggunakan huruf seperti a, b, c atau angka romawi seperti I, II, III?

   Untuk membuat yang seperti itu, kita bisa menggunakan atribut type pada tag ol dan berikut ini nilai yang bisa diberikan:

   • a untuk alfabet a,

     
     
     
         
             
         
     
         
             
     List dengan type alfabet
             
     
                 
     Tutorial List di HTML
                 
     Tutorial Link di HTML
                 
     Tutorial Tabel di HTML
             
             
             
     List dengan type alfabet kapital (huruf besar)
             
     
                 
     Tutorial List di HTML
                 
     Tutorial Link di HTML
                 
     Tutorial Tabel di HTML
             
     
             
     List dengan type romawi
             
     
                 
     Tutorial List di HTML
                 
     Tutorial Link di HTML
                 
     Tutorial Tabel di HTML
             
     
             
     List dengan type romawi kapital
             
     
                 
     Tutorial List di HTML
                 
     Tutorial Link di HTML
                 
     Tutorial Tabel di HTML
             
     
         
     

     1,

     
     
     
         
             
         
     
         
             
     List dengan type alfabet
             
     
                 
     Tutorial List di HTML
                 
     Tutorial Link di HTML
                 
     Tutorial Tabel di HTML
             
             
             
     List dengan type alfabet kapital (huruf besar)
             
     
                 
     Tutorial List di HTML
                 
     Tutorial Link di HTML
                 
     Tutorial Tabel di HTML
             
     
             
     List dengan type romawi
             
     
                 
     Tutorial List di HTML
                 
     Tutorial Link di HTML
                 
     Tutorial Tabel di HTML
             
     
             
     List dengan type romawi kapital
             
     
                 
     Tutorial List di HTML
                 
     Tutorial Link di HTML
                 
     Tutorial Tabel di HTML
             
     
         
     

     2, dan seterusnya

   • 
     
     
         
             
         
     
         
             
     List dengan type alfabet
             
     
                 
     Tutorial List di HTML
                 
     Tutorial Link di HTML
                 
     Tutorial Tabel di HTML
             
             
             
     List dengan type alfabet kapital (huruf besar)
             
     
                 
     Tutorial List di HTML
                 
     Tutorial Link di HTML
                 
     Tutorial Tabel di HTML
             
     
             
     List dengan type romawi
             
     
                 
     Tutorial List di HTML
                 
     Tutorial Link di HTML
                 
     Tutorial Tabel di HTML
             
     
             
     List dengan type romawi kapital
             
     
                 
     Tutorial List di HTML
                 
     Tutorial Link di HTML
                 
     Tutorial Tabel di HTML
             
     
         
     

     3 untuk alfabet

     
     
     
         
             
         
     
         
             
     List dengan type alfabet
             
     
                 
     Tutorial List di HTML
                 
     Tutorial Link di HTML
                 
     Tutorial Tabel di HTML
             
             
             
     List dengan type alfabet kapital (huruf besar)
             
     
                 
     Tutorial List di HTML
                 
     Tutorial Link di HTML
                 
     Tutorial Tabel di HTML
             
     
             
     List dengan type romawi
             
     
                 
     Tutorial List di HTML
                 
     Tutorial Link di HTML
                 
     Tutorial Tabel di HTML
             
     
             
     List dengan type romawi kapital
             
     
                 
     Tutorial List di HTML
                 
     Tutorial Link di HTML
                 
     Tutorial Tabel di HTML
             
     
         
     

     3,

     
     
     
         
             
         
     
         
             
     List dengan type alfabet
             
     
                 
     Tutorial List di HTML
                 
     Tutorial Link di HTML
                 
     Tutorial Tabel di HTML
             
             
             
     List dengan type alfabet kapital (huruf besar)
             
     
                 
     Tutorial List di HTML
                 
     Tutorial Link di HTML
                 
     Tutorial Tabel di HTML
             
     
             
     List dengan type romawi
             
     
                 
     Tutorial List di HTML
                 
     Tutorial Link di HTML
                 
     Tutorial Tabel di HTML
             
     
             
     List dengan type romawi kapital
             
     
                 
     Tutorial List di HTML
                 
     Tutorial Link di HTML
                 
     Tutorial Tabel di HTML
             
     
         
     

     5,

     
     
     
         
             
         
     
         
             
     List dengan type alfabet
             
     
                 
     Tutorial List di HTML
                 
     Tutorial Link di HTML
                 
     Tutorial Tabel di HTML
             
             
             
     List dengan type alfabet kapital (huruf besar)
             
     
                 
     Tutorial List di HTML
                 
     Tutorial Link di HTML
                 
     Tutorial Tabel di HTML
             
     
             
     List dengan type romawi
             
     
                 
     Tutorial List di HTML
                 
     Tutorial Link di HTML
                 
     Tutorial Tabel di HTML
             
     
             
     List dengan type romawi kapital
             
     
                 
     Tutorial List di HTML
                 
     Tutorial Link di HTML
                 
     Tutorial Tabel di HTML
             
     
         
     

     6, dan seterusnya

   • 
     
     
         
             
         
     
         
             
     List dengan type alfabet
             
     
                 
     Tutorial List di HTML
                 
     Tutorial Link di HTML
                 
     Tutorial Tabel di HTML
             
             
             
     List dengan type alfabet kapital (huruf besar)
             
     
                 
     Tutorial List di HTML
                 
     Tutorial Link di HTML
                 
     Tutorial Tabel di HTML
             
     
             
     List dengan type romawi
             
     
                 
     Tutorial List di HTML
                 
     Tutorial Link di HTML
                 
     Tutorial Tabel di HTML
             
     
             
     List dengan type romawi kapital
             
     
                 
     Tutorial List di HTML
                 
     Tutorial Link di HTML
                 
     Tutorial Tabel di HTML
             
     
         
     

     7 untuk angka romwari

     
     
     
         
             
         
     
         
             
     List dengan type alfabet
             
     
                 
     Tutorial List di HTML
                 
     Tutorial Link di HTML
                 
     Tutorial Tabel di HTML
             
             
             
     List dengan type alfabet kapital (huruf besar)
             
     
                 
     Tutorial List di HTML
                 
     Tutorial Link di HTML
                 
     Tutorial Tabel di HTML
             
     
             
     List dengan type romawi
             
     
                 
     Tutorial List di HTML
                 
     Tutorial Link di HTML
                 
     Tutorial Tabel di HTML
             
     
             
     List dengan type romawi kapital
             
     
                 
     Tutorial List di HTML
                 
     Tutorial Link di HTML
                 
     Tutorial Tabel di HTML
             
     
         
     

     7,

     
     
     
         
             
         
     
         
             
     List dengan type alfabet
             
     
                 
     Tutorial List di HTML
                 
     Tutorial Link di HTML
                 
     Tutorial Tabel di HTML
             
             
             
     List dengan type alfabet kapital (huruf besar)
             
     
                 
     Tutorial List di HTML
                 
     Tutorial Link di HTML
                 
     Tutorial Tabel di HTML
             
     
             
     List dengan type romawi
             
     
                 
     Tutorial List di HTML
                 
     Tutorial Link di HTML
                 
     Tutorial Tabel di HTML
             
     
             
     List dengan type romawi kapital
             
     
                 
     Tutorial List di HTML
                 
     Tutorial Link di HTML
                 
     Tutorial Tabel di HTML
             
     
         
     

     9,

     
     
         
             
         
     
         
             
     Bahasa Pemrograman untuk dipelajari:
             
     
                 
     Javascript
                 
     PHP
                 
     Java
                 
     Python
                 
     Kotlin
             
         
     

     0, dan seterusnya

   • 
     
         
             
         
     
         
             
     Bahasa Pemrograman untuk dipelajari:
             
     
                 
     Javascript
                 
     PHP
                 
     Java
                 
     Python
                 
     Kotlin
             
         
     

     1 untuk angka romwari

     
     
         
             
         
     
         
             
     Bahasa Pemrograman untuk dipelajari:
             
     
                 
     Javascript
                 
     PHP
                 
     Java
                 
     Python
                 
     Kotlin
             
         
     

     1,

     
     
         
             
         
     
         
             
     Bahasa Pemrograman untuk dipelajari:
             
     
                 
     Javascript
                 
     PHP
                 
     Java
                 
     Python
                 
     Kotlin
             
         
     

     3,

     
     
         
             
         
     
         
             
     Bahasa Pemrograman untuk dipelajari:
             
     
                 
     Javascript
                 
     PHP
                 
     Java
                 
     Python
                 
     Kotlin
             
         
     

     4, dan seterusnya

   Contoh :

   
   
   
       
           
       
   
       
           
   List dengan type alfabet
           
   
               
   Tutorial List di HTML
               
   Tutorial Link di HTML
               
   Tutorial Tabel di HTML
           
           
           
   List dengan type alfabet kapital (huruf besar)
           
   
               
   Tutorial List di HTML
               
   Tutorial Link di HTML
               
   Tutorial Tabel di HTML
           
   
           
   List dengan type romawi
           
   
               
   Tutorial List di HTML
               
   Tutorial Link di HTML
               
   Tutorial Tabel di HTML
           
   
           
   List dengan type romawi kapital
           
   
               
   Tutorial List di HTML
               
   Tutorial Link di HTML
               
   Tutorial Tabel di HTML
           
   
       
   

   Hasilnya :

   Baca Juga  Tutorial Javascript #2 : Menulis Kode JavaScript pada HTML

    

   2. Unordered List

   Sementara untuk list yang tidak terurut, biasanya menggunakan simbol-simbol. Cara membuatnya menggunakan tag

   (unordered list). Ia juga memiliki anak yang sama seperti
   .

   Contoh :

   
   
       
           
       
   
       
           
   Bahasa Pemrograman untuk dipelajari:
           
   
               
   Javascript
               
   PHP
               
   Java
               
   Python
               
   Kotlin
           
       
   

   Hasilnya :

   Secara default simbol yang digunakan oleh unordered list adalah lingkaran kecil (disc). Kita juga dapat menggantinya seperti ordered list dengan menggunakan atribut type.

   Berikut ini nilai yang bisa diberikan untuk atribut type:

   • 
     
         
             
         
     
         
             
     Bahasa Pemrograman untuk dipelajari:
             
     
                 
     Javascript
                 
     PHP
                 
     Java
                 
     Python
                 
     Kotlin
             
         
     

     6 untuk simbol persegi;

   • 
     
         
             
         
     
         
             
     Bahasa Pemrograman untuk dipelajari:
             
     
                 
     Javascript
                 
     PHP
                 
     Java
                 
     Python
                 
     Kotlin
             
         
     

     7 (default) untuk simbol lingkaran disc;

   • 
     
         
             
         
     
         
             
     Bahasa Pemrograman untuk dipelajari:
             
     
                 
     Javascript
                 
     PHP
                 
     Java
                 
     Python
                 
     Kotlin
             
         
     

     8 tidak memakai simbol;

   • 
     
         
             
         
     
         
             
     Bahasa Pemrograman untuk dipelajari:
             
     
                 
     Javascript
                 
     PHP
                 
     Java
                 
     Python
                 
     Kotlin
             
         
     

     9 untuk simbol lingkaran;

   Contoh :

   
   
       
           
       
   
       
           
   Bahasa Pemrograman untuk dipelajari:
           
   
               
   Javascript
               
   PHP
               
   Java
               
   Python
               
   Kotlin
           
   
           
   Framework untuk dipelajari:
           
   
               
   Vuejs
               
   Svelte
               
   Reactjs
          
   
           
   Tools untuk dipelajari:
           
   
               
   Gulp
               
   NPM
               
   Js Lint
           
   
           
   Pelajari juga:
           
   
               
   JSON
               
   XML
               
   Markdown
           
   
       
   

   Hasilnya :

   Selain menggunakan type list di atas, kita juga bisa menggunakan gambar.
   Contohnya :

   
   
       
           
       
   
       
           
   Bahasa Pemrograman untuk dipelajari:
           
   
               
   Javascript
               
   PHP
               
   Java
               
   Python
               
   Kotlin
           
       
   

   Hasilnya :

    

   3. Description List

   List ini digunakan untuk menampilkan deskripsi/penjelasan, contohnya seperti kamus. Tag untuk membuat description list adalah

   (data list).

   Dalam tag ini terdapat tag

   (data term) dan

   (data description).

   Contoh:

   
   
   
   
       
   
   
       
           
   Daftar istilah:
           
   
               
   Kopi
               
   Sebuah minuman berwarna hitam. Menurut pendapat lain kopi adalah air yang dimasak sampai gosong.
               
   Kopi Black Magic
               
   Kopi hitam atau kopi tradisional yang dibuat dengan mantra-mantra.
               
   White Coffee
               
   Kopi berwarna putih, kandungan kafeinnya sedikit.
               
   Kopi++
               
   Kopi ini mampu meningkatkan imajinasi 99 kali lipat.
           
       
   
   

   Hasilnya :

   Baca Juga  Cara Membuat tabel di HTML

    

   List di dalam List (Nested List)

   List juga dapat dibuat di dalam list, misalkan kita ingin menggabungkan ordered list dengan unordered list. Caranya, list yang di dalam ditulis di dalam tag

   .

   Apa itu list dalam HTML?

   List merupakan cara penulisan yang sering digunakan untuk membuat daftar berurutan. Terdapat 3 macam list yang ada di HTML yaitu ordered list, unordered list dan description list.

   Tag ol digunakan untuk membuat list apa?

   Deskripsi. Penjelasan HTML ol tag Ol menunjukkan sebuah ordered list, yaitu daftar (list) beberapa item yang terstruktur atau berurutan.

   Apa fungsi ul dan li pada HTML?

   Deskripsi. Penjelasan HTML ul Untuk menulis sebuah item dalam daftar (list), digunakan element

   yang menunjukkan List Item.