HTML ol tag | belajar <ol> element

HTML Fadlullah Fadul December 3, 2018

Referensi Belajar HTML ol tag. Tutorial dan panduan mengenai element <ol>...</ol> yang digunakan untuk menulis daftar item. Mencakup pembahasan lebih detail dan lengkap yang disertai contoh kode penggunaan sebagai rujukan untuk materi belajar HTML elemen <ol>.

Deskripsi
Penjelasan HTML ol tag

Ol menunjukkan sebuah ordered list, yaitu daftar (list) beberapa item yang terstruktur atau berurutan. Sehingga, apabila item-item tersebut diubah urutannya, maka makna yang tersirat dalam dokumen tersebut pun ikut berubah.

Item-item daftar tersebut, ditulis di dalam element <li> yang menunjukkan list item. Kemudian, <li> ditulis didalam elemen <ol>.

HTML <ol> element digunakan apabila kita memiliki beberapa item teks atau konten yang ingin diurutkan berdasarkan penomoran otomatis (misalnya, item-item tersebut ingin diurutkan dari angka 1 sampai 10 dan seterusnya). Deretan list tersebut tidak hanya ditandai dengan angka saja, tetapi dapat menggunakan huruf, Angka Romawi atau bahkan simbol bulat sederhana.

<ol> element dapat ditulis secara bersarang (nested), artinya dalam sebuah <ol> element, dapat ditulis <ol> element yang lain ataupun <ul> secara bertumpuk yang ditulis didalam element <li> yang merupakan anak element dari <ol>.

Attributes
Atribut HTML Tag <ol>

reversed

reversed artinya dibalik, menunjukkan daftar (list) yang dibalik urutannya. Misalnya, dari 5 sampai 1 (5,4,3,2,1) dikenal dengan istilah descending. Ini adalah boolean attribute, jadi tidak disebutkan value-nya juga tidak masalah.

Value: reversed

start

Menentukkan awal penomoran untuk individual item dalam daftar (list) yang diurutkan.

Value: nomor

type

Menentukkan tipe penomoran otomatis.

Value:

  • 1 Menunjukkan nomor (default)
  • a penomoran menggunakan huruf kecil (lowercase)
  • A penomoran menggunakan huruf besar (uppercase)
  • i penomoran menggunakan huruf kecil Romawi (lowercase Roman numerals)
  • I penomoran menggunakan huruf besar Romawi (uppercase Roman numerals)

Global Attributes
Atribut Secara Global (Keseluruhan)

<ol> tag mencakup global attributes, yang artinya tag tersebut dapat disisipkan semua attributes yang termasuk dalam global attributes yang secara umum berlaku untuk semua HTML tags.

Silahkan, lihat referensi mengenai HTML Global Attribute

Event Attributes
Atribut event (Peristiwa)

<ol> tag mencakup event attributes, yang artinya attribute tersebut dijalankan ketika ada interaksi dari user atau dalam suatu peristiwa (kejadian). Contoh: menjalankan script (JavaScript) ketika halaman web pada jendela browser hendak ditutup, dan lain sebagainya.

Silahkan, lihat referensi mengenai HTML Events Attribute

Example
Contoh HTML <ol> element

Contoh 1

Contoh <ol> sederhana

SOURCE
editor 
<ol>
  <li>SD (Sekolah Dasar)</li>
  <li>SMP (Sekolah Menengah Pertama)</li>
  <li>SMA (Sekolah Menengah Atas)</li>
</ol>
Contoh 2

Contoh <ol> dengan attribute start.

SOURCE
editor 
<ol start="5">
  <li>SD (Sekolah Dasar)</li>
  <li>SMP (Sekolah Menengah Pertama)</li>
  <li>SMA (Sekolah Menengah Atas)</li>
</ol>
Contoh 3

Contoh nestedol. Artinya, <ol> element yang terletak didalam <li>, yang merupakan anak element ol yang lain.

SOURCE
editor 
<ol>
  <li>SD (Sekolah Dasar)</li>
  <li>SMP (Sekolah Menengah Pertama)
    <ol>
      <li>Kelas VII</li>
      <li>Kelas VIII</li>
      <li>Kelas IX</li>
    </ol>
  </li>
  <li>SMA (Sekolah Menengah Atas)</li>
</ol>

Untuk contoh dibawah ini (Contoh lengkap), agak sedikit berbeda menggunakan roman numbers. Silahkan edit dan mencoba sendiri.

Contoh Lengkap

Contoh source code lengkap disertai dengan link "editor" untuk mencoba (try it) dan melihat hasil (preview) kode.

SOURCE
editor 
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>HTML ol roman numbers list example</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
  </head>
  <body>
    <ol type="A">
    <li>SD (Sekolah Dasar)</li>
    <li>SMP (Sekolah Menengah Pertama)
      <ul>
        <li>Kelas VII</li>
        <li>Kelas VIII</li>
        <li>Kelas IX</li>
      </ul>
    </li>
    <li>SMA (Sekolah Menengah Atas)</li>
    </ol>
  </body>
</html>
SHARE
Previous Article Next Article