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.
<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).
<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.

2. Tag OL (Ordered List)
Berikut adalah contoh penggunaan tag OL (Ordered List).
<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).
<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.

Baiklah itu tadi Perbedaan Tag UL dan OL dan type pada masin-masing tag UL dan OL yang bisa kita gunakan, semoga bermanfaat.
Webinar Gratis 2024
Sabtu, 09 Maret 2024
10 Bahasa Rekomendasi Untuk Dipelajari di 2024
Python Developer, Data Science, Web Application
Minggu, 26 Mei 2024, 09.00-13.00 WIB
(4 Jam Membuat Backend di Laravel 11)