Perbedaan Tag UL dan OL

HTML mempunyai tag list yang bisa kita pakai untuk mengurutkan daftar, yakni tag UL dan OL. Namun apa kalian tau perbedaan dari kedua tag tersbut ? Pada artikel kali ini akan saya bahas mengenai Perbedaan Tag UL dan OL. Ul (Unordered List) merupakan tag list tidak beraturan yang berfungsi untuk mengurutkan suatu list dengan urutan berupa karakter spesial atau dengan simbol pada HTML. Sedangkan tag Ol (Ordered List) merupakan tag beraturan yang berfungsi untuk mengurutkan suatu list dengan urutan berupa abjad, angka ataupun berupa angka romawi.

1. Tag UL (Unordered List)

Berikut adalah contoh penggunaan tag UL.

<body>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>Javascript</li>
    </ul>
</body>

Pada tag Ul (Unordered List) ada beberapa type yang bisa kita gunakan, yakni type disc, circle, square dan none. Berikut type pada tag UL (Unordered List) :

  • Type = "disc" akan menghasilkan bentuk bulatan Hitam.
  • Type = "circle" akan menghasilkan bentuk lingkaran hitam seperti cincin.
  • Type = "square" akan menghasilkan bentuk bulatan kotak.
  • Type = "none" tidak akan menghasilkan bentuk apapun atau kosong.

Berikut salah satu contoh penggunaan type pada tag UL (Unordered List).

<body>
    <ul type="disc">
        <li>HTML</li>
        <li>CSS</li>
        <li>Javascript</li>
    </ul>
    <ul type="circle">
        <li>HTML</li>
        <li>CSS</li>
        <li>Javascript</li>
    </ul>
</body>

Maka hasil output penggunaan type akan seperti pada gambar berikut.

Perbedaan Tag UL dan OL

2. Tag OL (Ordered List)

Berikut adalah contoh penggunaan tag OL (Ordered List).

<body>
    <ol>
        <li>HTML</li>
        <li>CSS</li>
        <li>Javascript</li>
    </ol>
</body>

Pada tag OL (Ordered List) ada beberapa type yang bisa kita gunakan, yakni abjad, angka dan romawi. Berikut type pada tag OL (Ordered List) :

  • Type = "a" akan menghasilkan output seperti : a, b, c dst.
  • type = "A" akan menghasilkan output seperti : A, B, C dst.
  • type = "1" akan menghasilkan output seperti : 1, 2, 3 dst.
  • type = "i" akan menghasilkan output seperti : i, ii, iii dst.
  • type = "I" akan menghasilkan output seperti : I, II, III dst.

Berikut salah satu contoh penggunaan type pada tag OL (Ordered List).

<body>
    <ol type="A">
        <li>HTML</li>
        <li>CSS</li>
        <li>Javascript</li>
    </ol>
    <ol type="1">
        <li>HTML</li>
        <li>CSS</li>
        <li>Javascript</li>
    </ol>
</body>

Maka hasil output penggunaan type akan seperti pada gambar berikut.

Perbedaan Tag UL dan OL

Baiklah itu tadi Perbedaan Tag UL dan OL dan type pada masin-masing tag UL dan OL yang bisa kita gunakan, semoga bermanfaat.

14 Desember 2017

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Seminar Java April 2024 di DUMET School
chat