List Di HTML

$[ Enjoy Materi ]$

List item di gunakan untuk mengelompokkan data baik berurutan (ordered list) maupun yang tidak berurutan (unordered list).

Ordered List
Untuk membuat list terurut nomor (ordered list), kita gunakan tag pembuka <ol> dan penutup </ol>, sedangkan untuk mendata setiap itemnya menggunakan tag <li> sebagai pembuka dan </li> sebagai penutup.
Contoh:

Daftar Hari:<br>
<ol>
<li>Senin</li>
<li>Selasa</li>
<li>Rabu</li>
<li>Kamis</li>
<li>Jum'at</li>
<li>Sabtu</li>
<li>Minggu</li>
</ol>

Hasil:


Ada beberapa tipe yang bisa digunakan.
<ol type = "1"> - Default
<ol type = "I">
<ol type = "i">
<ol type = "A">
<ol type = "a">
Contoh:

Daftar Hari:<br>
<ol type="i">
<li>Senin</li>
<li>Selasa</li>
</ol>
<ol type="A">
<li>Rabu</li>
<li>Kamis</li>
</ol>
<ol type="a">
<li>Jum'at</li>
<li>Sabtu</li>
<li>Minggu</li>
</ol>

Hasil:



Unordered List
Untuk membuat list tidak terurut nomor (unordered list), kita gunakan tag pembuka <ul> dan penutup </ul>, sedangkan untuk mendata setiap itemnya menggunakan tag <li> sebagai pembuka dan </li> sebagai penutup.
Contoh:

Daftar Hari:<br>
<ul>
<li>Senin</li>
<li>Selasa</li>
<li>Rabu</li>
<li>Kamis</li>
<li>Jum'at</li>
<li>Sabtu</li>
<li>Minggu</li>
</ul>

Hasil:


Ada 3 tipe yang bisa kita gunakan square, disc, circle. Contoh:

Daftar Hari:<br>
<ul type="square">
<li>Senin</li>
<li>Selasa</li>
</ul>
<ul type="disc">
<li>Rabu</li>
<li>Kamis</li>
</ul>
<ul type="circle">
<li>Jum'at</li>
<li>Sabtu</li>
<li>Minggu</li>
</ul>

Hasil:

Writer By : @mr.mcf404