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>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Demo Triksonic</title> </head> <body> <h3>Daftar isi Buku</h3> <ol> <li>Kata Pengantar</li> <li>Pendahuluan</li> <li>Pembahasan</li> <li>Kesimpulan</li> <li>Daftar pustaka</li> </ol> </body> </html>
Attribute HTML <ol>
reversedSesuai 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>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Demo Triksonic</title> </head> <body> <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> </body> </html>
startAttribute 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>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Demo Triksonic</title> </head> <body> <ol> <li>Daftar List 1</li> <li>Daftar List 2</li> <li>Daftar List 3</li> <li>Daftar List 4</li> </ol> <ol start="5"> <li>Daftar List 5</li> <li>Daftar List 6</li> <li>Daftar List 7</li> <li>Daftar List 8</li> </ol> </body> </html>
typeAttribute
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>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Demo Triksonic</title> </head> <body> <ol type="1"> <li>Daftar List 1</li> <li>Daftar List 2</li> <li>Daftar List 3</li> </ol> </body> </html>
Contoh dangan type a:
<ol type="a">
<li>Daftar List a</li>
<li>Daftar List b</li>
<li>Daftar List c</li>
</ol>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Demo Triksonic</title> </head> <body> <ol type="a"> <li>Daftar List a</li> <li>Daftar List b</li> <li>Daftar List c</li> </ol> </body> </html>
Contoh dangan type A:
<ol type="A">
<li>Daftar List</li>
<li>Daftar List</li>
<li>Daftar List</li>
</ol>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Demo Triksonic</title> </head> <body> <ol type="A"> <li>Daftar List</li> <li>Daftar List</li> <li>Daftar List</li> </ol> </body> </html>
Contoh dangan type i:
<ol type="i">
<li>Daftar List</li>
<li>Daftar List</li>
<li>Daftar List</li>
</ol>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Demo Triksonic</title> </head> <body> <ol type="i"> <li>Daftar List</li> <li>Daftar List</li> <li>Daftar List</li> </ol> </body> </html>
Contoh dangan type I:
<ol type="I">
<li>Daftar List</li>
<li>Daftar List</li>
<li>Daftar List</li>
</ol>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Demo Triksonic</title> </head> <body> <ol type="I"> <li>Daftar List</li> <li>Daftar List</li> <li>Daftar List</li> </ol> </body> </html>
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>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Demo Triksonic</title> </head> <body> <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> </body> </html>
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;
}