List HTML
Apa yang terlintas di pikiran Anda ketika diminta menulis daftar atau list di halaman HTML?
Jika Anda baru belajar HTML, mungkin Anda akan membuatnya menggunakan tag <p>.
Seperti berikut:
<p>Bahan Kue Lapis</p>
<p>- 250 gram tepung beras</p>
<p>- 250 gram kanji</p>
<p>- 250 gram gula pasir</p>
Hasilnya memang terlihat mirip, tapi tag <p> tidak dirancang untuk membuat daftar, melainkan paragraf.
Penggunaan tag yang tepat berdasarkan fungsinya merupakan salah satu aspek penting yang perlu diperhatikan saat membuat elemen HTML, termasuk saat membuat list.
HTML menyediakan tag khusus yang dirancang untuk membuat beragam jenis list, termasuk daftar terurut maupun tak terurut.
Oleh karena itu, mari kita pelajari tag tersebut.
Jenis List HTML
Ada beberapa tag list yang bisa kita gunakan di HTML, berikut tiga yang paling sering digunakan:
<ol>- daftar terurut.<ul>- daftar tak terurut.<dl>- daftar deskripsi.
Ketiganya merupakan tag pembungkus yang mendeskripsikan jenis daftar yang ingin dibuat, item untuk tag <ol> dan <ul> ditulis menggunakan tag <li>.
Sedangkan item tag <dl>, bisa ditulis menggunakan <dt> atau <dd>.
Mari kita pelajari satu per satu.
Ordered List (Terurut)
Untuk membuat daftar terurut, kita bisa menggunakan tag <ol>. Diantara tag pembuka dan penutup tag <ol>, kita bisa menulis daftar item menggunakan tag <li>.
Sesuai namanya, tag ini biasanya digunakan untuk membuat daftar dimana urutan itu penting, seperti langkah-langkah untuk melakukan sesuatu atau hal lainnya.
Browser akan secara otomatis memberikan nomor berurutan untuk setiap item yang di tulis di dalam tag <li>.
Contoh:
<ol>
<li>Tuangkan air bersih ke dalam panci.</li>
<li>Letakkan panci diatas kompor.</li>
<li>Nyalakan kompor dengan api yang tidak terlalu besar.</li>
<li>Tunggu hingga air mendidih.</li>
<li>Matikan kompor.</li>
<li>Tunggu air sampai dingin dan siap diminum.</li>
</ol>
Hasil:
Unordered List (Tak Terurut)
Untuk membuat daftar tak terurut, kita bisa menggunakan tag <ul>.
Sama seperti tag sebelumnya, setiap item bisa ditulis dalam tag <li>. Karena ini daftar tak terurut, setiap item tidak lagi diberikan angka, melainkan bullet.
Tag ini cocok digunakan untuk membuat daftar dimana urutan tidak penting.
Contoh:
<ul>
<li>250 gram tepung beras</li>
<li>250 gram kanji</li>
<li>250 gram gula pasir</li>
</ul>
Hasil:
Description List (Daftar Deskripsi)
Untuk membuat daftar deskripsi, kita bisa menggunakan tag <dl>. Tag ini biasanya digunakan untuk membuat glosarium.
Kita bisa menulis istilah tertentu dalam tag <dt> (description term), sedangkan untuk deskripsinya ditulis dalam tag <dd> (description details).
Contoh:
<dl>
<dt>Functional Programming</dt>
<dd>
Functional Programming adalah paradigma pemrograman deklaratif di mana
definisi fungsi adalah pohon ekspresi yang masing-masing mengembalikan
nilai, bukan urutan pernyataan imperatif yang mengubah status program.
</dd>
<dt>Pemrograman Deklaratif</dt>
<dd>
pemrograman deklaratif adalah paradigma pemrograman—gaya membangun struktur
dan elemen program komputer—yang mengekspresikan logika komputasi tanpa
menjelaskan aliran kontrolnya.
</dd>
</dl>
Hasil:
Menyesuaikan Tipe Marker Item List
Secara default, item yang dibungkus dengan tag <ul> menggunakan bullet, sedangkan <ol> menggunakan angka.
Jika kita tidak ingin menggunkaan marker default untuk setiap item dalam daftar, kita bisa menyesuaikannya menggunakan atribut style.
Jangan gunakan atribut type karena tidak didukung di HTML5, solusinya gunakan properti CSS list-style-type.
Anda bisa menggunakan atribut ini di setiap tag item, atau tag pembungkusnya.
Ada banyak nilai list-style-type yang bisa kita gunakan, diantaranya:
disc- bullet.circle- lingkaran.square- persegi.lower-roman- angka romawi kecil.upper-roman- angka romawi besar.arabic-indic- angka dalam bahasa Arab.
Contoh:
<ul>
<li style="list-style-type: disc">disc</li>
<li style="list-style-type: circle">circle</li>
<li style="list-style-type: square">square</li>
<li style="list-style-type: lower-roman">lower-roman</li>
<li style="list-style-type: upper-roman">upper-roman</li>
<li style="list-style-type: arabic-indic">arabic-indic</li>
</ul>
Hasil:
List di Dalam List (Daftar Bersarang)
Kadang-kadang kita juga perlu menulis item yang memiliki item atau list di dalam list (daftar bersarang).
Dalam kasus seperti ini, kita tidak perlu memecahnya ke dalam daftar yang berbeda karena kita bisa langsung menulis di dalam daftar yang sama, ini adalah pola yang umum.
Contoh:
<ol>
<li>
Javascript
<ul>
<li>Vue JS</li>
<li>Svelte JS</li>
<li>Next JS</li>
</ul>
</li>
<li>
Java
<ul>
<li>Servlet API</li>
<li>JSP</li>
<li>JDBC API</li>
</ul>
</li>
</ol>
Hasil:
