Ordered List

Beberapa daftar hidup dari urutannya. Langkah menyeduh kopi yang dibalik menghasilkan minuman berbeda; ranking tiga besar lomba seduh yang ditukar menukar menunjuk pemenang yang keliru. Ketika urutan memengaruhi makna, wadahnya bukan ul, melainkan ol.

Chapter ini membahas mekanisme penomoran otomatis pada ol, tiga atribut pengatur urutan — start, reversed, dan type — beserta contoh dan bedahnya.

Aturan Dasar ol #

Elemen ol (ordered list) menampung daftar yang urutannya bermakna. Aturan isinya sama dengan ul: child langsung hanya boleh li. Perbedaannya ada pada penanda — browser memberi nomor pada tiap li menurut posisinya, bukan bulatan.

Mekanisme di balik layar: nomor tidak kita ketik manual. Browser menghitung nomor dari posisi tiap li, sehingga ketika sebuah langkah baru disisipkan di tengah, semua nomor setelahnya bergeser sendiri. Tidak ada nomor yang perlu diperbarui satu per satu. Berikut langkah menyeduh kopi tubruk:

<ol>
  <li>Masukkan dua sendok kopi bubuk ke dalam cangkir.</li>
  <li>Tuang air panas hingga tiga perempat cangkir.</li>
  <li>Aduk sepuluh detik, lalu diamkan dua menit.</li>
</ol>

Hasil Render:

Mari kita telaah kode di atas:

1. Baris 1 (<ol>): wadah daftar bernomor; urutan li di dalamnya dibaca sebagai urutan yang bermakna.
2. Baris 2-4 (<li>...</li>): tiga langkah; nomor 1 sampai 3 disisipkan browser menurut posisi masing-masing butir.
3. Sisipan langkah baru: bila langkah “saring ampas” ditambahkan di posisi kedua, langkah setelahnya otomatis menjadi 3 dan 4 — tanpa mengedit satu nomor pun.

Tiga Atribut ol #

Penomoran bisa diatur lewat tiga atribut pada tag pembuka ol:

Atribut start berguna ketika penomoran harus dimulai dari angka tertentu — misalnya melanjutkan daftar yang terputus oleh penggalan paragraf:

<ol start="5">
  <li>Siti</li>
  <li>Dewi</li>
  <li>Budi</li>
</ol>

Hasil Render:

Atribut reversed membalik arah hitungan. Urutan penulisan butir tetap dari atas ke bawah, tetapi nomor menurun:

<ol reversed>
  <li>Budi</li>
  <li>Siti</li>
  <li>Dewi</li>
</ol>

Hasil Render:

Atribut type mengganti gaya penandanya. Pola ini sering dipakai untuk lampiran dokumen yang berlabel huruf:

<ol type="a">
  <li>Timbangan kopi</li>
  <li>Termometer air</li>
</ol>
<ol type="I">
  <li>Persiapan</li>
  <li>Penyeduhan</li>
</ol>

Hasil Render:

Mari kita telaah contoh type di atas:

1. type="a": butir dilabeli huruf kecil berurutan — a, b, c.
2. type="I": butir dilabeli angka Romawi besar — I, II, III.
3. Nilai lain: 1 (bawaan), A (huruf besar), dan i (angka Romawi kecil).

Ringkasan #

• ol untuk daftar yang urutannya bermakna; child langsungnya tetap hanya li.
• Nomor dihitung otomatis dari posisi butir; sisipan baru tidak merusak penomoran.
• start mengatur nomor awal, reversed menghitung turun, type mengganti gaya penanda.
• Pilihan type didasarkan makna konten, bukan keinginan tampilan.

Chapter berikutnya meninggalkan pola butir tunggal: description list, daftar yang memasangkan istilah dengan deskripsinya.