Mengenal List Element dalam HTML

Home » Tutorial Web

Halo, teman-teman!

Kalian pasti pernah melihat berbagai daftar di internet, bukan? Mulai dari daftar resep masakan, langkah-langkah DIY, hingga "10 Hal yang Harus Dicoba Sebelum Usia 30." Semua itu dibuat menggunakan elemen list di HTML. Pada artikel ini, kita akan belajar cara membuat daftar menggunakan Ordered List (ol) dan Unordered List (ul). Siap? Yuk, kita mulai!

Apa Itu List Element di HTML?

Elemen list adalah cara HTML untuk membuat daftar. Ada dua jenis utama:

Unordered List (ul): Daftar tanpa urutan tertentu, biasanya dengan simbol bullet point.
Ordered List (ol): Daftar dengan urutan tertentu, biasanya diberi nomor.

Cara Membuat Unordered List

Unordered list digunakan saat urutan tidak penting, seperti daftar belanja. Berikut caranya:

Gunakan tag <ul> untuk membuka daftar.
Setiap item dalam daftar ditulis menggunakan <li>.
Tutup daftar dengan tag </ul>.

Contoh kode:

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

Hasilnya di browser akan tampak seperti ini:

Roti
Keju
Susu

Cara Membuat Ordered List

Ordered list cocok untuk menampilkan langkah-langkah atau daftar yang butuh urutan tertentu. Langkahnya:

Gunakan tag <ol> untuk membuka daftar.
Tulis setiap item dengan tag <li>.
Tutup daftar dengan tag </ol>.

Contoh kode:

<ol>
  <li>Campur bahan</li>
  <li>Panggang adonan</li>
  <li>Sajikan</li>
</ol>

Hasil di browser:

Campur bahan
Panggang adonan
Sajikan

Praktik Membuat Website Resep Sederhana

Untuk memahami lebih jauh, mari kita coba membuat halaman HTML sederhana untuk resep cinnamon roll:

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Resep Cinnamon Roll</title>
</head>
<body>
  <h1>Resep Cinnamon Roll</h1>
  <h2>Bahan-Bahan</h2>
  <h3>Dough:</h3>
  <ul>
    <li>250g Tepung</li>
    <li>50g Gula</li>
    <li>1 sdt Ragi</li>
  </ul>
  <h3>Filling:</h3>
  <ul>
    <li>50g Mentega</li>
    <li>100g Gula Coklat</li>
    <li>1 sdm Kayu Manis</li>
  </ul>
  <h2>Instruksi</h2>
  <ol>
    <li>Campurkan bahan dough hingga kalis.</li>
    <li>Diamkan adonan selama 1 jam.</li>
    <li>Gulung dengan isian, lalu panggang.</li>
  </ol>
</body>
</html>

Penjelasan

Dough dan Filling: Ditampilkan sebagai unordered list karena urutannya tidak penting.
Instruksi: Ditampilkan sebagai ordered list untuk menampilkan langkah-langkah.

Tips Tambahan

Jika ingin menambahkan elemen baru ke dalam daftar, cukup tambahkan <li> di antara tag <ul> atau <ol>.
Gunakan indentasi yang rapi untuk mempermudah membaca kode.

Selanjutnya

Pada pelajaran berikutnya, kita akan membahas nested list dan bagaimana cara membuat daftar yang lebih kompleks. Jika ada pertanyaan, jangan ragu untuk berdiskusi di kolom komentar atau forum komunitas.

Selamat mencoba! 😊