HTML LIST

HTML List Unordered

Unordered List dimulai dengan <ul> tag. Setiap item list dimulai dengan <li> tag. Item list akan ditandai dengan lingkaran hitam kecil.

List Unordered :

<ul>
   <li> kopi </li>
   <li> Teh </li>
   <li> Susu </li>
</ul>

HTML List Unordered - Atribut Style

Sebuah atribut style dapat ditambahkan ke List Unordered, untuk menentukan style penanda:

Style	Deskripsi
list-style-type:disc	Item List akan ditandai dengan lingkaran hitam
list-style-type:circle	Item List akan ditandai dengan lingkaran putih
list-style-type:square	Item List akan ditandai dengan kotak
list-style-type:none	Item List tanpa penanda

Contoh Disc:

<ul style="list-style-type:disc">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Contoh Circle:

<ul style="list-style-type:circle">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Contoh Square

<ul style="list-style-type:square">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Contoh None

<ul style="list-style-type:none">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

HTML List Ordered

List ordered dimulai dengan <ol> tag. Setiap item daftar dimulai dengan <li> tag. List item akan ditandai dengan angka.

List Ordered

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

HTML List Ordered - Atribut Style

Sebuah atribut style dapat ditambahkan ke List Unordered, untuk menentukan style penanda:

Style	Deskripsi
type="1"	Item List akan diberi nomor dengan angka
type="A"	Item List akan diberi nomor dengan huruf besar
type="a"	Item List akan diberi nomor dengan huruf kecil
type="I"	Item List akan diberi nomor dengan angka Romawi besar
type="i"	Item List akan diberi nomor dengan angka Romawi kecil

Angka

<ol type="1">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

Huruf Besar

<ol type="A">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

Huruf kecil

<ol type="a">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

Angka Romawi Besar

<ol type="I">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

Angka Romawi Kecil

<ol type="i">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>