List HTML

Pengertian List HTML

List adalah sebuah daftar .

Untuk membuat daftar anda bisa menggunakan salah satu tag <ol> atau <ul> .

<ol> yaitu ordered list Untuk membuat daftar yang berurutan . Daftarnya diawali dengan angka(bisa diubah dengan angka/huruf/angka romawi) .

<ul> yaitu unordered list Untuk membuat daftar yang tidak berurutan . Tidak berurutan disini bukan berarti daftar yang ditampilkan tidak sesuai dengan urutan yang anda tulis. Daftarnya diawali dengan bulat(bisa diubah jadi kotak) .

Penggunaan Ol dan Ul

Tag <Ol> biasanya digunakan untuk menulis daftar yang berurutan, seperti menulis tutorial, pancasila, dll . konten yang ditulis dengan tag <ol> biasanya urutanya tidak boleh diubah susunanya.

Contoh penggunaan Ol:

<b>Cara Membuat Nasi Goreng</b>
<ol>
<li>Taruh wajan diatas kompor</li>
<li>Nyalakan kompor&nbsp;</li>
<li>Masukan nasi ke wajan</li>
<li>Tambahkan bumbu</li>
<li>Aduk</li>
<li>Setelah merata matikan kompor dan angkat</li>
<li>Masukan ke piring dan nasi goreng siap dihidangkan</li>
</ol>

Hasil :

Cara Membuat Nasi Goreng

1. Taruh wajan diatas kompor
2. Nyalakan kompor 
3. Masukan nasi ke wajan
4. Tambahkan bumbu
5. Aduk
6. Setelah merata matikan kompor dan angkat
7. Masukan ke piring dan nasi goreng siap dihidangkan

*Note : list diatas contoh ordered list. karena jika langkahnya diacak bisa terjadi masalah(nasi gorengnya gagal). Bayangkan jika list diatas no 2 anda pindah ke paling bawah, pasti gagal membuatnya.

Contoh penggunaan Ul:

<b>Daftar Band Favorite Saya</b>
<ul>
<li>Avenged Sevenfold</li>
<li>Noah</li>
<li>Setia Band</li>
<li>Wali</li>
</ul>

Hasil :
Daftar Band Favorite Saya

• Avenged Sevenfold
• Noah
• Setia Band
• Wali

*Note : list diatas contoh unordered list. Karena jika urutanya diacak tidak akan ada masalah karena keempatnya tetap band favorite saya

Type Ordered List

Ada beberapa penulisan ordered list selain dengan angka. Gunakan attribut type pada tag <ol>

Type Ol :

• 1 : untuk penulisan dengan angka dari 1, 2, 3, dst.(default untuk ol)
• A : untuk penulisan dengan huruf besar(kapital) dari A, B, C, dst.
• a : untuk penulisan dengan huruf kecil dari a, b, c, dst.
• I : untuk penulisan dengan angka romawi(kapital) dari I, II, III, dst.
• i : untuk penulisan dengan angka romawi dari i, ii, iii, dst.

Contoh :

<ol type="A">
<li>ke-1</li>
<li>ke-2</li>
<li>ke-3</li>
</ol>

Hasil :

1. ke-1
2. ke-2
3. ke-3

Type Unordered List

Ada beberapa penulisan unordered list selain dengan bulat. Gunakan attribut type pada tag <ol>

Type Ol :

• disc : untuk penulisan dengan bentuk bullet(ini default untuk ul) .
• circle : untuk penulisan dengan bentuk lingkaran .
• square : untuk penulisan dengan bentuk kotak .
• none : untuk penulisan tanpa bentuk apapun(tidak ada tanda di listnya) .

Contoh :

<ul type="square">
<li>ke-1</li>
<li>ke-2</li>
<li>ke-3</li>
</ul>

Hasil :

• ke-1
• ke-2
• ke-3

Description List

Description List adalah list dengan sebuah keterangan

List deskripsi didefinisikan dengan <dl>. menggunakan tag <dt> untuk item list nya, dan <dd> untuk keteranganya .

Contoh :

<dl>
  <dt>Sapi</dt>
  <dd>- hewan yang menghasilkan susu</dd>
  <dt>Domba</dt>
  <dd>- hewan yang menghasilkan wol(bulu)</dd>
</dl>

Hasil :

Sapi

- hewan yang menghasilkan susu

Domba

- hewan yang menghasilkan wol(bulu)

Nested HTML Lists

Nested list yaitu istilah untuk sebuah list didalam list .

Untuk membuat list didalam list caranya seperti dibawah :

Contoh :

<ul>
<li>Kopi
<ul>
<li>Kopi hitam</li>
<li>Capuchino</li>
</ul>
</li>
<li>Tea
<ul>
<li>Teh Manis</li>
<li>Teh Hijau</li>
</ul>
</li>
<li>Milk</li>
</ul>

Hasil :

• Kopi
  • Kopi hitam
  • Capuchino
• Tea
  • Teh Manis
  • Teh Hijau
• Milk