Memilih Jenis List

Tiga jenis list kini kita kuasai. Persoalan berikutnya sama dengan ketika memilih elemen teks: keputusan diambil dari makna konten, bukan dari tampilan yang diinginkan. Dua penulis bisa menghasilkan tampilan yang mirip, tetapi markup yang benar hanya dimiliki oleh yang memilih berdasar makna.

Chapter ini merangkum keputusan itu menjadi tiga pertanyaan kunci, satu tabel situasi, dan satu contoh resep yang memakai ketiga jenis list sekaligus.

Pertanyaan Kunci #

Turuni tiga pertanyaan berikut sebelum mengetik tag:

1. Apakah urutan penting? Jika menukar posisi dua butir mengubah makna — langkah, ranking, jenjang — pilihannya ol.
2. Apakah isi butirnya pasangan istilah-nilai? Jika tiap baris memuat istilah plus deskripsi atau nilainya, pilihannya dl.
3. Sisanya — butir-butir sederajat tanpa urutan bermakna — pilihannya ul.

Tabel berikut memetakan situasi yang paling sering dijumpai:

Satu Resep, Tiga Jenis List #

Satu konteks nyata sering membutuhkan ketiga jenis sekaligus. Halaman resep kopi tubruk milik Siti memisahkan bahan, langkah, dan info gizi — dan ketiganya menuntut wadah yang berbeda:

<h2>Resep Kopi Tubruk</h2>
<h3>Bahan</h3>
<ul>
  <li>Dua sendok kopi bubuk</li>
  <li>150 ml air panas</li>
</ul>
<h3>Langkah</h3>
<ol>
  <li>Masukkan kopi bubuk ke dalam cangkir.</li>
  <li>Tuang air panas, lalu aduk sepuluh detik.</li>
  <li>Diamkan dua menit sebelum dinikmati.</li>
</ol>
<h3>Info Gizi</h3>
<dl>
  <dt>Kalori</dt>
  <dd>45 kkal per saji</dd>
  <dt>Kafein</dt>
  <dd>90 mg per saji</dd>
</dl>

Mari kita telaah kode di atas per bagian:

1. Bahan (ul): membalik urutan dua bahan tidak mengubah hasil akhir minuman — urutan bebas, wadahnya netral.
2. Langkah (ol): menuang air sebelum bubuk dimasukkan menghasilkan proses yang salah — urutan memengaruhi makna.
3. Info gizi (dl): tiap baris adalah pasangan istilah dan nilai (“Kalori” → “45 kkal”), bukan butir tunggal sederajat.

Supaya perbedaan penandanya benar-benar terlihat, demo berikut meletakkan data yang sama pada ketiga wadah — menu beserta harganya — lalu menampilkannya berdampingan:

Ketiganya menampilkan menu yang sama, tetapi maknanya tidak sama. ol mengklaim urutan bermakna padahal tidak ada urutan di sana; ul menyatakan butir netral; dl paling jujur untuk pasangan menu dan harga. Tampilan penandanya bisa disamakan lewat CSS — makna tetap dibaca dari tag-nya.

Kesalahan Umum: Paragraf dan br #

Pola lama yang masih sering dijumpai: daftar ditulis sebagai satu paragraf dengan br dan tanda minus:

<p>Belanja Budi hari ini:<br>
- Kopi bubuk<br>
- Gula aren<br>
- Roti tawar</p>

Tanda minus di situ hanyalah karakter teks biasa. Browser tidak mengenalinya sebagai butir daftar, pembaca layar membacanya sebagai satu paragraf panjang tanpa jeda butir, dan CSS tidak bisa menata tiap baris sebagai unit terpisah. Perbaikannya memakai ul yang sesungguhnya:

<p>Belanja Budi hari ini:</p>
<ul>
  <li>Kopi bubuk</li>
  <li>Gula aren</li>
  <li>Roti tawar</li>
</ul>

Perhatikan juga kalimat pengantarnya tetap menjadi paragraf tersendiri — teks pengantar bukan bagian daftar, jadi ia tidak perlu ikut dibungkus.

Ringkasan #

• Tiga pertanyaan kunci: urutan penting? pasangan istilah-nilai? sisanya netral.
• Satu konteks bisa memuat ul, ol, dan dl sekaligus — tiap bagian dinilai sendiri.
• Tampilan penanda bukan pertimbangan; semuanya urusan CSS.
• Paragraf dengan br bukan daftar — pembaca layar dan CSS tidak mengenali butirnya.

Chapter penutup Section ini membawa semua aturan ke lapangan: pola list pada navigasi, breadcrumb, dan artikel yang nyata.