Membuat List dalam HTML: Ordered List dan Unordered List

Dalam HTML (Hypertext Markup Language), kita bisa membuat tampilan berupa list (daftar). Contoh penggunaan list (daftar) yaitu: daftar menu, daftar isi, langkah-langkah, petunjuk, dll. List dibedakan menjadi beberapa macam, yang paling sederhana yaitu ordered list (daftar terurut) dan unordered list (daftar tidak terurut). Tag yang digunakan yaitu <ol>, <ul>, dan <li>. Berikut penjabarannya:

1. Ordered List

Ordered List digunakan untuk membuat daftar yang memiliki urutan. Contohnya yaitu: langkah-langkah, daftar isi, daftar siswa, susunan acara, dll. Tag yang digunakan untuk membuat ordered list yaitu <ol> - </ol>, dan untuk membuat isi dari list menggunakan elemen <li> - </li>.

Contoh penggunaan ordered list pada HTML

Hasil pada browser

Default dari ordered list yaitu berupa angka 1, 2, 3 dst. Kita bisa mengubahnya menjadi bentuk lain seperti A, a, i, dengan menambahkan atribut "type" pada tag <ol>. Contoh:

<ol type="a">...</ol>

maka hasilnya menjadi

atau

<ol type="i">...</ol>

maka hasilnya menjadi

Untuk mengubah nilai awal, kita bisa menambahkan atribut "start" pada tag <ol>. Contoh:

<ol start="10">...</ol>

hasilnya adalah

2. Unordered List

Unordered list digunakan untuk membuat daftar yang tidak terurut. Contoh penggunaannya misalnya pada daftar menu, daftar barang, dll. Tag yang digunakan untuk membuat unordered list yaitu <ul> - </ul>, dan untuk membuat isi dari list menggunakan elemen <li> - </li>.

Contoh penggunaan unordered list pada HTML

Hasilnya pada browser menjadi

Default unordered list yaitu berupa disc/bulatan hitam. Kita bisa mengubahnya menjadi bentuk lain seperti circle, square, dan line, dengan menambahkan attribut "type" pada tag <ul>. Contoh:

<ul type="circle">

maka hasilnya menjadi