tRikSonic
Tema
  • Original
  • Translate

HTML ol Tag

Terakhir diperbarui : 23 Mei 2018 - 09.31

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.
background html
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>

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>
<!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>
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>
<!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>
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>
<!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 :

ChromeYa
SafariYa
FirefoxYa
OperaYa
IEYa
EdgeYa

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;
}
X
Run
Klik tombol Run, untuk menampilkan hasil editing, atau menyegarkan editor.