List merupakan cara penulisaan yang sering digunakan untuk membuat daftar berurutan. List atau yang biasanya dikenal dengan istilah daftar ini merupakan bagian yang cukup penting dalam html.Sebab, dengan menggunakan daftar ini Anda dapat membuat bebrapa hal di html.Jadi selain membuat daftar berurutan, Anda juga bisa membuat daftar item dan navigasi web.
Secara garis besar terdapat 3 macam list yang ada di html, yakni ordered list, unordered list, dan description list. Berbeda jenis ini menjadikan cara membuat daftar atau list di html pun berbeda. Selain itu, ketiga jenis ini juga memiliki tampilan dan fungsi yang berbeda-beda. Adapun perbedaan penulisan ketiga jenis list ini hanya ada pada pembuka dan penutupnya saja.
Sementara itu, untuk membuat item pada ordered dan unordered list menggunakan elemen yang sama, yakni <li>..</li>. Untuk lebih jelasnya,mengutip dari situs Portal Jawa, berikut ini beberapa penjelasan dari ketiga macam list pada html tersebut:
-
Ordered list pada html
Mengutip dari situs Portal Jawa, ordered list adalah jenis list berurutan yang ditampilkan dengan menggunakan angka atau nomor atau huruf. Ordered list ini biasanya digunakan untuk menampilkan daftar item yang membutuhkan penomoran.Misalnya, daftar pemenang lomba.Selain itu bisa juga daftar rangking kelas dan urutan lainnya yang membutuhkan nomor.
Ordered list ini dibuat menggunakan tag <ol>. Penulisan item-item list tersebut mengunakan tag <li>. Tag <li> ini diletakkan diantara tag pembka <ol> dan tag penutup </ol>. Berikut ini contoh penulisan script atau kodenya:
<!DOCTYPE html>
<html>
<head>
<title>Belajar Ordered List
<head>
<body>
<p>Urutan nama pemenang lomba :</p>
<ol>
<li>Nama Juara pertama</li>
<li>Nama juara kedua</li>
<li>Nama juara ketiga </li>
</ol>
</body>
<html>
-
Unordered list
Unordered list merupakan jenis list pada html yang digunakan untuk menampilkan daftr yang sifatnya tidak membutuhkan urutan. Misalnya, untuk menampilkan daftar item. Adapun cara membuat daftar atau list di html jenis ini script atau kodenya hampir sama dengan ordered list. Berikut ini script atau kode dari unordered list:
<!DOCTYPE html>
<html>
<head>
<title>Belajar Unordered List</title>
</head>
<body>
<p>Daftar OS komputer :</p>
<ul>
<li>Windows 10</li>
<li>Linux</li>
<li>Mac</li>
</ul>
</body>
</html>
Jika dilihat di browser tampilan tersebut akan menampilkan urutan dengan menggunakan simbol. Berbeda dengan ordered list yang menggunakan angka.
-
Description list
Description list merupakan jenis list yang digunakan untuk menampilkan istilah dan penjelasannya seperti kamus. List ini merupakan jenis list yang jarang digunakan. Selain itu, cara penulisan list ini juga sedikit berbeda dengan ordered dan unordered list. Untuk membuat description list, Anda memerlukan beberapa tag, seperti tag <dl></dl>, <dt></dt>, dan <dd></dd>.
Tag <dl></dl> merupakan tag yang digunakan untuk menampilkan daftar dari description list. Tag <dt></dt> ini digunakan untuk menampilkan sebuah istilah yang akan dijabarkan deskripsinya. Sedangkan tag <dd></dd> untuk menampilkan deskripsi dari istilah yang ditulis dengan menggunakan tag <dt></dt>. Berikut ini contoh script untuk pembuatan 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 adalah bahasa untuk membuat halaman sebuah web.</dd>
<dt>PHP</dt>
<dd>Bahasa Pemrograman yang populer digunakan dalam membuat web disisi server.</dd>
</dl>
</body>
</html>
Jika dibuka di browser tampilan dari description list ini akan terlihat sebuah list yang mana menampilkan sebuah istilah dan penjelasan yang tertata rapi.
Demikian cara membuat daftar atau list di html dari berbagai jenis list yang ada. Selain ketiga jenis list html tersebut masih banyak lagi list pada html yang bisa Anda coba.