Ordered List `<ol>`: Membuat List Berurutan di HTML

Artikel ini merupakan bagian dari seri Belajar HTML untuk Pemula di hanifmu.com. Sebelumnya kita sudah membahas relative vs absolute path. Sekarang kita lanjut ke tag <ol> untuk membuat list berurutan.

Apa itu Ordered List?

Ordered list adalah list di mana setiap item punya nomor urut. HTML punya tag <ol> untuk ini.

Pakai ordered list untuk:

• Langkah-langkah tutorial
• Proses berurutan
• Peringkat atau ranking
• Daftar kronologis

Struktur Dasar Ordered List

Tag <ol> jadi container, item list pakai tag <li>:

<ol>
  <li>Langkah pertama</li>
  <li>Langkah kedua</li>
  <li>Langkah ketiga</li>
</ol>

Hasilnya:

1. Langkah pertama
2. Langkah kedua
3. Langkah ketiga

Attribute type pada Ordered List

Attribute type mengatur jenis numbering. HTML support beberapa jenis:

Type=“1” (Default)

Angka Arab. Ini default kalau tidak pakai attribute type:

<ol type="1">
  <li>Item pertama</li>
  <li>Item kedua</li>
  <li>Item ketiga</li>
</ol>

Output:

1. Item pertama
2. Item kedua
3. Item ketiga

Type=“a”

Huruf kecil:

<ol type="a">
  <li>Item pertama</li>
  <li>Item kedua</li>
  <li>Item ketiga</li>
</ol>

Output: a. Item pertama b. Item kedua c. Item ketiga

Type=“A”

Huruf besar:

<ol type="A">
  <li>Item pertama</li>
  <li>Item kedua</li>
  <li>Item ketiga</li>
</ol>

Output: A. Item pertama B. Item kedua C. Item ketiga

Type=“i”

Angka Romawi kecil:

<ol type="i">
  <li>Item pertama</li>
  <li>Item kedua</li>
  <li>Item ketiga</li>
</ol>

Output: i. Item pertama ii. Item kedua iii. Item ketiga

Type=“I”

Angka Romawi besar:

<ol type="I">
  <li>Item pertama</li>
  <li>Item kedua</li>
  <li>Item ketiga</li>
</ol>

Output: I. Item pertama II. Item kedua III. Item ketiga

Attribute start

Attribute start mengatur nomor awal list:

<ol start="5">
  <li>Item kelima</li>
  <li>Item keenam</li>
  <li>Item ketujuh</li>
</ol>

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

Bisa dikombinasikan dengan attribute type:

<ol type="a" start="3">
  <li>Item ketiga</li>
  <li>Item keempat</li>
</ol>

Output: c. Item ketiga d. Item keempat

Attribute reversed

Attribute reversed bikin list dihitung mundur dari yang terbesar:

<ol reversed>
  <li>Item pertama</li>
  <li>Item kedua</li>
  <li>Item ketiga</li>
</ol>

Output: 3. Item pertama 2. Item kedua

1. Item ketiga

Nested Ordered List

Nested ordered list artinya list di dalam list. Tambah tag <ol> di dalam <li>:

<ol>
  <li>
    Langkah pertama
    <ol>
      <li>Sub langkah 1a</li>
      <li>Sub langkah 1b</li>
    </ol>
  </li>
  <li>
    Langkah kedua
    <ol>
      <li>Sub langkah 2a</li>
      <li>Sub langkah 2b</li>
    </ol>
  </li>
</ol>

Output:

1. Langkah pertama
   1. Sub langkah 1a
   2. Sub langkah 1b
2. Langkah kedua
   1. Sub langkah 2a
   2. Sub langkah 2b

Nested dengan Type Berbeda

Type bisa beda untuk nested list:

<ol type="A">
  <li>
    Langkah pertama
    <ol type="a">
      <li>Sub langkah a</li>
      <li>Sub langkah b</li>
    </ol>
  </li>
  <li>
    Langkah kedua
    <ol type="a">
      <li>Sub langkah a</li>
      <li>Sub langkah b</li>
    </ol>
  </li>
</ol>

Output: A. Langkah pertama a. Sub langkah a b. Sub langkah b B. Langkah kedua a. Sub langkah a b. Sub langkah b

Contoh Penggunaan Praktis

Tutorial Memasak

<ol>
  <li>
    Siapkan bahan
    <ol>
      <li>250 gram tepung terigu</li>
      <li>100 gram gula pasir</li>
      <li>2 butir telur</li>
    </ol>
  </li>
  <li>
    Campur bahan kering
    <ol>
      <li>Ayak tepung terigu</li>
      <li>Tambahkan gula pasir</li>
    </ol>
  </li>
  <li>
    Masukkan bahan basah
    <ol>
      <li>Pecahkan telur ke dalam campuran</li>
      <li>Aduk hingga rata</li>
    </ol>
  </li>
</ol>

Urutan Prioritas

<ol type="1">
  <li>Selesaikan tugas mendesak</li>
  <li>Reply email penting</li>
  <li>Siapkan presentasi</li>
  <li>Review kode</li>
</ol>

Ringkasan

• <ol> untuk ordered list (list berurutan)
• Item pakai tag <li>
• Attribute type: 1, a, A, i, I
• Attribute start untuk nomor awal
• Attribute reversed untuk hitung mundur
• Nested list: tambah <ol> di dalam <li>

Langkah Selanjutnya

Kita sudah bahas ordered list. Lanjut ke unordered list <ul> di artikel berikutnya.