HTML ol Tag

Tutorial HTML <ol>

HTML ol Tag - belajar html ol, element ol mempunyai definisi sebagai ordered list, biasa juga disebut numbered list. Dalam penulisan di html, element <ol> selalu diikuti element html <li>, sebagai element pembuat daftar list.

Element html <ol> didalam penulisannya bisa ditulis secara berulang, tanpa adanya batasan, maksudnya di dalam element <ol> bisa ditulis lagi element <ol> lainnya, asal dalam penulisannya dilakukan dengan benar.

Secara standar element <ol> akan menghasilkan output berupa list dengan angka atau nomor, tapi dengan menggunakan tambahan attribute semua dapat dirubah sesuai dengan keinginan.

Contoh HTML <ol>

<h3>Daftar isi Buku</h3>
<ol>
  <li>Kata Pengantar</li>
  <li>Pendahuluan</li>
  <li>Pembahasan</li>
  <li>Kesimpulan</li>
  <li>Daftar pustaka</li>
</ol>

Attribute HTML <ol>

reversed

Sesuai artinya reversed berarti terbalik, jadi attribute ini digunakan untuk membalik hasil output, seperti penomeran terbalik (3, 2, 1) atau abjad list terbalik (c, b, a).

Attribut ini memiliki sifat boolean dalam penggunaannya, artinya attribute ini boleh disebutkan ataupun tidak disebutkan nilai/valuenya.

Contoh :

<h3>Daftar isi Buku</h3>
<ol reversed="reversed">
  <li>Kata Pengantar</li>
  <li>Pendahuluan</li>
  <li>Pembahasan</li>
  <li>Kesimpulan</li>
  <li>Daftar pustaka</li>
</ol>

Nilai atau value attribute ini adalah reversed

start

Attribute start digunakan untuk menentukan posisi awal dari penomoran, abjad, atau value list.

Contoh :

<ol start="5">
  <li>Daftar List 5</li>
  <li>Daftar List 6</li>
  <li>Daftar List 7</li>
  <li>Daftar List 8</li>
</ol>

Nilai atau value attribute ini adalah Nomor/angka

type

Attribute type digunakan untuk menentukan jenis keluaran output pada list yang dibuat. Nilai atau value yang dapat digunakan adalah sebagai berikut :

• 1 : menghasilkan output berupa nomor (default).
• a : menghasilkan output berupa abjad dengan huruf kecil.
• A : menghasilkan output berupa abjad dengan huruf besar.
• i : menghasilkan output berupa huruf romawi dengan huruf kecil.
• I : menghasilakan output berupa huruf romawi dengan huruf besar.

Contoh dangan type 1:

<ol type="1">
  <li>Daftar List 1</li>
  <li>Daftar List 2</li>
  <li>Daftar List 3</li>
</ol>

Contoh dangan type a:

<ol type="a">
  <li>Daftar List a</li>
  <li>Daftar List b</li>
  <li>Daftar List c</li>
</ol>

Contoh dangan type A:

<ol type="A">
  <li>Daftar List</li>
  <li>Daftar List</li>
  <li>Daftar List</li>
</ol>

Contoh dangan type i:

<ol type="i">
  <li>Daftar List</li>
  <li>Daftar List</li>
  <li>Daftar List</li>
</ol>

Contoh dangan type I:

<ol type="I">
  <li>Daftar List</li>
  <li>Daftar List</li>
  <li>Daftar List</li>
</ol>

Contoh HTML <ol> dengan kombinasi attribute

<ol reversed="reversed" type="a">
  <li>Daftar List</li>
  <li>Daftar List</li>
  <li>Daftar List</li>
  <li>Daftar List</li>
</ol>

<ol start="5" type="A">
  <li>Daftar List</li>
  <li>Daftar List</li>
  <li>Daftar List</li>
  <li>Daftar List</li>
</ol>

<ol reversed="reversed" start="5" type="I">
  <li>Daftar List</li>
  <li>Daftar List</li>
  <li>Daftar List</li>
  <li>Daftar List</li>
</ol>

Global Attributes:

Element <ol> mencakup Global Attributes HTML.

Event Attributes:

Element <ol> mencakup Event Attributes HTML.

Browser Support :

Chrome	Ya
Safari	Ya
Firefox	Ya
Opera	Ya
IE	Ya
Edge	Ya

Default CSS :

Browser yang support dengan element <ol>, mempunyai nilai default :

ol {
   display: block;
   list-style-type: decimal;
   margin-top: 1em;
   margin-bottom: 1em;
   margin-left: 0;
   margin-right: 0;
   padding-left: 40px;
}