Belajar Coding Bagian 5: List Berurutan dan Tidak Berurutan dalam HTML

Pada Bagian 4, kita sudah membahas heading, paragraf, dan elemen teks.
Sekarang kita lanjut ke elemen yang sangat sering dipakai di website, yaitu list (daftar).

List digunakan untuk:

• Menyusun informasi agar rapi

  Baca juga:
  • Belajar CSS Bagian 11 : Fill Project HTML (Panduan Lengkap Mengisi Proyek Website Company Profile)
  • Belajar Coding Bagian 4: Heading, Paragraf, dan Elemen Teks HTML
  

• Membuat langkah-langkah tutorial

• Menampilkan menu

• Menuliskan poin-poin penting

📌 HTML menyediakan dua jenis list utama:

1. List Berurutan

2. List Tidak Berurutan

---

Apa Itu List dalam HTML?

List HTML adalah elemen untuk menampilkan daftar item secara terstruktur.

Setiap list berisi:

• Elemen pembungkus list (<ul> atau <ol>)

• Item list (<li>)

---

List Tidak Berurutan (<ul>)

List tidak berurutan digunakan jika urutan tidak penting.

Ciri-ciri:

• Menggunakan bullet (•)

• Tidak ada nomor

Contoh Dasar List Tidak Berurutan

<ul> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ul> 

Hasilnya:

• HTML

• CSS

• JavaScript

---

Kapan Menggunakan <ul>?

Gunakan <ul> untuk:

• Daftar fitur

• Menu navigasi

• Daftar bahan

• Daftar kategori

📌 Urutan tidak memengaruhi makna

---

List Berurutan (<ol>)

List berurutan digunakan jika urutan penting.

Ciri-ciri:

• Menggunakan angka / huruf

• Memiliki tahapan atau urutan

Contoh Dasar List Berurutan

<ol> <li>Buka file HTML</li> <li>Tulis struktur dasar</li> <li>Simpan dan buka di browser</li> </ol> 

Hasilnya:

1. Buka file HTML

2. Tulis struktur dasar

3. Simpan dan buka di browser

 

---

Kapan Menggunakan <ol>?

Gunakan <ol> untuk:

• Langkah tutorial

• Prosedur kerja

• Alur proses

• Instruksi berurutan

📌 Urutan memengaruhi pemahaman

---

Tag <li> (List Item)

Tag <li> digunakan untuk setiap item daftar, baik di <ul> maupun <ol>.

<li>Item list</li> 

📌 <li> harus berada di dalam <ul> atau <ol>

❌ Salah:

<li>Item</li> 

---

List Bersarang (Nested List)

HTML mendukung list di dalam list.

Contoh List Bersarang

<ul> <li>Frontend <ul> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ul> </li> <li>Backend</li> </ul> 

📌 Sangat berguna untuk:

• Struktur menu

• Materi bertingkat

• Daftar hierarki

---

Mengubah Tipe List Berurutan

List berurutan bisa menggunakan atribut type.

<ol type="A"> <li>Langkah Pertama</li> <li>Langkah Kedua</li> </ol> 

Jenis type:

• 1 → angka (default)

• A → huruf besar

• a → huruf kecil

• I → angka romawi

• i → romawi kecil

---

Contoh Gabungan List Lengkap

  <h2>Belajar Web</h2>
    <ul>
        <li>Dasar <ol>
                <li>HTML</li>
                <li>CSS</li>
            </ol>
        </li>
        <li>Lanjutan <ol>
                <li>JavaScript</li>
                <li>Framework</li>
            </ol>
        </li>
    </ul>

 

 

---

Kesalahan Umum Pemula

❌ <li> di luar <ul> / <ol>
❌ Menggunakan <ol> padahal tidak berurutan
❌ Struktur list tidak rapi
❌ Terlalu banyak list tanpa kejelasan

---

Ringkasan

✔ <ul> untuk list tidak berurutan
✔ <ol> untuk list berurutan
✔ <li> sebagai item list
✔ List bisa bersarang
✔ List membuat konten lebih rapi & mudah dibaca

---

Penutup

Di Bagian 5, kamu telah mempelajari:

• List berurutan (<ol>)

• List tidak berurutan (<ul>)

• List bersarang

• Penggunaan yang tepat di website