Daftar HTML

Dalam tutorial ini akan belajar cara membuat berbagai jenis daftar dalam HTML.

Bekerja dengan Daftar HTML

Daftar HTML digunakan untuk menyajikan daftar informasi dalam bentuk yang baik dan cara semantik. Ada tiga jenis daftar dalam HTML dan masing-masing memiliki tujuan dan makna tertentu.

• Unordered list (Daftar tidak berurutan) — Digunakan untuk membuat daftar item terkait, tanpa urutan tertentu.
• Ordered list (Daftar terurut) — Digunakan untuk membuat daftar item terkait, dalam urutan tertentu.
• Description list (Daftar deskripsi) — Digunakan untuk membuat daftar istilah dan deskripsinya.

CATATAN

Di dalam item daftar, kalian dapat meletakkan teks, gambar, tautan, jeda baris, dll. Kalian juga dapat menempatkan seluruh daftar di dalam item daftar untuk membuat daftar bersarang.

Di bagian berikut, kita akan membahas ketiga jenis daftar satu per satu:

Unordered list (Daftar tidak berurutan)

Daftar tidak berurutan dibuat menggunakan elemen <ul>, dan setiap item daftar dimulai dengan elemen <li>.

Item daftar dalam daftar tidak berurutan ditandai dengan poin. Berikut ini contohnya:

<ul>
  <li>Kue Coklat</li>
  <li>Kue Hutan Hitam</li>
  <li>Kue Nanas</li>
</ul>

— Output dari contoh di atas akan terlihat seperti ini:

• Kue Cokelat
• Kue Black Forest
• Kue Nanas

Kalian juga dapat mengubah tipe bullet dalam daftar tidak berurutan menggunakan properti list-style-type CSS. Aturan gaya berikut mengubah jenis poin dari disc default menjadi persegi:

ul {
  list-style-type: persegi;
}

Silakan lihat tutorial tentang daftar CSS untuk mempelajari tentang menata daftar HTML secara detail.

Ordered list (Daftar terurut)

Daftar berurutan dibuat menggunakan elemen <ol>, dan setiap item daftar dimulai dengan elemen <li>. Daftar berurutan digunakan ketika urutan item daftar penting.

Item daftar dalam daftar yang diurutkan ditandai dengan angka. Berikut ini contohnya:

<ol>
  <li>Kencangkan sabuk pengaman Anda</li>
  <li>Menyalakan mesin mobil</li>
  <li>Melihat sekeliling dan pergi</li>
</ol>

— Output dari contoh di atas akan terlihat seperti ini:

1. Kencangkan sabuk pengaman Anda
2. Menyalakan mesin mobil
3. Lihat sekeliling dan pergi

Penomoran item dalam daftar yang diurutkan biasanya dimulai dengan 1. Namun, jika Anda ingin mengubahnya, Anda dapat menggunakan atribut start, seperti yang ditunjukkan pada contoh berikut:

<ol start="10">
  <li>Campur bahan</li>
  <li>Panggang dalam oven selama satu jam</li>
  <li>Biarkan selama sepuluh menit</li>
</ol>

— Output dari contoh di atas akan terlihat seperti ini:

10. Campur bahan
11. Panggang dalam oven selama satu jam
12. Biarkan selama sepuluh menit

Seperti daftar tak berurutan, Kalian juga dapat menggunakan properti list-style-type CSS untuk mengubah tipe penomoran dalam daftar terurut. Aturan style berikut mengubah jenis penanda menjadi angka romawi.

ol {
  list-style-type: roman atas;
}

TIP

Kalian juga dapat menggunakan atribut type untuk mengubah tipe penomoran, mis. type="I". Namun, kalian harus menghindari atribut ini, gunakan properti CSS list-style-type sebagai gantinya.

Description list (Daftar deskripsi)

Daftar deskripsi adalah daftar item dengan deskripsi atau definisi setiap item.

Daftar deskripsi dibuat menggunakan elemen <dl>. Elemen <dl> digunakan bersama dengan elemen <dt> yang menentukan istilah, dan elemen <dd> yang menentukan definisi istilah.

Browser biasanya membuat daftar definisi dengan menempatkan istilah dan definisi di baris terpisah, di mana definisi istilah sedikit menjorok. Berikut ini contohnya:

<dl>
  <dt>Roti</dt>
  <dd>Makanan panggang yang terbuat dari tepung.</dd>
  <dt>Kopi</dt>
  <dd>Minuman yang terbuat dari biji kopi panggang.</dd>
</dl>

— Output dari contoh di atas akan terlihat seperti ini:

Roti

Makanan panggang yang terbuat dari tepung.

Kopi

Minuman yang terbuat dari biji kopi panggang.