Daftar atau List

Dalam HTML, daftar atau list digunakan untuk menampilkan informasi secara terstruktur. Terdapat dua jenis daftar utama: terurut (ordered list) dan tidak terurut (unordered list).

Daftar Tidak Terurut (Unordered List – ul)

• Fungsi: Menampilkan item daftar dengan bullet points (tanda titik, lingkaran, atau kotak) tanpa urutan tertentu.
• Struktur Dasar:
  <ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</li>
  • Setiap item di dalam <ul> harus dibungkus dengan tag <li> (list item).
  • Atribut type (opsional):
    Mengubah gaya bullet:
    • type="disc" (bullet lingkaran penuh – default),
    • type="circle" (lingkaran kosong),
    • type="square" (kotak).
      Contoh: <ul type="square">
• Contoh Penggunaan:
  Daftar belanja, menu navigasi, atau poin-poin penjelasan yang tidak memerlukan urutan.

Daftar Terurut (Ordered List – ol)

• Fungsi: Menampilkan item daftar dengan nomor, huruf, atau angka Romawi yang berurutan.
• Struktur Dasar:
  <ol>
<li>Langkah Pertama</li>
<li>Langkah Kedua</li>
<li>Langkah Ketiga</li>
</ol>
  • Atribut Penting:
    1. type: Menentukan jenis penomoran:
       • type="1" (angka – default),
       • type="A" (huruf kapital),
       • type="a" (huruf kecil),
       • type="I" (angka Romawi kapital),
       • type="i" (angka Romawi kecil).
         Contoh: <ol type="A">
    2. start: Menentukan nilai awal penomoran.
       Contoh: <ol start="5"> (dimulai dari angka 5).
    3. reversed: Membalik urutan penomoran (misal: 5, 4, 3…).
       Contoh: <ol reversed>
• Contoh Penggunaan:
  Langkah-langkah memasak, daftar peringkat, atau instruksi yang memerlukan urutan.

Daftar Bersarang (Nested List)

Kedua jenis daftar ini bisa digabungkan atau dibuat bersarang untuk struktur yang lebih kompleks.
Contoh:

<ul>
  <li>Buah-buahan:
    <ol>
      <li>Apel</li>
      <li>Mangga</li>
    </ol>
  </li>
  <li>Sayuran:
    <ul>
      <li>Bayam</li>
      <li>Wortel</li>
    </ul>
  </li>
</ul>

• Hasilnya akan menampilkan daftar bertingkat dengan bullet dan nomor.

Best Practices

• Pastikan struktur hierarki benar saat membuat daftar bersarang untuk menghindari error.
• Gunakan <ul> untuk informasi yang tidak memerlukan urutan, seperti menu navigasi atau daftar fitur.
• Gunakan <ol> untuk langkah prosedural atau data berurutan, seperti resep atau tutorial.
• Hindari penggunaan atribut type pada <ul> (lebih baik styling dengan CSS untuk konsistensi desain).

Sumber : DeepSeek