Penggunaan Lists yang Tepat

Kita kini mengenal tiga jenis list: ul untuk item setara, ol untuk urutan bermakna, dan dl untuk pasangan istilah dan penjelasan. Dengan pilihan sebanyak itu, pertanyaan bergeser dari “bagaimana menulis list” menjadi “list mana yang tepat untuk konten ini”. Jawabannya selalu berangkat dari semantik, yaitu makna yang kita inginikan pada konten, bukan dari tampilan yang sedang kita bayangkan. Chapter ini merangkum seluruh materi section Lists menjadi satu matriks keputusan, beberapa kebiasaan yang perlu dijaga, dan satu studi kasus yang menyajikan konten dari tiga sudut pandang.

Matriks Keputusan ul, ol, dan dl #

Cara memilih yang paling andal adalah membaca kontennya dan menjawab pertanyaan secara berurutan:

Urutan pertanyaan di atas penting. Konten metadata produk misalnya, berupa pasangan label dan nilai, sehingga dl menjawabnya sebelum kita sempat memikirkan nomor. Sebaliknya, daftar bahan resep memenuhi syarat item setara sehingga ul menang, meskipun beberapa orang tergoda menomorinya. Ketiga pilihan menghasilkan tampilan yang berbeda secara bawaan, tetapi tampilan bukan dasar keputusannya; bagian berikut menjelaskan alasannya.

Semantik Menentukan, Bukan Tampilan #

Bullet dan nomor yang muncul pada daftar hanyalah dekorasi dari stylesheet bawaan browser, dan dekorasi dapat diubah. Properti CSS list-style-type mampu menampilkan angka pada ul, maupun menghilangkan seluruh penanda pada ol. Artinya, “yang bernomor” bukan ciri tetap ol di mata tampilan; yang tetap dan tidak dapat diubah CSS adalah makna urutan yang terkandung dalam struktur. Ketika kontennya memang berurutan, tulis ol walau desainnya tanpa nomor; ketika urutannya tak bermakna, tulis ul walau desainnya bernomor.

Kebiasaan yang Perlu Dijaga #

Beberapa kebiasaan berikut melengkapi matriks di atas, dan semuanya berangkat dari prinsip yang sama, yaitu list dipakai untuk konten yang memang berupa daftar:

• Menu navigasi ditulis sebagai ul di dalam nav: kumpulan link navigasi pada dasarnya adalah item setara, dan pembungkus nav menandai perannya sebagai navigasi; section Semantic HTML membahas elemen tersebut secara khusus.
• Jangan memakai list untuk layout semu: menyusun li kosong hanya demi indentasi atau jarak mengotori makna struktur; kebutuhan tata letak ditangani CSS.
• Daftar dengan satu item tetap sah: satu li di dalam ul valid menurut spesifikasi, dan tetap dikenali sebagai daftar; jumlah item tidak mengubah jenis kontennya.
• Manfaatkan informasi dari screen reader: pembaca layar umumnya mengumumkan masuk ke daftar beserta jumlah itemnya, misalnya “list, 4 items”, lalu mengumumkan saat daftar berakhir. Pengunjung yang mengandalkan pembaca layar jadi mengetahui panjang daftar sebelum mendengarkan seluruhnya, dan informasi itu hanya tersedia bila kita memakai elemen list yang benar.

Studi Kasus: Satu Konten, Tiga Penyajian #

Kedai kopi Siti menyajikan satu konten yang sama, yaitu minumannya, dari tiga sudut pandang: rasa yang tersedia sebagai ul karena urutannya bebas, langkah memesan sebagai ol karena tahapannya berurutan, dan detail menu unggulan sebagai dl karena berupa pasangan label dan nilai. Simpan file berikut sebagai studi-kasus-lists.html:

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Menu Kedai Siti</title>
</head>
<body>
  <nav>
    <ul>
      <li><a href="index.html">Beranda</a></li>
      <li><a href="menu.html">Menu</a></li>
    </ul>
  </nav>
  <h1>Kedai Kopi Siti</h1>

  <h2>Rasa Minuman Hari Ini</h2>
  <p>Urutan pada daftar ini bukan peringkat; seluruh rasa tersedia.</p>
  <ul>
    <li>Kopi susu gula aren</li>
    <li>Teh tarik</li>
    <li>Cokelat panas</li>
  </ul>

  <h2>Langkah Memesan</h2>
  <p>Kerjakan berurutan agar pesanan tidak tertukar:</p>
  <ol>
    <li>Pilih rasa minuman.</li>
    <li>Tentukan ukuran gelas.</li>
    <li>Bayar di kasir dan simpan struk.</li>
    <li>Ambil pesanan saat nomor dipanggil.</li>
  </ol>

  <h2>Detail Menu Unggulan</h2>
  <dl>
    <dt>Nama</dt>
    <dd>Kopi Susu Gula Aren</dd>
    <dt>Harga</dt>
    <dd>Rp18.000</dd>
    <dt>Stok</dt>
    <dd>Tersedia 40 gelas per hari</dd>
  </dl>
</body>
</html>

Output yang Dihasilkan:

Jendela browser menampilkan:
  - Menu navigasi dua tautan tanpa bullet
  - Judul "Kedai Kopi Siti" dan tiga bagian dengan heading h2
  - Daftar rasa berbullet, langkah pemesanan bernomor 1-4,
    dan pasangan Nama/Harga/Stok dengan penjelasan menjorok

Mari kita telaah keputusan di balik tiap bagian:

1. Baris 9-14 (nav dengan ul): menu navigasi berupa item setara sehingga ul; pembungkus nav menandai perannya.
2. Baris 19-23 (ul): rasa minuman tidak memiliki peringkat, dan paragraf di atasnya menegaskan hal itu kepada pembaca.
3. Baris 27-32 (ol): langkah pemesanan wajib berurutan; nomor yang dirender browser mengikuti struktur, bukan diketik manual.
4. Baris 35-42 (dl): nama, harga, dan stok berupa pasangan label dan nilai; dt dan dd mengikat keduanya secara eksplisit.

Satu konten, tiga keputusan, dan seluruhnya lahir dari pertanyaan yang sama pada matriks di atas. Dengan section ini, materi Lists tuntas: dari ul, ol, dl, list bersarang, hingga cara memilihnya. Konten berikutnya yang sering kita butuhkan adalah data dua dimensi dalam baris dan kolom; penyajiannya menjadi topik section Tables.

Referensi resmi untuk pendalaman:

• MDN Web Docs — Elemen ul
• MDN Web Docs — Learn: HTML lists
• MDN Web Docs — list-style-type
• WHATWG — HTML Living Standard: Grouping content

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Menu Kedai Siti</title>
</head>
<body>
  <nav>
    <ul>
      <li><a href="index.html">Beranda</a></li>
      <li><a href="menu.html">Menu</a></li>
    </ul>
  </nav>
  <h1>Kedai Kopi Siti</h1>

  <h2>Rasa Minuman Hari Ini</h2>
  <p>Urutan pada daftar ini bukan peringkat; seluruh rasa tersedia.</p>
  <ul>
    <li>Kopi susu gula aren</li>
    <li>Teh tarik</li>
    <li>Cokelat panas</li>
  </ul>

  <h2>Langkah Memesan</h2>
  <p>Kerjakan berurutan agar pesanan tidak tertukar:</p>
  <ol>
    <li>Pilih rasa minuman.</li>
    <li>Tentukan ukuran gelas.</li>
    <li>Bayar di kasir dan simpan struk.</li>
    <li>Ambil pesanan saat nomor dipanggil.</li>
  </ol>

  <h2>Detail Menu Unggulan</h2>
  <dl>
    <dt>Nama</dt>
    <dd>Kopi Susu Gula Aren</dd>
    <dt>Harga</dt>
    <dd>Rp18.000</dd>
    <dt>Stok</dt>
    <dd>Tersedia 40 gelas per hari</dd>
  </dl>
</body>
</html>