Tag <ol> HTML mendefinisikan ordered list (daftar berurutan). Ordered list dapat berupa numerik(angka) atau abjad.
Section Artikel
Ordered List
Ordered list dibuat menggunakan tag <ol> dan setiap itemnya menggunakan tag <li>.
Item ordered list akan ditandai dengan angka secara default:
Contoh :
<!DOCTYPE html> <html> <body> <h2>An ordered HTML list</h2> <ol> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> </body> </html>
Ordered List – Tipe Atribut(penanda)
Berikut ini merupakan atribut type yang bisa digunakan di ordered list :
| Type | Deskripsi |
|---|---|
| type=”1″ | List/daftar item akan berupa angka(default) |
| type=”A” | List/daftar item akan berupa huruf besar |
| type=”a” | List/daftar item akan berupa huruf kecil |
| type=”I” | List/daftar item akan berupa angka romawi besar |
| type=”i” | List/daftar item akan berupa angka romawi kecil |
Contoh 1 – Angka(default)
<!DOCTYPE html> <html> <body> <h2>Ordered List with Numbers</h2> <ol type="1"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> </body> </html>
Contoh 2 – Huruf Besar (A,B,C, dst)
<!DOCTYPE html> <html> <body> <h2>Ordered List with Letters</h2> <ol type="A"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> </body> </html>
Contoh 3 – Huruf Kecil(a,b,c, dst)
<!DOCTYPE html> <html> <body> <h2>Ordered List with Lowercase Letters</h2> <ol type="a"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> </body> </html>
Contoh 4 -Angka Romawi Besar(I,III,III,IV,dst)
<!DOCTYPE html> <html> <body> <h2>Ordered List with Roman Numbers</h2> <ol type="I"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> </body> </html>
Contoh 5 -Angka Romawi Kecil(i,ii,iii,iv,dst)
<!DOCTYPE html> <html> <body> <h2>Ordered List with Lowercase Roman Numbers</h2> <ol type="i"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> </body> </html>
Ordered List – Angka yang di kontrol
Secara default, prdered list akan mulai menghitung dari 1. Jika kita ingin mulai menghitung dari nomor tertentu, kita bisa gunakan atribut start, seperti di bawah ini:
Contoh :
<!DOCTYPE html> <html> <body> <h2>The start attribute</h2> <p>By default, an ordered list will start counting from 1. Use the start attribute to start counting from a specified number:</p> <ol start="50"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> <ol type="I" start="50"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> </body> </html>
List HTML Bersarang
List dalam HTML bisa disarangka (daftar di dalam daftar). Lihat lah contoh berikut ini :
Contoh :
<!DOCTYPE html>
<html>
<body>
<h2>A Nested List</h2>
<p>Lists can be nested (list inside list):</p>
<ol>
<li>Coffee</li>
<li>Tea
<ol>
<li>Black tea</li>
<li>Green tea</li>
</ol>
</li>
<li>Milk</li>
</ol>
</body>
</html>
Catatan: Item list(<li>) dapat berisi daftar baru, dan elemen HTML lainnya, seperti gambar dan tautan, dll.
Rangkuman
- Gunakan elemen HTML <ol> untuk mendefnisikan ordered list
- Gunakan elemen HTML atribut type untuk mendefinisikan numbering type
- Gunakan elemen HTML <li> untuk mendefisnisikan list item
- List bisa di sarangkan (daftar di dalam daftar)
