Di HTML, elemen untuk membuat daftar terurut dan tidak terurut adalah ol, ul dan li. Untuk membuat daftar terurut, Anda menggunakan elemen ol. Di dalam elemen ol ini, Anda dapat menuliskan tiap-tiap itemnya menggunakan elemen li. Secara standar, daftar terurut akan ditampilkan dengan menggunakan angka. Untuk membuat daftar tidak terurut, Anda menggunakan elemen ul.
Baca arikel Membuat Daftar Tersarang Nested List Di HTML
Di dalam elemen ul ini, Anda dapat menuliskan tiap-tiap itemnya menggunakan elemen li. Secara sstandar, daftar tidak terurut akan ditampilkan menggunakan lingkaran kecil hitam (bullet). Standar tampilan baik untuk daftar terurut maupun tidak terurut dapat dirubah menggunakan CSS. Elemen li di HTML dapat berisi teks, inline element dan juga block element.
Perlu diperhatikan juga, Anda seharusnya menerapkan daftar terurut dan tidak terurut secara logis. Sebagai contoh, penulisan daftar judul buku komputer tidak harus terurut sedangkan penulisan langkah-langkah atau cara untuk ikut program afiliasi seharusnya terurut karena ini menyangkut aturan yang harus dilaksanakan, tidak bisa satu mendahului yang lain. Berikut ini adalah tabel elemen HTML yang digunakan untuk membuat daftar terurut dan tidak terurut:
Membuat Daftar Terurut Dan Tidak Terurut Di HTML
Elemen | Keterangan |
---|---|
ul | Untuk membuat daftar tidak terurut (unordered list). |
ol | Untuk membuat daftar terurut (ordered list). |
ul | Untuk membuat daftar item (list item) di daftar terurut dan tidak terurut. |
Berikut ini adalah contoh sederhana skrip HTML untuk membuat daftar terurut (ordered list) dan daftar tidak terurut (unordered list).
<!DOCTYPE html> <html> <head> <title>Membuat Daftar Terurut Dan Tidak Terurut</title> </head> <body> <p>Daftar beberapa buku komputer yang paling laris:</p> <ul> <li>Bahasa Pemrograman Java.</li> <li>Mengenal Internet Untuk Pemula.</li> <li>Bekerja Dengan Formula Dan Fungsi Excel 2010.</li> <li>Membuat Website Dinamis Dengan CMS Joomla 3.</li> <li>Membuat Website Instan Dengan Wordpress.</li> <li>Belajar HTML5 Dan CSS3.</li> </ul> <p>Langkah-langkah untuk ikut program afiliasi di RistoHosting:</p> <ol> <li>Mendaftar secara online menggunakan form pendaftaran.</li> <li>Aktivasi pendaftaran melalui email.</li> <li>Memilih banner yang akan digunakan untuk promosi.</li> <li>Menyalin skrip banner yang telah dipilih.</li> <li>Memasang skrip banner di website atau blog.</li> </ol> </body> </html>
