Ordered List (ol)

Ordered List (ol) 🔢

Ordered list adalah cara menampilkan daftar item yang memiliki urutan atau prioritas. Berbeda dengan unordered list yang menggunakan bullet, ordered list menggunakan angka, huruf, atau angka romawi sebagai penanda urutan.

Struktur Dasar

Ordered list dibentuk oleh dua tag yang bekerja bersama:

• <ol> — pembungkus keseluruhan daftar (ordered list)
• <li> — setiap item di dalam daftar (list item)

<ol>
  <li>Siapkan bahan-bahan</li>
  <li>Panaskan oven hingga 180 derajat</li>
  <li>Campurkan semua bahan</li>
  <li>Masukkan ke dalam oven selama 30 menit</li>
  <li>Sajikan selagi hangat</li>
</ol>

Hasilnya di browser:

1. Siapkan bahan-bahan
2. Panaskan oven hingga 180 derajat
3. Campurkan semua bahan
4. Masukkan ke dalam oven selama 30 menit
5. Sajikan selagi hangat

Browser otomatis menambahkan angka urut — tidak perlu ditulis manual.

Atribut type — Mengubah Jenis Penomoran

Secara default <ol> menggunakan angka arab (1, 2, 3...). Atribut type memungkinkan mengubahnya:

<!-- Angka arab — default -->
<ol type="1">
  <li>Item pertama</li>
  <li>Item kedua</li>
  <li>Item ketiga</li>
</ol>

<!-- Huruf kecil -->
<ol type="a">
  <li>Item pertama</li>
  <li>Item kedua</li>
  <li>Item ketiga</li>
</ol>

<!-- Huruf kapital -->
<ol type="A">
  <li>Item pertama</li>
  <li>Item kedua</li>
  <li>Item ketiga</li>
</ol>

<!-- Angka romawi kecil -->
<ol type="i">
  <li>Item pertama</li>
  <li>Item kedua</li>
  <li>Item ketiga</li>
</ol>

<!-- Angka romawi kapital -->
<ol type="I">
  <li>Item pertama</li>
  <li>Item kedua</li>
  <li>Item ketiga</li>
</ol>

Hasilnya masing-masing:

type="1"    type="a"    type="A"    type="i"     type="I"
1. Item     a. Item     A. Item     i.   Item     I.   Item
2. Item     b. Item     B. Item     ii.  Item     II.  Item
3. Item     c. Item     C. Item     iii. Item     III. Item

Atribut start — Mulai dari Angka Tertentu

Secara default list dimulai dari 1. Atribut start mengubah angka awal:

<!-- Mulai dari angka 5 -->
<ol start="5">
  <li>Item kelima</li>
  <li>Item keenam</li>
  <li>Item ketujuh</li>
</ol>

Hasilnya:

5. Item kelima
6. Item keenam
7. Item ketujuh

Berguna misalnya saat membagi satu daftar panjang menjadi beberapa bagian terpisah namun penomorannya tetap bersambung.

Atribut reversed — Urutan Terbalik

Atribut reversed membuat penomoran dari besar ke kecil — berguna untuk daftar peringkat atau countdown:

<h3>Top 5 Bahasa Pemrograman Terpopuler</h3>

<ol reversed>
  <li>JavaScript</li>
  <li>Python</li>
  <li>Java</li>
  <li>C++</li>
  <li>PHP</li>
</ol>

Hasilnya:

5. JavaScript
4. Python
3. Java
2. C++
1. PHP

Atribut value pada <li> — Mengatur Nomor Spesifik

Setiap <li> bisa diberi atribut value untuk menentukan nomornya secara manual. Item berikutnya akan melanjutkan dari nomor tersebut:

<ol>
  <li value="1">Item pertama</li>
  <li value="5">Item ini bernomor 5</li>
  <li>Item ini otomatis bernomor 6</li>
  <li>Item ini otomatis bernomor 7</li>
</ol>

Hasilnya:

1. Item pertama
5. Item ini bernomor 5
6. Item ini otomatis bernomor 6
7. Item ini otomatis bernomor 7

Nested List — List di Dalam List

<ol> bisa bersarang di dalam <li> untuk membuat sub-daftar bertingkat:

<ol>
  <li>Front-end Development
    <ol type="a">
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
    </ol>
  </li>
  <li>Back-end Development
    <ol type="a">
      <li>Node.js</li>
      <li>Python</li>
      <li>PHP</li>
    </ol>
  </li>
  <li>Database
    <ol type="a">
      <li>MySQL</li>
      <li>MongoDB</li>
    </ol>
  </li>
</ol>

Hasilnya:

1. Front-end Development
   a. HTML
   b. CSS
   c. JavaScript
2. Back-end Development
   a. Node.js
   b. Python
   c. PHP
3. Database
   a. MySQL
   b. MongoDB

Kombinasi <ol> dan <ul>

Nested list tidak harus sesama jenis — <ol> dan <ul> bisa dikombinasikan:

<ol>
  <li>Persiapan Bahan
    <ul>
      <li>Tepung terigu 500 gram</li>
      <li>Gula pasir 200 gram</li>
      <li>Telur 3 butir</li>
    </ul>
  </li>
  <li>Proses Pembuatan
    <ul>
      <li>Campur semua bahan kering</li>
      <li>Tambahkan telur dan aduk rata</li>
    </ul>
  </li>
  <li>Proses Pemanggangan</li>
</ol>

Hasilnya:

1. Persiapan Bahan
   • Tepung terigu 500 gram
   • Gula pasir 200 gram
   • Telur 3 butir
2. Proses Pembuatan
   • Campur semua bahan kering
   • Tambahkan telur dan aduk rata
3. Proses Pemanggangan

Mengubah Tampilan dengan CSS

Tampilan default ordered list bisa dikustomisasi sepenuhnya dengan CSS:

<style>
  /* Menghilangkan style default */
  ol {
    list-style: none;
    padding: 0;
    counter-reset: nomor-saya;  /* inisialisasi counter kustom */
  }

  li {
    counter-increment: nomor-saya;
    padding: 10px 15px;
    margin-bottom: 8px;
    background-color: #f0f4ff;
    border-radius: 6px;
    border-left: 4px solid #4a9eed;
  }

  /* Menambahkan nomor kustom sebelum setiap item */
  li::before {
    content: counter(nomor-saya) ". ";
    font-weight: bold;
    color: #4a9eed;
  }
</style>

<ol>
  <li>Pelajari HTML terlebih dahulu</li>
  <li>Lanjutkan dengan CSS</li>
  <li>Kemudian kuasai JavaScript</li>
</ol>

Kapan Menggunakan Ordered List?

Langkah-langkah / tutorial          →  <ol>
Peringkat / ranking                  →  <ol>
Daftar prioritas                     →  <ol>
Instruksi yang harus berurutan       →  <ol>
Daftar tanpa urutan berarti          →  <ul> (bukan ol)

Kesalahan Umum Pemula

<!-- SALAH — li di luar ol/ul -->
<li>Item tanpa pembungkus</li>

<!-- SALAH — elemen lain langsung di dalam ol -->
<ol>
  <p>Ini salah</p>
  <li>Item benar</li>
</ol>

<!-- BENAR — li hanya di dalam ol atau ul -->
<ol>
  <li>Item pertama</li>
  <li>Item kedua</li>
</ol>

Tag <li> hanya boleh berada di dalam <ol> atau <ul> — tidak boleh berdiri sendiri atau langsung di dalam elemen lain.

Ringkasan Atribut

💡 Tips: Gunakan <ol> setiap kali urutan benar-benar penting — seperti langkah instalasi, resep memasak, atau panduan troubleshooting. Jika urutan tidak relevan, gunakan <ul>. Pilihan yang tepat antara keduanya mencerminkan pemahaman semantik HTML yang baik. 🎯