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.

start

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

type

Menentukkan tipe penomoran otomatis.


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.

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.

Example
Contoh HTML <ol> element

Contoh 1

Contoh <ol> sederhana

<ol>
  <li>SD (Sekolah Dasar)</li>
  <li>SMP (Sekolah Menengah Pertama)</li>
  <li>SMA (Sekolah Menengah Atas)</li>
</ol>
  1. SD (Sekolah Dasar)
  2. SMP (Sekolah Menengah Pertama)
  3. SMA (Sekolah Menengah Atas)
Contoh 2

Contoh <ol> dengan attribute start.

<ol start="5">
  <li>SD (Sekolah Dasar)</li>
  <li>SMP (Sekolah Menengah Pertama)</li>
  <li>SMA (Sekolah Menengah Atas)</li>
</ol>
  1. SD (Sekolah Dasar)
  2. SMP (Sekolah Menengah Pertama)
  3. SMA (Sekolah Menengah Atas)

Menunjukkan dimulai (start) dari angka 5 dan seterusnya.

Contoh 3

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

<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>
  1. SD (Sekolah Dasar)
  2. SMP (Sekolah Menengah Pertama)
    1. Kelas VII
    2. Kelas VIII
    3. Kelas IX
  3. SMA (Sekolah Menengah Atas)

Untuk contoh dibawah ini, agak sedikit berbeda. Silahkan edit dan mencoba sendiri.

Contoh Lengkap
Demo dengan Source Code Editor

Demo Editor
Demo HTML <ol>
Code Editor