Ordered List and Unordered List

Cara menbuat List HTML

List HTML dibagi 2 Ordered list dan Unordered list Tag dasar yang digunakan kedua list ini yaitu <ol> untuk mendefinisikan Ordered List dan <ul> untuk mendefinisikan Unordered List , sedangkan untuk mendefinisikan list Itemnya dengan menggunakan Tag <li>

Order List

Ordered list adalah listing yang berurutan biasanya menggunakan angka atau huruf untuk menandai urutan item-itemnya, di Microsoft dikenal dengan istilah numbering.

Untuk membuat ordered list pada HTML kita menggunakan tag <ol> untuk mendefinisikan list, dan tag <li> untuk mendefinisikan setiap item dalam list.

Berikut ini beberapa contoh penggunaan ordered list:

Order List Default

1. Sabun Mandi
2. Pasta Gigi
3. Sikat Gigi

Berikut ini adalah contoh penulisan default Ordered list pada halaman Html

 
 <ol>
  <li>Sabun Mandi</li>
  <li>Pasta Gigi</li>
  <li>Sikat Gigi</li>
</ol>

Order List by Type

Kamu juga bisa menggunakan atribut type pada tag <ol> untuk menentukan jenis type penomoran yang akan kamu gunakan. Type penomoran ini memiliki 4 nilai yang dapat digunakan :

• a untuk List Item huruf alfabet kecil
• A untuk List Item huruf alfabet besar
• i untuk List Item angka Romawi kecil
• I untuk List Item angka Romawi besar

Berikut ini adalah contoh penulisan ordered list pada halaman Html dengan menambahkan type nilai

 
<ol type="A"> <!--[A/a/I/i]-->
  <li>Sabun Mandi</li> 
  <li>Pasta Gigi</li> 
  <li>Sikat Gigi</li>
</ol>
  

Berikut ini adalah contoh output ordered list dengan penambahan Type Nilai

Type = A	Type = a	Type = I	Type = i
Sabun Mandi Pasta Gigi Sikat Gigi	Sabun Mandi Pasta Gigi Sikat Gigi	Sabun Mandi Pasta Gigi Sikat Gigi	Sabun Mandi Pasta Gigi Sikat Gigi

Order List by Start

Kamu juga bisa menggunakan atribut "start" pada tag <ol> untuk melanjutkan jenis penomoran yang terpotong dengan cara penulisan sebagai berikut :

 
<ol start="5"> <!--[start]-->
  <li>Sabun Mandi</li> 
  <li>Pasta Gigi</li> 
  <li>Sikat Gigi</li>
</ol>
  

Berikut ini adalah contoh output ordered list dengan penomoran terpotong

5. Sabun Mandi
6. Pasta Gigi
7. Sikat Gigi

Order List by Reversed

Kamu juga bisa menggunakan atribut "reversed" pada tag <ol> untuk jenis penomoran yang terbalik dengan cara penulisan sebagai berikut:

 
<ol reversed="reversed"> 
  <li>Sabun Mandi</li> 
  <li>Pasta Gigi</li> 
  <li>Sikat Gigi</li>
</ol>
  

Berikut ini adalah contoh output ordered list dengan penomoran terbalik

1. Sabun Mandi
2. Pasta Gigi
3. Sikat Gigi

Order List by Class

Kamu juga bisa menggunakan atribut "class" pada tag <ol> untuk jenis penomoran yang dapat didesain sendiri bentuk, warna, kulit, dan typenya sesuai kebutuhan contoh outputnya sebagai berikut:

1. Satu Baris
2. Dua Baris
   Baris kedua
3. Baris Pertama
   Baris kedua
   Baris ketiga
4. Baris Pertama
   Baris kedua
   Baris ketiga
   dan baris keempat
5. Baris Pertama
   Baris kedua
   Baris ketiga
   Baris keempat
   dan baris kelima
6. Baris Pertama,
   Baris kedua
   baris ketiga baris
   keempat Baris
   keiima dan
   baris Keenamn
7. Tujuh tujuh tujuh
8. Delapan delapan delapan
9. Sembilan sembilan sembilan
10. Sepuluh sepuluh sepuluh

Unorder List

Unordered list adalah daftar yang tidak memiliki urutan khusus, jenis listing ini biasanya digunakan untuk menampilkan daftar item yang sejajar, tanpa ada prioritas atau urutan tertentu pada Microsoft dikenal dengan istilah Bullats

Untuk membuat Unordered list pada HTML kita menggunakan tag <ul> untuk mendefinisikan list, dan tag <li> untuk mendefinisikan setiap item dalam list.

Berikut ini beberapa contoh penggunaan unordered list:

Unorder List Default

• Pisang Ijo
• Bolu Kukus
• Tiramizu
• Roti Bakar
• Nastar Pandan
• Ketan Gurih

Kamu dapat mengikuti contoh penulisan default Unordered list pada halaman Html

 
<ul> 
  <li>Pisang Ijo</li> 
  <li>Bolu Kukus</li> 
  <li>Tiramizu</li>
  <li>Roti Bakar</li> 
  <li>Nastar Pandan</li> 
  <li>Ketan Gurih</li>
</ul>
  

Unorder List by Type

Berikut ini adalah contoh output Unordered list dengan penambahan Type Nilai

type = square	Type = disc	Type = circle
Pisang Ijo Bolu Kukus Tiramizu Roti Bakar Nastar Pandan Ketan Gurih	Pisang Ijo Bolu Kukus Tiramizu Roti Bakar Nastar Pandan Ketan Gurih	Pisang Ijo Bolu Kukus Tiramizu Roti Bakar Nastar Pandan Ketan Gurih

Kamu dapat mengikuti contoh penulisan Unordered list berdasarkan type yang berbeda-beda pada halaman Html

 
<ul type="square"> <!--[square/disc/circle]-->
  <li>Pisang Ijo</li> 
  <li>Bolu Kukus</li> 
  <li>Tiramizu</li>
  <li>Roti Bakar</li> 
  <li>Nastar Pandan</li> 
  <li>Ketan Gurih</li>
</ul>
  

Unorder List by Class

Kamu juga bisa menggunakan atribut "class" pada tag <ul> untuk jenis listing items yang dapat didesain sendiri bentuk, warna, kulit, dan typenya sesuai kebutuhan contoh outputnya sebagai berikut:

• Satu satu satu
• Dua dua dua
• Tiga tiga tiga
• Empat empat empat
• Lima lima lima
• Enam enam enam
• Tujuh tujuh tujuh
• Delapan delapan delapan
• Sembilan sembilan sembilan
• Sepuluh sepuluh sepuluh

Unordered List

<ul class="rah"> 
  <li>Satu satu satu</li>
  <li>Dua dua dua</li>
</ul>

Dengan memahami perbedaan kedua jenis listing ini, kita bisa menggunakan list yang tepat untuk menampilkan informasi yang kita inginkan.
/Selamat Mencoba!

---

Baca Juga