HTML list

HTML menyediakan tag penyusun list yang berfungsi untuk menjikan tulisan atau text sebagai daftar / list diantaranya ol, ul, dan li.

Dalam HTML terdapat dua jenis list yaitu ordered list <ol> dan unordered list <ul> sedangkan untuk listnya sendiri menggunakan tag <li>.

Berikut adalah contoh list:

HTML list

[code]<ul>
  <li> unordered list 1 </li>
  <li> unordered list 2 </li>
  <li> unordered list 3 </li>
  <li> unordered list 4 </li>
  <li> unordered list 5 </li>
</ul>[/code]

[code]<ol>
  <li> ordered list 1 </li>
  <li> ordered list 2 </li>
  <li> ordered list 3 </li>
  <li> ordered list 4 </li>
  <li> ordered list 5 </li>
</ol>[/code]

HTML list

• unordered list 1
• unordered list 2
• unordered list 3
• unordered list 4
• unordered list 5

1. ordered list 1
2. ordered list 2
3. ordered list 3
4. ordered list 4
5. ordered list 5

dari contoh diatas untuk list dengan jenis ordered list atau list yang berurutan terdapat dua atribut yaitu atribut type dan atribut start. atribut type mendefinisikan tipe list yang akan digunakan, berikut daftar nilai dari atribut type:

1. type="1" nomor urut dengan angka (default list).
2. type="A" nomor urut dengan huruf besar.
3. type="a" nomor urut dengan huruf kecil.
4. type="I" nomor urut romawi dengan huruf besar.
5. type="i" nomor urut romawi dengan huruf kecil.

sedangkan atribut start berfungsi untuk memberi nomor awal pada urutan list. HTML hanya menyediakan nilai dari atribut start 1-99 untuk list dengan tipe angka, artinya list hanya tersedia 100 daftar list saja. jadi ketika urutan list sudah pada batas akhir (100) maka nomor urut list akan kembali dimulai dari 0.

HTML Ordered List

[code]<ol type="1" start="22">
  <li> ordered list 1 </li>
  <li> ordered list 2 </li>
  <li> ordered list 3 </li>
  <li> ordered list 4 </li>
  <li> ordered list 5 </li>
</ol>[/code]

hasil

22. ordered list 1
23. ordered list 2
24. ordered list 3
25. ordered list 4
26. ordered list 5

[code]<ol type="A" start="4">
  <li> ordered list 1 </li>
  <li> ordered list 2 </li>
  <li> ordered list 3 </li>
  <li> ordered list 4 </li>
  <li> ordered list 5 </li>
</ol>[/code]

hasil

4. ordered list 1
5. ordered list 2
6. ordered list 3
7. ordered list 4
8. ordered list 5