Ordered Lists

Resep nasi goreng Budi memuat lima langkah yang urutannya menentukan hasil akhir: nasi dimasukkan setelah bumbu harum, bukan sebelumnya. Bila langkah-langkah tersebut diacak, hidangan yang dihasilkan berbeda dari resep. Untuk konten yang urutannya bermakna, HTML menyediakan ordered list melalui elemen ol. Pada Chapter ini kita mempelajari penomoran bawaan, tiga atribut yang mengatur jalannya nomor (start, reversed, type), atribut value pada li, serta dua contoh lengkap yang dapat kita jalankan sendiri.

Anatomi ol dan li #

Struktur ordered list merupakan cermin dari ul: elemen ol menjadi wadah dan setiap item dibungkus li. Perbedaannya ada pada penanda yang dirender browser:

html
<ol>
  <li>Panaskan minyak.</li>
  <li>Tumis bumbu hingga harum.</li>
</ol>

Output yang Dihasilkan:

text
Browser menampilkan dua baris bernomor:
  1. Panaskan minyak.
  2. Tumis bumbu hingga harum.

Perhatikan bahwa kita tidak menuliskan angka di dalam kode. Nomor 1 dan 2 dirender browser dari struktur daftar, sehingga ketika kita menyisipkan satu li baru di tengah, seluruh penomoran di bawahnya ikut menyesuaikan secara otomatis. Inilah keunggulan yang tidak dimiliki daftar yang nomornya diketik manual sebagai teks biasa.

Kapan Urutan Bermakna #

Kaidah pemilihnya kebalikan dari ul: gunakan ol ketika menukar posisi dua item justru mengubah makna. Konten yang lazim ditulis sebagai ol antara lain:

langkah-langkah resep, panduan pemasangan, atau tutorial,
peringkat, misalnya lima lagu teratas,
instruksi yang tahap berikutnya bergantung pada tahap sebelumnya,
agenda kegiatan yang disusun berurutan waktu.

Ketika nomor hanya menjadi dekorasi dan urutannya boleh ditukar, kembali kepada ul pada Chapter sebelumnya.

Atribut start, reversed, dan type #

Elemen ol menerima tiga atribut khusus yang mengatur perilaku penomoran. Atribut start menerima bilangan bulat dan menetapkan nilai awal hitungan, sedangkan reversed membalik arah hitungan menjadi mundur. Atribut type menetapkan bentuk penomoran dengan lima nilai yang diizinkan spesifikasi:

Nilai `type`	Bentuk penomoran	Contoh penanda
`1` (default)	Angka desimal	1. 2. 3.
`a`	Huruf kecil	a. b. c.
`A`	Huruf besar	A. B. C.
`i`	Angka romawi kecil	i. ii. iii.
`I`	Angka romawi besar	I. II. III.

Nilai start berlaku pada semua bentuk penomoran: <ol start="3" type="a"> memulai dari huruf c, bukan dari angka 3. Atribut reversed tanpa start memulai hitungan dari jumlah item, sehingga daftar berisi lima item ditandai 5, 4, 3, 2, 1. Satu atribut lagi hidup pada li: atribut value menetapkan nomor item tersebut, lalu item setelahnya melanjutkan hitungan dari nilai itu. Atribut value hanya sah ketika li berada di dalam ol; pada ul validator menolaknya dengan pesan Attribute value not allowed on element li at this point.

Contoh Lengkap: Resep Lima Langkah #

Simpan file berikut sebagai resep-nasi-goreng.html, lalu buka dengan browser:

html
resep-nasi-goreng.html
<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Resep Nasi Goreng Budi</title>
</head>
<body>
  <h1>Nasi Goreng Spesial</h1>
  <p>Resep lima langkah dari dapur Budi. Ikuti urutannya agar hasilnya matang merata.</p>
  <ol>
    <li>Panaskan minyak di atas wajan dengan api sedang.</li>
    <li>Tumis bawang merah dan bawang putih hingga harum.</li>
    <li>Masukkan nasi putih, aduk hingga tercampur rata.</li>
    <li>Tambahkan kecap manis, garam, dan merica secukupnya.</li>
    <li>Sajikan bersama telur mata sapi dan taburan bawang goreng.</li>
  </ol>
</body>
</html>

Output yang Dihasilkan:

text
Jendela browser menampilkan:
  - Judul besar "Nasi Goreng Spesial"
  - Satu paragraf pengantar
  - Lima langkah bernomor 1 sampai 5

Uraian baris-per-baris bagian yang menentukan:

Baris 9 (<h1>): judul resep sebagai heading halaman.
Baris 10 (<p>): paragraf pengantar yang menegaskan urutan perlu diikuti.
Baris 11 (<ol>): wadah daftar berurutan tanpa atribut; penomoran dimulai dari 1 secara default.
Baris 12-16 (<li>): lima langkah resep; satu langkah per li agar penomorannya satu-satu.
Baris 17 (</ol>): penutup wadah daftar.

Menghitung dari Angka Tertentu dan Mundur #

File kedua memperagakan start, type, dan reversed dalam satu halaman. Simpan sebagai atribut-ol.html:

html
atribut-ol.html
<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Atribut ol: start, type, reversed</title>
</head>
<body>
  <h1>Lampiran Materi</h1>
  <p>Bagian lanjutan dengan penomoran huruf, dihitung mulai dari huruf ketiga:</p>
  <ol start="3" type="a">
    <li>Menyimpan dokumen</li>
    <li>Mengunduh lampiran</li>
    <li>Mengirim tautan</li>
  </ol>
  <p>Lima lagu teratas pilihan Budi, dibacakan mundur menuju peringkat pertama:</p>
  <ol reversed>
    <li>Hujan di Bulan Juni</li>
    <li>Senja di Pelabuhan</li>
    <li>Rindu Berat</li>
    <li>Ombak dan Angin</li>
    <li>Jalan Pulang</li>
  </ol>
</body>
</html>

Output yang Dihasilkan:

text
Daftar pertama (start="3" type="a"):
  c. Menyimpan dokumen
  d. Mengunduh lampiran
  e. Mengirim tautan

Daftar kedua (reversed):
  5. Hujan di Bulan Juni
  4. Senja di Pelabuhan
  3. Rindu Berat
  2. Ombak dan Angin
  1. Jalan Pulang

Pada daftar pertama, browser menghitung huruf dari posisi ketiga karena start="3" diterapkan bersama type="a". Pada daftar kedua, reversed tanpa start memulai dari jumlah item, yaitu 5, lalu berkurang satu per item. Kombinasi tiga atribut ini dapat dipakai serentak pada satu ol bila kontennya memang membutuhkan.

Penomoran menyelesaikan kebutuhan urutan, tetapi belum semua konten berbentuk deret item. Glosarium misalnya memasangkan setiap istilah dengan penjelasannya; pola asosiasi itu menjadi topik Chapter Description Lists.

Referensi resmi untuk pendalaman:

Berkas Sumber

Berkas pendukung halaman ini dapat diunduh dan dijalankan langsung sesuai penjelasan di atas.

html
<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Atribut ol: start, type, reversed</title>
</head>
<body>
  <h1>Lampiran Materi</h1>
  <p>Bagian lanjutan dengan penomoran huruf, dihitung mulai dari huruf ketiga:</p>
  <ol start="3" type="a">
    <li>Menyimpan dokumen</li>
    <li>Mengunduh lampiran</li>
    <li>Mengirim tautan</li>
  </ol>
  <p>Lima lagu teratas pilihan Budi, dibacakan mundur menuju peringkat pertama:</p>
  <ol reversed>
    <li>Hujan di Bulan Juni</li>
    <li>Senja di Pelabuhan</li>
    <li>Rindu Berat</li>
    <li>Ombak dan Angin</li>
    <li>Jalan Pulang</li>
  </ol>
</body>
</html>

html
<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Resep Nasi Goreng Budi</title>
</head>
<body>
  <h1>Nasi Goreng Spesial</h1>
  <p>Resep lima langkah dari dapur Budi. Ikuti urutannya agar hasilnya matang merata.</p>
  <ol>
    <li>Panaskan minyak di atas wajan dengan api sedang.</li>
    <li>Tumis bawang merah dan bawang putih hingga harum.</li>
    <li>Masukkan nasi putih, aduk hingga tercampur rata.</li>
    <li>Tambahkan kecap manis, garam, dan merica secukupnya.</li>
    <li>Sajikan bersama telur mata sapi dan taburan bawang goreng.</li>
  </ol>
</body>
</html>