Cara Membuat List pada HTML : Fungsi Tag ol, ul, li

List merupakan cara penulisan yang sering digunakan untuk membuat daftar berurutan. Terdapat 3 macam list yang ada di HTML yaitu ordered list, unordered list dan description list. Ketiga macam list HTML tersebut memiliki tampilan, fungsi dan cara penulisan yang berbeda. Untuk mengetahui masing-masing list tersebut kita akan bahas satu-persatu.

Ordered List pada HTML

Ordered list adalah jenis list berurutan yang ditampilkan dengan menggunakan angka atau nomor atau huruf. Ordered list biasa digunakan untuk menampilkan daftar item yang membutuhkan penomoran misalnya daftar pemenang lomba, daftar urutan ranking kelas dan urutan-urutan lain yang membutuhkan nomor.

Cara membuat ordered list HTML

Ordered list atau list angka/nomor dibuat dengan menggunakan tag <ol>. Penulisan item-itemn list tersebut menggunakan tag <li> yang ditelakkan diantara tag pembuka <ol> dan tag penutup </ol>.

Contoh penulisan ordered list:

<!DOCTYPE html>
<html>
 <head>
  <title>Belajar ordered list</title>
 </head> 
<body>
  <p>Urutan nama pemenang lomba koding:</p>
  <ol>
  <li>Nama juara pertama</li>
  <li>Nama juara kedua</li>
  <li>Nama juara ketiga</li>
  </ol>
 </body>
</html>

Hasil tampilan pada browser:

Tampilan ordered list HTML di browser

Penjelasan kode: Pada contoh kode di atas, penulisan ordered list dimulai dari baris ke-8 yaitu tag <ol>. Lalu, baris ke-9 hingga ke-11 merupakan item-item dari list tersebut dimana penulisannya menggunakan tag <li>. Lalu berakhir pada baris ke-12 yaitu tag penutup </ol>. Secara otomatis angka 1 hingga 3 akan ditampilkan pada tiap item (di depan nama juara).

Atribut-Atribut untuk Elemen <ol>

Elemen <ol> memiliki 3 atribut khusus yang dapat digunakan yaitu atribut type, atribut start dan atribut reversed.

Atribut type

Atribut type digunakan untuk mengubah jenis pengurutannya. Misalnya ingin mengubah dari angka (1,2,3,…) menjadi huruf (a,b,c,…). Terdapat 5 macam value yang dapat kita gunakan yaitu:

AtributFungsi
type=”1″Pengurutan dengan angka
type=”a”Pengurutan dengan huruf kecil (a,b,c,…)
type=”A”Pengurutan dengan huruf besar/kapital (A,B,C,…)
type=”i”Pengurutan dengan angka romawi kecil (i,ii,iii,…)
type=”I”Pengurutan dengan angka romawi besar (I,II,III,…)

Contoh penggunaan atribut type:

<!DOCTYPE html>
<html>
 <head>
  <title>Atribut type Ordered list</title>
 </head> 
<body>
  <p>Pengurutan dengan type 1</p>
  <ol type="1">
  <li>item list</li>
  <li>item list</li>
  <li>item list</li>
  </ol>
  <p>Pengurutan dengan type a</p>
  <ol type="a">
  <li>item list</li>
  <li>item list</li>
  <li>item list</li>
  </ol>
  <p>Pengurutan dengan type A</p>
  <ol type="A">
  <li>item list</li>
  <li>item list</li>
  <li>item list</li>
  </ol>
  <p>Pengurutan dengan type i</p>
  <ol type="i">
  <li>item list</li>
  <li>item list</li>
  <li>item list</li>
  </ol>
  <p>Pengurutan dengan type I</p>
  <ol type="I">
  <li>item list</li>
  <li>item list</li>
  <li>item list</li>
  </ol>
 </body>
</html>

Hasilnya:

Penggunaan atribut type di ordered list HTML

Penjelasan kode: Setelah menggunakan atribut type kita dapat melihat perbedaan pada hasilnya yaitu pada tipe pengurutannya.

Atribut Start

Atribut start digunakan untuk mengubah atau menentukan angka awal pengurutan. Jika tanpa menggunakan atribut ini pengurutan akan dimulai dari angka 1 namun jika kita ingin dimulai dari angka 5 maka kita perlu memasukkannya pada value atribut start menjadi <ol start=”5″>.

Contoh penggunaan atribut start:

<!DOCTYPE html>
<html>
 <head>
  <title>Atribut start Ordered list</title>
 </head> 
<body>
  <p>Pengurutan dengan type 1</p>
  <ol start="5">
  <li>item list</li>
  <li>item list</li>
  <li>item list</li>
  </ol>
  <p>Pengurutan dengan type a</p>
  <ol type="a" start="5">
  <li>item list</li>
  <li>item list</li>
  <li>item list</li>
  </ol>
 </body>
</html>

Hasilnya:

Tampilan atribut start untuk list HTML

Penjelasan kode: Atribut start pada contoh di atas menunjukkan pengurutan dimulai dari angka 5. Hal tersebut juga berlaku untuk penggunaan atribut type yang dimulai dari huruf e (huruf ke-5) tanpa kita ubah manual hanya dengan menambahkan atribut start.

Atribut reversed

Atribut reversed digunakan untuk mengubah urutan dari yang terbesar menuju yang terkecil. Atribut ini adalah atribut tanpa value jadi hanya perlu menambahkan reversed pada tag pembuka ol.

<ol reversed>
  <li>item list</li>
  <li>item list</li>
  <li>item list</li>
</ol>

Unordered List pada HTML

Unordered list adalah jenis list yang tidak berurutan yang ditampilkan dengan menggunakan simbol. Unordered list digunakan untuk menampilkan daftar list yang tidak memerlukan angka pengurutan misalnya daftar OS komputer, daftar aplikasi editor html dan lain-lain.

Cara Membuat Unordered List Html

Unordered list atau list simbol dibuat dengan menggunakan tag <ul>. Sama dengan list sebelumnya, item-item list ini ditulis dengan menggunakan tag <li> yang terletak di dalam elemen <ul>.

Contoh penulisan unordered list:

<!DOCTYPE html>
<html>
 <head>
  <title>Belajar unordered list</title>
 </head> 
<body>
  <p>Daftar OS komputer:</p>
  <ul>
  <li>Linux</li>
  <li>Windows</li>
  <li>Mac</li>
  </ul>
 </body>
</html>

Hasilnya:

Tampilan unordered list HTML di browser

Penjelasan kode: Penulisan unordered list pada contoh di atas dimulai dari baris ke-8 yaitu tag <ul>. Lalu dilanjutkan dengan item-itemnya yang diapit oleh tag <li> pada baris ke-9 hingga ke-11. Kemudian ditutup dengan tag </ul>.

Atribut untuk Elemen <ul>

Pada versi HTML5 Elemen <ul> tidak memiliki atribut khusus. Sebenarnya terdapat 2 atribut khusus yang populer untuk elemen <ul> namun sudah tidak disupport oleh HTML5 sehingga kita tidak perlu mempelajarinya. Untuk sekedar pengetahuan, atribut tersebut adalah atribut type dan atribut compact.

Atribut type digunakan untuk merubah jenis simbol yang secara default adalah disc, dapat kita ubah menjadi circle dan square.

Atribut compact digunakan untuk menampilkan ukuran lebih kecil untuk list.

Description List pada HTML

Description list adalah jenis list yang digunakan untuk menampilkan istilah dan penjelasannya seperti kamus. Description list jarang digunakan jika dibandingkan 2 jenis list sebelumnya. Cara penulisan description list sedikit berbeda dari jenis list sebelumnya. Jika kita hanya perlu 2 tag pada ordered dan unordered list, maka untuk menulis description list kita membutuhkan 3 tag HTML yaitu tag <dl>, tag <dt> dan tag <dd>.

Tag <dl> digunakan untuk mendefinisikan bahwa kode tersebut adalah description list. Tag <dt> digunakan untuk mengapit istilah (term). Tag <dd> digunakan untuk mengapit penjelasannya (description).

Contoh penulisan description list:

<!DOCTYPE html>
<html>
 <head>
  <title>Belajar description list</title>
 </head> 
<body>
  <p>Daftar istilah:</p>
  <dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language yaitu bahasa untuk membuat halaman web.</dd>
  <dt>PHP</dt>
  <dd>Bahasa pemrograman yang populer digunakan untuk membuat web disisi server.</dd>
</dl>
 </body>
</html>

Hasilnya:

Tampilan description list HTML

Penjelasan kode: Penulisan description list pada contoh tersebut dimulai dari baris ke-8 yaitu tag <dl>. Kemudian istilah diapit oleh tag <dt> pada baris ke-9 dan ke-11. Lalu tag <dd> mengapit penjelasan masing-masing pada baris ke-10 dan ke-12. Lalu diakhiri dengan penutup tag </dl>.

Nested List HTML

Nested list adalah list di dalam list. Misalnya saat kita menulis list OS komputer yang terdiri dari Linux, Windows dan Mac. Linux dalamnya terdapat list lagi yaitu Ubuntu, Debian, RedHat, dll. Pada contoh seperti inilah kita perlu membuat nested list.

Cara Membuat Nested List HTML

Untuk membuat nested list di HTML, list tambahan harus diletakkan di dalam tag <li>. List tersebut ditulis lengkap dari tag <ol> atau <ul> di dalam tag <li>.

Contoh kode:

<!DOCTYPE html>
<html>
 <head>
  <title>Belajar nested list</title>
 </head> 
<body>
  <p>Daftar OS komputer:</p>
  <ul>
  <li>Linux
	<ul>
	  <li>Ubuntu</li>
	  <li>Debian</li>
	  <li>RedHat</li>
	 </ul>
  </li>
  <li>Windows</li>
  <li>Mac</li>
  </ul>
 </body>
</html>

Hasilnya:

Tampilan nested list HTML pada browser

Penjelasan kode: Pada baris ke-9 tag <li> tidak ditutup dengan </li> tetapi dimasukkan list tambahan lagi yang dimulai pada baris ke-10 yaitu tag <ul>. List tambahan berakhir pada baris ke-14 dengan tag </ul>. Setelah itu baru ditutup dengan tag </li>.

Selain digunakan untuk membuat daftar urutan dalam halaman web, list juga biasa digunakan untuk pembuatan menu. Namun, untuk membuat menu kita harus mempelajari CSS dan JS. Sebaiknya tuntaskan dahulu pembelajaran HTML sebelum belajar CSS dan JS. Jika ada pertanyaan tentang materi list HTML ini silahkan kirim komentar pada kolom komentar.

M. Hernawan
Web developer yang juga suka dengan dunia sysadmin. Pernah belajar Teknik Informatika di Indonesia.

Kirim Komentar