Cara Membuat List di HTML dengan Langkah Mudah

Cara Membuat List di HTML adalah dasar penting untuk menampilkan data secara terstruktur. Dengan tag <li> di dalam <ol> atau <ul>, kamu bisa membuat daftar rapi sesuai kebutuhan.

Ada dua jenis utama: ordered list untuk daftar berurutan dan unordered list untuk daftar dengan simbol. Keduanya praktis dan mudah digunakan. 

Yuk, langsung belajar langkah-langkahnya bersama MinDi!

Baca juga: 6 Cara Menambahkan Foto di HTML

Pengertian List di HTML

List di HTML adalah elemen yang digunakan untuk menyusun data atau informasi dalam bentuk daftar yang terstruktur. 

Elemen ini memudahkan pengunjung untuk membaca dan memahami konten yang disajikan. 

List terdiri dari beberapa jenis, yaitu ordered list untuk daftar berurutan, unordered list untuk daftar tidak berurutan, dan definition list untuk daftar dengan istilah dan definisinya. 

Penggunaan list membantu membuat tampilan website lebih rapi dan terorganisir.

Baca juga: Cara Mengatur Posisi Gambar di HTML dan CSS

Jenis-Jenis List di HTML

Sumber: Canva

Warga Bimbingan, tau gak sih, HTML punya tiga jenis list yang bisa bikin konten website kamu lebih rapi dan enak dibaca? MinDi bakal jelasin satu-satu, nih. Yuk, simak!

1. Ordered List

Ordered List adalah list yang terurut dan biasanya digunakan untuk data yang memiliki urutan tertentu seperti langkah-langkah atau daftar prioritas. Elemen ini ditandai dengan angka, huruf, atau angka romawi sebagai penanda tiap itemnya. 

Untuk membuatnya, gunakan tag <ol> sebagai pembungkus dan <li> untuk tiap item dalam daftar. Ordered List cocok banget untuk menyusun informasi yang harus diikuti secara berurutan.

2. Unordered List

Unordered List adalah list yang tak terurut, biasanya menggunakan simbol seperti bullet untuk menandai itemnya. Daftar ini sering digunakan untuk menyusun data yang tidak membutuhkan urutan, seperti daftar belanja atau poin-poin penting. 

Dibuat menggunakan tag <ul> sebagai pembungkus dan <li> untuk tiap itemnya. Unordered List memberikan tampilan yang sederhana tapi tetap rapi.

3. Description List

Description List adalah list yang berisi istilah dan penjelasannya, seperti glosarium atau daftar definisi. Format ini menggunakan tag <dl> sebagai pembungkus, dengan <dt> untuk istilah dan <dd> untuk penjelasannya. 

List ini membantu menjelaskan istilah secara detail dan terorganisir. Description List sering digunakan dalam dokumentasi atau tutorial teknis untuk memberikan informasi tambahan.

Baca juga: Cara Membuat Kotak di HTML

Cara Membuat List di HTML

Sumber: Canva

Untuk membuat list di HTML, Warga Bimbingan cukup menggunakan beberapa tag sederhana sesuai jenis list yang ingin dibuat. Yuk, MinDi kasih langkah-langkahnya:

1. Membuat Ordered List

Untuk membuat Ordered List, gunakan tag <ol> sebagai pembungkus dan <li> untuk setiap item dalam daftar. Ordered List menampilkan item secara berurutan, misalnya dengan angka atau huruf sebagai penanda. 

List ini biasanya digunakan untuk data yang harus diikuti secara berurutan, seperti langkah-langkah atau urutan prioritas.

Kode Program:

Hasil Coding:

Gambar Hasil Ordered List

Penjelasan:

Pada contoh di atas, tag <ol> digunakan untuk membuat daftar yang terurut, dan <li> digunakan untuk menambahkan setiap item ke dalam daftar. 

Hasilnya adalah daftar berurutan yang ditampilkan secara otomatis dengan angka di depan setiap item.

Baca juga: Cara Membuat Textarea di HTML

2. Membuat Unordered List

Unordered List digunakan untuk membuat daftar tanpa urutan tertentu, biasanya ditandai dengan simbol seperti bullet. Tag <ul> berfungsi sebagai pembungkus daftar, dan <li> digunakan untuk setiap item.

Kode Program:

Hasil Coding:

Gambar Hasil Unordered List

Penjelasan:

Tag <ul> digunakan untuk membuat daftar tak berurut, dan <li> untuk menambahkan item ke dalamnya. Setiap item diberi simbol bullet secara default, yang dapat diubah dengan CSS jika diinginkan.

3. Membuat Description List

Description List digunakan untuk menampilkan daftar dengan istilah dan penjelasannya. Tag <dl> digunakan sebagai pembungkus, dengan <dt> untuk istilah dan <dd> untuk penjelasan.

Kode Program:

Hasil Coding:

Gambar Hasil Description List

Penjelasan:

Tag <dl> digunakan untuk membungkus daftar definisi, <dt> untuk istilah atau nama, dan <dd> untuk menjelaskan istilah tersebut. Format ini sangat cocok untuk glosarium atau daftar istilah teknis.

Baca juga: Cara Upload HTML ke Blog

Pelajari Cara Membuat List di HTML dengan Langkah Mudah!

Setelah memahami cara membuat list di HTML seperti ordered, unordered, dan definition list di HTML, kini saatnya mengasah kemampuanmu lebih jauh dalam membangun website yang fungsional dan menarik!

Yuk, ikuti Bootcamp Web Development di dibimbing.id! Di sini, kamu akan mempelajari lebih dalam tentang HTML, CSS, JavaScript, dan teknik pengembangan website modern lainnya.

Belajar langsung dari mentor berpengalaman dengan kurikulum yang aplikatif dan berbasis proyek nyata, membantumu memahami cara membangun website profesional dari nol hingga mahir.

Dengan lebih dari 700+ hiring partner dan tingkat keberhasilan alumni hingga 95%, peluang kariermu di dunia IT semakin terbuka lebar!

Jadi, tunggu apa lagi? Hubungi kami sekarang disini dan daftar di dibimbing.id untuk memulai perjalananmu menjadi Web Developer profesional. #BimbingSampeJadi!

Referensi:

1. HTML Lists [Buka]