Panduan Lengkap Membuat Daftar List HTML disertai Tampilan Contoh

by Unknown Last updated 12/09/2016

Untuk membuat daftar list menggunakan HTML caranya mudah sekali Anda bisa gunakan tag <ul>, tag <ol>, tag <li>, tag <dl>, tag <dt>, dan tag <dd>. Panduan ini berisi sintaks, contoh penggunaan dan hasil tampilan eksekusi.

Semoga panduan lengkap ini menambah dasar pemahaman tentang list HTML.

Pra-pemahaman:
Semua contoh dan tampilan bekerja baik pada browser dalam kondisi default— Artinya styling (style CSS) mengikuti bawaan/default browser.
Alias jika Anda langsung menerapkan pada blog akan mendapatkan hasil yang berbeda akibat di dalam blog sudah terdapat kode CSS yang dicustom.
Sehingga untuk menuliskan artikel ini pada blog saya mengikuti aturan penulisan CSS,
Saya akan beritahu semua caranya di artikel ini.

Panduan Lengkap Membuat Daftar List HTML disertai Tampilan Contoh

Aturan praktek penulisan kode

Tentang cara yang benar menulis kode program HTML dibawah ini valid menurut standar HTML5.

<!DOCTYPE html>
<html>
<head>
   <meta charset='utf-8'/>
   <title></title>
   <style></style>
</head>
  <body>
  <!-- Isi kode -->
  </body>
</html>

Dapat dilihat blok elemen style tidak kita isi, karena yang akan diuji murni hanya kode HTML. Semua contoh sintaks di artikel ini Anda tulis di blok Isi kode.

Jika anda ingin melihat cara saya menulis kode di blog ini silakan lihat sumber laman dengan mengakses Ctrl+U pada chrome.

Secara garis besar penyajian daftar list ada 3 jenis:

Daftar list tidak berurutan (Unordered list)
Daftar list berurutan (Ordered list)
Daftar list deskripsi (Description list)

Daftar list tidak berurutan

Sintaks:

<ul>
  <li>Daftar X</li>
  <li>Daftar Y</li>
  <li>Daftar Z</li>
</ul>

Contoh:

<h3>Tools riset kata kunci</h3>
<ul>
  <li>Google keyword planner</li>
  <li>Wordtracker</li>
  <li>Ubersuggest</li>
</ul>

Hasil:

Tools riset kata kunci

Google keyword planner
Wordtracker
Ubersuggest

List-item secara default ditampilkan dengan bentuk bulatan hitam (tipe disc). Ini bisa diubah lewat penggunaan atribut HTML selain modifikasi styling menggunakan CSS.

Cara mengganti tanda tipe list tidak berurutan

Tersedia tanda berbentuk lain yakni bentuk lingkaran dalam putih, bujur-sangkar.

Untuk menggantinya tambahkan atribut type='',
sehingga menjadi <ul type='circle'>, <ul type='square'>, atau tanpa tanda <ul type='none'>.

Hasil:

Bahasa jawa makan: <ul type='circle'>

Dahar
Tuang
Badok

Bahasa Sunda makan: <ul type='square'>

Neda
Dahar
Maem

Bahasa Inggris makan: <ul type='none'>

Eat
Meal
Dish

Jika menggunakan gaya penulisan CSS maka sintaks untuk mengganti tanda tipe list menggunakan
<ul style='list-style-type:disc'>.

Dan karena template ini memiliki kode CSS nya sendiri maka metode penulisan default HTML tidak bisa dipakai, harus dimasukkan dalam konteks styling menggunakan aturan penulisan CSS.

Ciri unordered list

List ini dibuka dengan <ul>
Diikuti dengan <li>Isian Daftar</li>
List ditutup dengan </ul>
Berbentuk cakram (bisa disetting ulang)
Daftar menjorok ke dalam
Membentuk blok baru

Daftar list berurutan

Sintaks:

<ol>
  <li>Isian Daftar a</li>
  <li>Isian Daftar b</li>
  <li>Isian Daftar c</li>
</ol>

Contoh:

<h3>Tools Uji kecepatan situs</h3>
<ol>
  <li>Googleagespeed test</li>
  <li>GT-Metrix</li>
  <li>Smallseotools</li>
</ol>

Hasil:

Tools Uji kecepatan situs

Googlepagespeed test
GT-Metrix
Smallseotools

Secara default tanda ordered list berupa urutan angka latin dimulai dari 1 (type='1'), tapi tetap ada tipe lain yang disediakan.

Cara mengganti tanda list berurutan

tanda list dapat diubah dengan jalan menambahkan atribut type=''. Variasinya yakni type='A', type='a', type='I', type='i' yang masing-masing dicontohkan di bawah.

Contoh:

Nama Terminal bus di Semarang— Jawa Tengah: <ol type='A'>

Terboyo
Banyumanik
Penggaron

Nama Terminal bus di Sumedang— Jawa Barat: <ol type='a'>

Wado
Cileunyi
Tanjung Sari

Kuliner khas kota Salatiga— Jawa Tengah: <ol type='I'>

Enting enting gepuk
Wedang ronde
Kopi kocomoto

Kuliner khas kota Bandung— Jawa Barat: <ol type='i'>

Bandrek
Roti merdeka
Peuyeum

Untuk mengubah nilai angka mulai digunakan atribut <ol start=''>

Contoh:

Lokasi wisata di Kabupaten Ambarawa: <ol start='7'>

Museum kereta api
Gua maria kerep
Candi Gedong songo Bandungan

Ciri ordered list

List dibuka dengan <ol>
Diikuti dengan <li>Isian Daftar</li>
List ditutup dengan </ol>
Ada angka yang berurutan
Daftar menjorok ke dalam
Membentuk blok baru

Daftar list deskripsi

Tipe ini memang agak jarang dipakai padahal fungsinya unik yakni memberikan deskripsi tentang istilah yang digunakan dalam daftar tersebut.

Sintaks:

<dl>
<dt>Data term</dt>
<dd>Data description</dd>
</dl>

Contoh:

<dl>
<dt>SEO</dt>
<dd>SEO adalah singkatan dari Search Engine Optimization.</dd>
<dd>Terminologi ini diperkenalkan pertama kali oleh Bruce Clay di 1997 Wikipedia.</dd>
<dd>SEO telah menjadi tool sentral dalam internet marketing.</dd>
</dl>

Hasil:

SEO: SEO adalah singkatan dari Search Engine Optimization.; Terminologi ini diperkenalkan pertama kali oleh «Bruce Clay» di 1997 Wikipedia.; SEO telah menjadi tool sentral dalam internet marketing.

Daftar list bersarang (Nested HTML list)

Sejauh Ini Anda sudah belajar bahwa untuk membuat daftar list dalam HTML digunakan tag <ul>, <ol>, <li>, <dl>, <dt>, dan <dd> dengan pola tunggal, yang artinya list tidak memiliki anak list.

Padahal elemen list bisa menampung elemen list lain di dalam dirinya, termasuk menampung elemen dengan tag yang berbeda.

Sintaks:

<ul>
<li>daftar isian</li>
<li>daftar isian
   <ul>
     <li>anak daftar isian</li>
     <li>anak daftar isian</li>
  </ul>
</li>
<li>daftar isian</li>
</ul>

Contoh:

<p>Faktor SEO Onpage</p>
<ul>
<li>Tag Judul</li>
<li>Template
   <ul>
     <li>Responsive</li>
     <li>Super cepat</li>
  </ul>
</li>
<li>Optimasi gambar</li>
</ul>

Hasil:

Faktor SEO Onpage

Tag Judul
Template
- Responsive
- Super cepat
Optimasi gambar

Seperti itulah yang disebut elemen bersarang. Diperlukan kehatian-hatian untuk meletakkan tag pembuka dan penutup baru.

Kesimpulan

Anda harus menyusun daftar list dengan pola yang benar, tujuannya agar mesin pencari mudah memahami apa yang anda tulis. Dengan konten yang bersabat dengan mesin pencari sama artinya dengan bersahabat dengan pengguna.

Ingat mesin bertingkah ingin disukai oleh pengguna sehingga mesin pencari berusaha berpikir (algoritma) sama seperti pengalaman pembaca Anda.

Pemahaman mengenai atribut HTML semakin penting supaya tag yang ada semakin jelas perannya sebagai pendeskripsi teks dan tepat target.

Anda punya panduan tips dan trik khusus selama belajar cara membuat daftar list menggunakan HTML? bagikan ceritamu.

Referensi:
http://www.w3schools.com/html/html_list.asp
http://www.duniailkom.com/belajar-html-cara-membuat-daftarlist-di-html-tag-li/