Halo lagi! Kali ini kita bakal bahas tentang daftar atau list di HTML. Kalau kamu pernah lihat website yang menampilkan poin-poin seperti menu atau langkah-langkah, itu biasanya dibuat dengan elemen daftar. Tenang, caranya simpel banget! Yuk, langsung kita mulai.

Jenis-Jenis Daftar di HTML

Ada tiga jenis utama daftar di HTML:

1. Unordered List (
   ): Daftar tanpa urutan, biasanya pakai bullet point.
   • Ordered List (
     ): Daftar berurutan, pakai angka atau huruf.
     1. Definition List (

        ): Daftar untuk istilah dan definisinya.

     ---

     1. Daftar Tanpa Urutan (Unordered List)

     Daftar ini biasanya digunakan untuk item yang gak perlu urutan tertentu, seperti menu makanan atau daftar hobi.

     Contoh:

     
       
     Makan
       
     Tidur
       
     Koding
     
     

     Hasilnya di browser:

     • Makan
     • Tidur
     • Koding

     Keterangan:

     • : Elemen pembungkus daftar tanpa urutan.
       • : Item di dalam daftar.

       ---

       2. Daftar Berurutan (Ordered List)

       Kalau daftar kamu butuh urutan, misalnya langkah-langkah, gunakan

       .

       Contoh:

       
         
       Bangun pagi
         
       Olahraga
         
       Ngopi
       
       

       Hasilnya di browser:

       1. Bangun pagi
       2. Olahraga
       3. Ngopi

       Keterangan:

       • : Elemen pembungkus daftar berurutan.
         2. : Item di dalam daftar.

       ---

       3. Daftar Definisi (Definition List)

       Jenis ini cocok untuk menampilkan istilah dan penjelasannya, seperti kamus mini.

       Contoh:

       
         
       HTML
         
       HyperText Markup Language, bahasa dasar untuk membuat halaman web.
       
         
       CSS
         
       Cascading Style Sheets, digunakan untuk mengatur tampilan halaman web.
       
       

       Hasilnya di browser:

       • HTML
         HyperText Markup Language, bahasa dasar untuk membuat halaman web.
       • CSS
         Cascading Style Sheets, digunakan untuk mengatur tampilan halaman web.

       Keterangan:

       • : Elemen pembungkus daftar definisi.

       • : Istilah atau nama.
       • : Penjelasan atau definisi.

       ---

       Mengubah Tampilan Daftar

       Kamu bisa mengatur jenis bullet atau angka dengan atribut.

       Contoh untuk

       :

       
         
       Item 1
         
       Item 2
         
       Item 3
       
       

       Hasilnya: Bullet berbentuk kotak.

       Contoh untuk

       :

       
         
       Item A
         
       Item B
         
       Item C
       
       

       Hasilnya: Nomor berubah jadi huruf (a, b, c).

       ---

       Praktik Langsung

       Coba buat file baru dan tambahkan ini:

       
       
         
           
           
         
         
           
       Belajar Membuat Daftar
       
           
       Daftar Tanpa Urutan
           
       
             
       Makan
             
       Tidur
             
       Koding
           
       
           
       Daftar Berurutan
           
       
             
       Bangun pagi
             
       Olahraga
             
       Ngopi
           
       
           
       Daftar Definisi
           
       
             
       HTML
             
       HyperText Markup Language
             
       CSS
             
       Cascading Style Sheets
           
         
       
       

       Simpan file ini, buka di browser, dan lihat hasilnya.

       ---

       Tantangan untuk Kamu

       1. Buat daftar belanja mingguan dengan
          .
          • Tulis langkah-langkah memasak makanan favoritmu dengan
            .
            1. Buat daftar definisi untuk tiga istilah baru yang kamu pelajari.

            ---

            Daftar adalah bagian penting dalam HTML. Artikel ini membantu kamu memahami dasar-dasarnya sebelum lanjut ke tutorial berikutnya di www.code80vity.com.