Elemen List

List atau daftar di HTML digunakan untuk menampilkan kumpulan item. Ada tiga jenis utama list di HTML:

📋 1. Ordered List (<ol>)

List yang terurut dan bernomor.

<ol>
  <li>Bangun tidur</li>
  <li>Sholat subuh</li>
  <li>Olahraga</li>
</ol>

Output:

1. Bangun tidur
2. Sholat subuh
3. Olahraga

📎 2. Unordered List (<ul>)

List tak terurut, biasanya pakai bullet (•).

<ul>
  <li>Roti</li>
  <li>Keju</li>
  <li>Susu</li>
</ul>

Output:

• Roti
• Keju
• Susu

🔢 3. Description List (<dl>)

List deskriptif yang berisi istilah dan penjelasannya.

<dl>
  <dt>HTML</dt>
  <dd>Bahasa markup untuk membuat halaman web</dd>
  <dt>CSS</dt>
  <dd>Digunakan untuk mengatur tampilan halaman web</dd>
</dl>

✨ Atribut Tambahan pada List

Ordered List

• type: menentukan tipe penomoran (1, A, a, I, i)
• start: menentukan angka awal
• reversed: membalik urutan list

Contoh:

<ol type="A" start="3" reversed>
  <li>Item C</li>
  <li>Item B</li>
  <li>Item A</li>
</ol>

Unordered List

Tidak punya atribut khusus selain bisa dikustomisasi dengan CSS (misalnya ganti bullet jadi ikon).

🎨 Styling List dengan CSS

<style>
  ul.custom {
    list-style-type: square;
  }

  ol.custom {
    list-style-type: upper-roman;
  }
</style>

<ul class="custom">
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

🧼 Best Practice

• Gunakan <ol> jika urutan penting (misal langkah-langkah)
• Gunakan <ul> jika hanya daftar item biasa
• Gunakan <dl> untuk istilah atau glossary
• Gunakan CSS untuk mengatur tampilan bullet/angka agar lebih menarik

🎯 Kesimpulan

List membantu menyajikan informasi secara rapi dan terstruktur. Pilih jenis list yang sesuai dengan konteks informasi yang ingin disampaikan.

List yang baik bikin pembaca gak pusing nyari info! 📝