#33 Membuat daftar/list berurutan dengan Tag ol pada HTML

belajar tag ol pada HTML dengan penjelasan secara lengkap, contoh kode dan bisa melihat hasilnya dengan satu klik tanpa membuka text editor di laptop.

Deskripsi

tag ol adalah tag yang digunakan untuk membuat daftar item yang berurutan. biasa digunakan sebagai daftar bernomor.

ol berasal dari kata ordered list, daftar yang diurutkan dapat dibuat dengan tag <ol> dan setiap daftar item dapat dibuat dengan tag <li> seperti pada contoh dibawah ini :

    <ol>
        <li> HTML </li>
        <li> CSS </li>
        <li> Javascript </li>
    </ol>Code language: HTML, XML (xml)

Atribut

Reversed

reversed artinya dibalik, atribut reversed termasuk atribut boolean, atribut ini mengurutkan nomor dari terbesar ke terkecil atau biasa dikenal dengan istilah descending.

reversed bermanfaat jika ingin membuat daftar item paling baru muncul terlebih dahulu seperti penomoran pada podcast terbaru.

    <ol reversed>
        <li> HTML </li>
        <li> CSS </li>
        <li> Javascript </li>
    </ol>Code language: HTML, XML (xml)

Start

start artinya mulai, atribut ini menentukan nilai awal dari daftar yang ditentukan. seperti pada contoh dibawah ini, angka yang seharusnya dimulai dari angka 1 diubah menjadi dari angka 3

    <ol start="3">
        <li> HTML </li>
        <li> CSS </li>
        <li> Javascript </li>
    </ol>Code language: HTML, XML (xml)

Type

kita bisa mengubah tipe angka yang ditunjukan sebagai penanda daftar item dengan menggunakan atribut type.

<ol type="1|a|A|i|I">Code language: HTML, XML (xml)

1 nilai default – Angka desimal 1,2,3,4

a sesuai urutan abjad (huruf kecil) a,b,c,d

A secara alfabet (huruf besar) A,B,C,D

i angka romawi (huruf kecil) i,ii,iii,iv

I angka romawi (huruf besar) I,II,III,IV

    <ol type="1">
        <li> HTML </li>
        <li> CSS </li>
        <li> Javascript </li>
        <li> PHP </li>
    </ol>
    <ol type="a">
        <li> HTML </li>
        <li> CSS </li>
        <li> Javascript </li>
        <li> PHP </li>
    </ol>
    <ol type="b">
        <li> HTML </li>
        <li> CSS </li>
        <li> Javascript </li>
        <li> PHP </li>
    </ol>
    <ol type="i">
        <li> HTML </li>
        <li> CSS </li>
        <li> Javascript </li>
        <li> PHP </li>
    </ol>
    <ol type="I">
        <li> HTML </li>
        <li> CSS </li>
        <li> Javascript </li>
        <li> PHP </li>
    </ol>Code language: HTML, XML (xml)

Browser support

Pencarian di thohirdev:

• belajar menulis tag ol
• pengertian tag ol
• apa yang dimaksud dengan tag ol
• fungsi dari tag ol
• tipe penanda yang ada di tag ol