Daftar terurut (ordered list) dan daftar tidak terurut (unordered list). Dalam setiap bacaan baik itu online atau pun cetak biasanya ada daftar dari suatu hal yang diurutkan berdasarkan kelompok atau bagian tertentu. HTML mempunyai elemen khusus untuk menampilkan daftar-daftar yang ingin ditampilkan.
Unordered List
Kita mulai dengan salah satu jenis yang paling umum digunakan, yaitu daftar yang tidak diurutkan (unordered list). Pembuatan list ini dengan membuat tag awal <ul> dan diakhiri dengan tag penutup </ul>.
<ul></ul>
Sekarang kita memiliki satu elemen baris seperti ini dimana kita bisa menambahkan beberapa konten di antara <ul> </ul>. Namun penulisan elemen list sedikit berbeda, keduanya sebenarnya berada pada baris terpisah karena di antara kedua tag pambuka dan tag penutup, kita memerlukan tag tambahan untuk melengkapi daftar yang tidak berurutan ini. Dan ini disebut dengan list item <li></li> untuk menampung satu konten di dalamnya.
<ul>
<li>Apel</li>
<li>Jeruk</li>
<li>Mangga</li>
</ul>
Dapat dilihat bahwa ada tiga daftar item (list item) dan masing-masing memiliki konten di dalamnya. Dan, ketiga item tersebut terlampir dalam daftar yang tidak berutan (unordered list) dengan tag <ul></ul>. Jadi, agar daftar apa pun dapat berfungsi dan menampilkan konten, kita harus menambahkan list item ke dalamnya. Lalu seperti apa tampilannya jika kode tersebut dijalankan?
- Apel
- Jeruk
- Mangga
Pada dasarya, list item yang tidak berurutan secara default akan membuat poin-poin dengan tipe circle. Seperti daftar buah diatas, bisa kita tulis jika dianggap semua item list tidak memerlukan pengurutan atau tanda spesial item di dalam daftarnya. Jadi itulah mengapa daftar yang tidak berurutan akan lebih baik menggunakan unordered list. Namun pada kasus lain, jika membutuhkan item daftar yang harus diatur dalam urutan tertentu, maka harus menggunakan ordered list.
Ordered List
Untuk membuat item list dengan berurutan atau menampilkan penomoran di setiap itemnya kita gunakan elemen ordered list dengan tag:
<ol></ol>
Penulisan setiap item listnya sama dengan unordered list seperti contoh berikut:
<ol>
<li>Apel</li>
<li>Jeruk</li>
<li>Mangga</li>
</ol>
Dan setelah menambahkan konten list item di dalamnya, maka hasil yang ditampilkanya adalah nomor di samping list item yang ada secara berurutan.
- Apel
- Jeruk
- Apel
Jadi, jika kita membandingkan daftar terurut, elemen <ol> akan memberi kita angka, sedangkan elemen <ul> akan memberikan daftar tidak terurut yang hanya memberi poin-poin di tiap listnya.