HTML

Ordered List di HTML: Contoh Sintak dan Membuatnya

Tag <ol> HTML mendefinisikan ordered list (daftar berurutan). Ordered list dapat berupa numerik(angka) atau abjad.

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 :

TypeDeskripsi
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)

Hanifah Nurbaeti

Share
Tags: html