Dalam HTML, elemen <ol> (ordered list) digunakan untuk membuat daftar yang memiliki urutan atau tingkatan tertentu. Setiap item dalam daftar didefinisikan menggunakan <li> (list item). Secara default, daftar berurutan menggunakan angka (1, 2, 3, …) untuk menandai setiap item, tetapi dapat dikustomisasi menjadi huruf (A, B, C, …), angka Romawi (I, II, III, …), atau format lain menggunakan atribut type.

Daftar berurutan sangat berguna dalam berbagai situasi, seperti menyusun langkah-langkah dalam tutorial, daftar prioritas, petunjuk penggunaan, atau daftar peringkat. Tidak seperti daftar tidak berurutan (<ul>), di mana urutan tidak menjadi prioritas, daftar berurutan menampilkan informasi yang memerlukan urutan logis, sehingga pembaca dapat mengikuti langkah-langkah dengan jelas.

Contoh Penggunaan <ol> dan <li>

1. Daftar Langkah-langkah dalam Tutorial

<ol>
  <li>Buka aplikasi browser.</li>
  <li>Ketik alamat website di bilah pencarian.</li>
  <li>Tekan tombol Enter untuk memuat halaman.</li>
  <li>Jelajahi konten yang tersedia di website.</li>
</ol>

Penjelasan: Daftar ini menunjukkan langkah-langkah yang harus diikuti dalam urutan yang benar.

2. Daftar Peringkat Juara Kompetisi

<ol>
  <li>Tim A</li>
  <li>Tim B</li>
  <li>Tim C</li>
</ol>

Penjelasan: Daftar ini menampilkan peringkat juara dari sebuah kompetisi, dengan urutan berdasarkan peringkat.

3. Daftar Resep Memasak

<ol>
  <li>Siapkan semua bahan yang diperlukan.</li>
  <li>Panaskan minyak di dalam wajan.</li>
  <li>Masukkan bumbu dan tumis hingga harum.</li>
  <li>Tambahkan bahan utama dan masak hingga matang.</li>
  <li>Sajikan di atas piring dan hidangkan.</li>
</ol>

Penjelasan: Daftar ini memberikan instruksi langkah demi langkah dalam memasak suatu hidangan.

4. Daftar Berurutan dengan Huruf (Menggunakan type="A")

<ol type="A">
  <li>Persiapan Awal</li>
  <li>Pengumpulan Data</li>
  <li>Analisis Hasil</li>
  <li>Pembuatan Laporan</li>
</ol>

Penjelasan: Menggunakan atribut type="A", daftar ditampilkan dengan huruf kapital sebagai penomoran.

5. Daftar Berurutan dengan Angka Romawi (Menggunakan type="I")

<ol type="I">
  <li>Pengenalan</li>
  <li>Metode Penelitian</li>
  <li>Hasil dan Pembahasan</li>
  <li>Kesimpulan</li>
</ol>

Penjelasan: Daftar ini menggunakan angka Romawi (I, II, III, IV, ...) untuk menampilkan urutan yang lebih formal.

Dengan memahami penggunaan <ol> dan <li>, kita dapat membuat daftar yang lebih jelas, terstruktur, dan mudah dipahami oleh pembaca.