Belajar HTML Dasar Part 9: Cara Membuat Daftar/List di HTML (tag ol, ul dan li)

Langkah berikutnya yang akan kita pelajari dalam tutorial belajar HTML dasar adalah cara membuat daftar/list di HTML. Untuk menampilkan sebuah text sebagai daftar/list, HTML menyediakan Tag

,
dan
• .
  
  

  ---

  
  

  Cara Membuat Daftar/List di HTML

  
  

  Dalam HTML, tag list terdiri dari 2 jenis, ordered list (berurutan) dan unordered list (tidak berurutan). Ordered list akan ditampilkan dengan angka atau huruf, sedangkan unordered list dengan bulatan atau kotak.

  
  

  Ordered list menggunakan tag

  , dan unordered list menggunakan tag
  , sedangkan untuk list sendiri menggunakan tag
  • . Penjelasan ini akan lebih mudah jika menggunakan contoh.
    
    
    
    

    Berikut adalah contoh kode HTML untuk membuat ordered list menggunakan tag

    :
    
    

    
    
    
      
    
    
      
    daftar belanjaan
      
    
      
    minyak goreng
        
    sabun mandi
        
    deterjen
        
    shampoo
        
    obat nyamuk
      
    
    

    
    

    

    
    

    ---

    
    

    Untuk membuat unordered list, tinggal ganti tag

    menjadi
    .
    
    

    Berikut adalah contoh kode HTML untuk membuat unordered list menggunakan tag

    :
    
    

    
    
    
      
    
    
      
    daftar belanjaan
      
    
        
    minyak goreng
        
    sabun mandi
        
    deterjen
        
    shampoo
        
    obat nyamuk
      
    
    

    
    

    Penggunaan tag list pada HTML tidak hanya untuk membuat daftar saja. Dengan CSS, tag list dapat digunakan untuk membuat menu navigasi di dalam halaman web, seperti menu home, contact us, dll. Tag list juga dapat digunakan untuk nested list, atau list bersarang, yang artinya sebuah list yang berada di dalam list lainnya.

    
    
    
    Di dalam HTML, selain ordered list dan unordered list, terdapat 1 lagi jenis list, yaitu description list. Pembahasan tentang description list akan kita bahas dalam tutorial HTML Lanjutan: Cara Membuat Description List dalam HTML (tag dl, dt dan dd).
    
    

    Dalam tutorial belajar HTML dasar selanjutnya, kita akan membahas salah satu tag terpenting dari HTML, yakni tag untuk membuat link di HTML .

    
    

    ---

    
    
    
    eBook HTML Uncover Duniailkom
    
    Anda serius ingin menguasai HTML? Duniailkom telah menyusun eBook HTML Uncover. eBook ini membahas HTML dengan lebih detail dan lebih lengkap hingga fitur terbaru HTML5. Penjelasan lebih lanjut bisa ke: eBook HTML Uncover Duniailkom.
    
    
    Sumber wk.com