HTML List

by

Dalam sebuah teks, daftar atau list adalah sesuatu yang sangat diperlukan. Misal untuk membuat daftar menu, daftar nilai, daftar isi, atau daftar-daftar yang lain.

Dalam HTML list dibedakan menjadi dua, yaitu:

Unordered List

Definisi dari unordered list atau biasa disingkat dengan UL adalah daftar yang tidak berurutan. Misalnya daftar dengan tanda -, bullet, dll. Contohnya daftar berikut:

  • Contoh UL
  • Contoh UL
  • Contoh UL

Ordered List

Kebalikan dari UL, ordered list atau disingkat OL adalah daftar yang harus berurutan, misal 1, 2, 3…; I, II, III,.; a, b, c….

Cara Membuat List HTML

Sudah paham kan bedanya UL dengan OL?

Persamaan dari keduanya adalah ada daftarnya! Maksudnya, OL ataupun UL keduanya ada data daftarnya. Yang membedakan hanyalah berurutan atau tidak.

Daftar tersebut dinotasikan di HTML dengan tag <li>contoh ul</li>. Jadi apapun itu OL atau UL, untuk membuat daftarnya tetap dengan <li>.

Untuk membuat daftar unordered list sebagai berikut:

<ul>
 <li>contoh ul</li>
 <li>contoh ul</li>
</ul>

Output dari kode diatas sebagai berikut:

  • contoh ul
  • contoh ul

Jadi UL dinotasikan dengan <ul>..</ul>.

Sedangkan membuat daftar ordered list caranya seperti ini:

<ol>
 <li>contoh ol</li>
 <li>contoh ol</li>
 <li>contoh ol</li>
</ol>

Outputnya seperti ini:

  1. contoh ol
  2. contoh ol
  3. contoh ol

OL dinotasikan dengan tag <ol>...</ol>.

Sampai disini paham kan ya?

Mengganti Notasi OL dan UL

Secara default, notasi OL itu angka 1, 2, 3…. Sedangkan UL itu bullet bunder warna hitam.

Apakah bisa diganti? O tentu saja bisa vergusooo.

UL type

Berikut value dari UL dalam HTML:

ValueKeterangan
disclingkaran hitam (default / dari sananya)
circlelingkaran putih dengan garis hitam
squarekotak hitam

Cara menggantinya sangat mudah, kita tinggal menambahkan kode <ul style="list-style-type:circle">, kode circle bisa diganti dengan square.

Contohnya seperti ini:

  • contoh ul
  • contoh ul

Saya diatas mengganti type menjadi square.

OL type

Sedangkan untuk value dari OL adalah: 1, A, a, I, dan i.

Cara menggantinya juga sangat mudah yaitu <ol type="A">. Misalnya:

  1. contoh ol
  2. contoh ol
  3. contoh ol

Mengganti start nomor OL

Kamu bisa juga mengatur urutannya dimulai dari nomor berapa, misal ingin dimulai dari nomor 7, maka ditulis <ol start="7">.

  1. contoh ol
  2. contoh ol
  3. contoh ol

Membalikkan urutan nomor OL

Atau kamu ingin urutannya dibalik? Misal jadi 4, 3, 2, 1? Tinggal tambahkan atribut reversed="reversed".

Kodenya menjadi <ol reversed="reversed">.

  1. contoh ol
  2. contoh ol
  3. contoh ol

Mudah kan bikinnya? Kita juga bisa mengganti bentuk list htmlnya dengan CSS.

Kalau masih bingung silahkan tanya ya. Jangan malu!

Leave a Comment