HTML – List


Tag list pada HTML digunakan untuk membuat daftar urut atau penomoran secara otomatis. Terdapat dua jenis tag dalam list HTML yaitu ordered list (OL) dan unordered list (UL). Tag OL akan menghasilkan daftar penomoran secara berurutan atau yang biasa disebut dengan numbering, misal 1,2,3,dst. Sedangkan tag UL akan menghasilkan daftar penomoran menggunakan simbol yang disebut bullet seperti lingkaran dan kotak.

Syntaks dari kedua tag list adalah :

1. Ordered list (ol)

<ol>
<li>Daftar pertama</li>
<li>Daftar kedua</li>
……
<li>Daftar terakhir</li>
</ol>

2. Unordered list (ul)

<ul>
<li>Daftar pertama</li>
<li>Daftar kedua</li>
……
<li>Daftar terakhir</li>
</ul>

Atribut yang dapat digunakan adalah :

  • type : Digunakan untuk memilih jenis/tipe daftar.

Jenis/bentuk untuk masing-masing list sudah ditentukan, oleh karena itu value dari atribut type dari list juga sudah ditentukan oleh HTML, sehingga tidak bisa bebas memilih value. Value dari type list antara lain :

– Orderlist (OL) :

  1. 1 untuk penomoran 1, 2, 3,…
  2. I untuk penomoran I, II, III, …
  3. A untuk penomoran A, B, C, …
  4. a untuk penomoran a, b, c, …
  5. i untuk penomoran i, ii, iii, …
– Underlist (UL) :
  1. Disc (default) : lingkaran tidak berlubang
  2. Circle untuk lingkaran berlubang
  3. Square untuk bentuk kotak

Contoh penggunaan syntaks list tanpa atribut (bentuk default) :

<html>
<head><title></title></head>
<body>
Nama buah :
<ol>
<li>Apel</li>
<li>Jeruk</li>
<li>Mangga</li>
</ol>
Nama buah :
<ul>
<li>Apel</li>
<li>Jeruk</li>
<li>Mangga</li>
</ul>
</body>
</html>

Hasil dari syntaks di atas adalah :

list-1

Contoh penggunaan syntaks list menggunakan atribut type adalah :

<html>
<head><title></title></head>
<body>
Nama buah :
<ol type=”i”>
<li>Apel</li>
<li>Jeruk</li>
<li>Mangga</li>
</ol>
Nama buah :
<ul type=”square”>
<li>Apel</li>
<li>Jeruk</li>
<li>Mangga</li>
</ul>
</body>
</html>

Hasil dari syntaks list menggunakan atribut type tersebut adalah :

list-2


Leave a Reply