KAL
Menu

Daftar

Elemen ul, ol, dan dl, daftar bersarang, serta jebakan markup daftar.

Daftar isi

HTML menyediakan tiga elemen daftar untuk mengelompokkan butir yang saling berkaitan, yaitu ul untuk deret tanpa urutan, ol untuk deret yang urutannya bermakna, dan dl untuk pasangan istilah dengan penjelasannya. Topik ini membahas struktur ketiganya, atribut penomoran pada ol, teknik daftar bersarang, serta jebakan markup yang sering muncul pada daftar. Setelah membacanya, daftar yang valid dan terbaca oleh alat bantu dapat ditulis secara konsisten.

ul untuk deret tanpa urutan#

Elemen ul (unordered list) adalah daftar yang butir-butirnya tidak terikat urutan. Isinya terdiri atas satu atau lebih elemen li (list item), dan itulah satu-satunya anak yang sah di dalam ul selain elemen pendukung seperti script dan template. Browser meletakkan penanda butir dan indentasi secara bawaan, tetapi tampilan itu hanya efek samping gaya, sedangkan maknanya tetap berupa deret yang urutannya tidak berpengaruh. Daftar belanja, kumpulan fitur, dan barisan tautan navigasi adalah contoh yang tepat karena menampilkan atau menukar urutannya tidak mengubah pesan apa pun.

html Contoh: daftar belanja dengan ul dan li 
<ul>
  <li>Beras</li>
  <li>Minyak goreng</li>
  <li>Gula pasir</li>
</ul>

Setiap li berdiri sebagai satu butir utuh. Isinya boleh berupa frasa pendek seperti contoh di atas, tetapi li juga boleh memuat paragraf atau bahkan daftar lain, sehingga satu butir bisa sepanjang yang diperlukan. Perhatikan bahwa tidak terikat urutan bukan berarti tanpa struktur, karena pembaca layar (screen reader) tetap mengumumkan jumlah butirnya terlebih dahulu sebelum membaca isinya. Informasi itu membantu pembaca menilai panjang daftar sebelum memutuskan mendengarkannya sampai akhir.

ol dan atribut penomorannya#

Elemen ol (ordered list) adalah daftar yang urutan butirnya bermakna, misalnya langkah prosedur, peringkat, dan daftar pasal. Browser menomori butirnya secara otomatis, sehingga nomor tidak pernah ditulis manual di dalam li. Tiga atribut mengendalikan penomoran tersebut.

  • type mengganti gaya penomor menjadi huruf kecil (a), huruf besar (A), angka Romawi kecil (i), angka Romawi besar (I), atau angka biasa (1). Atribut ini dipertahankan dalam standar karena gaya penomor sering menjadi bagian makna dokumen, misalnya pasal yang dilabeli angka Romawi.
  • start menerima bilangan bulat dan menetapkan nomor butir pertama. Nilainya boleh nol atau negatif sesuai kebutuhan dokumen yang penomorannya berlanjut dari daftar sebelumnya.
  • reversed adalah atribut boolean tanpa nilai, dan penulisannya cukup nama atributnya saja. Urutan butir dalam markup tetap sama, sedangkan nomornya dihitung menurun.
html Contoh: ol dengan type huruf kecil dan start 3 
<ol type="a" start="3">
  <li>Simpan berkasnya</li>
  <li>Muat ulang browser</li>
  <li>Periksa tampilannya</li>
</ol>

Pada contoh tersebut, butirnya bernomor c, d, dan e tanpa satu angka pun ditulis di dalam markup. Apabila butir tengah disisipkan atau dihapus, penomoran menyesuaikan diri secara otomatis, dan itulah alasan nomor manual dihindari. Atribut value pada li juga tersedia untuk menimpa nomor satu butir secara tunggal, tetapi kebutuhan semacam itu jarang muncul pada dokumen biasa.

Atribut-atribut ol berinteraksi secara langsung dengan penomoran yang tampak. Jalankan demo berikut, klik tombol-tombolnya, lalu amati bagaimana type, start, dan reversed mengubah nomor pada daftar yang sama tanpa menyentuh satu pun li-nya.

Kode sumber demo
<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <title>Demo atribut ol</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 16px; color: #1e293b; }
    ol { border: 1px solid #cbd5e1; border-radius: 6px; padding: 12px 36px; }
    button { margin: 4px 8px 4px 0; padding: 6px 12px; cursor: pointer; }
    p { margin: 12px 0 4px; font-size: 14px; }
  </style>
</head>
<body>
  <ol id="langkah" type="1" start="1">
    <li>Buka editor teks</li>
    <li>Tulis markup daftar</li>
    <li>Simpan berkasnya</li>
  </ol>
  <p>Gaya penomoran:</p>
  <button type="button" data-tipe="1">1, 2, 3</button>
  <button type="button" data-tipe="a">a, b, c</button>
  <button type="button" data-tipe="I">I, II, III</button>
  <p>Pengendalian lain:</p>
  <button type="button" id="terbalik">Balik urutan (reversed)</button>
  <button type="button" id="geser">Mulai dari 3 (start)</button>
  <script>
    const daftar = document.getElementById('langkah');
    document.querySelectorAll('button[data-tipe]').forEach((tombol) => {
      tombol.addEventListener('click', () => {
        daftar.setAttribute('type', tombol.dataset.tipe);
      });
    });
    document.getElementById('terbalik').addEventListener('click', () => {
      daftar.toggleAttribute('reversed');
    });
    document.getElementById('geser').addEventListener('click', () => {
      daftar.setAttribute('start', '3');
    });
  </script>
</body>
</html>

dl untuk pasangan istilah dan penjelasan#

Elemen dl (description list) mengelompokkan pasangan istilah dengan penjelasannya. Istilah ditulis dalam dt (description term), sedangkan penjelasannya ditulis dalam dd (description details). Satu dt boleh diikuti lebih dari satu dd, dan sebaliknya beberapa dt boleh berbagi satu dd, sehingga struktur ini lebih lentur daripada tabel dua kolom. Glosarium, metadata buku seperti pasangan penulis dan judul, serta tanya jawab singkat adalah penggunaan yang umum. Pada pola tanya jawab, pertanyaan menjadi dt dan jawabannya menjadi dd, sehingga keduanya tetap terbaca sebagai pasangan tanpa perlu tabel.

html Contoh: glosarium kecil dengan dl, dt, dan dd 
<dl>
  <dt>Atribut</dt>
  <dd>Pasangan nama dan nilai yang menambah informasi pada elemen.</dd>
  <dt>Elemen kosong</dt>
  <dd>Elemen tanpa isi dan tanpa tag penutup, seperti br dan img.</dd>
</dl>

Perhatikan bahwa dl tidak menerima li. Kesalahan yang lazim adalah menyalin pola ul lalu menulis li di dalam dl, dan markup semacam itu melanggar model kontennya. Bila butir yang dibutuhkan bukan pasangan istilah dan penjelasan, ul atau ol adalah pilihan yang benar. Sebaliknya, bila datanya memang berupa kumpulan pasangan dengan keterangan yang panjang, dl menghasilkan markup yang lebih ringkas daripada tabel. Variasi yang sah pun lentur, misalnya satu istilah dengan dua ejaan yang masing-masing memiliki penjelasan sendiri.

Daftar bersarang#

Daftar bersarang adalah daftar yang berada di dalam butir daftar lain. Aturannya satu kalimat, yaitu subdaftar diletakkan di dalam li induknya, bukan sebagai anak langsung ul atau ol. Dengan penempatan itu, butir anak menjadi bagian dari butir induknya dalam pohon dokumen, sehingga pembaca layar dapat mengumumkan keterkaitannya. Tidak ada batas resmi kedalaman penyarangan, tetapi daftar yang terlalu dalam lebih mudah dipahami apabila dipecah menjadi beberapa daftar dengan heading masing-masing.

html Contoh: subdaftar di dalam li induknya 
<ul>
  <li>Peralatan masak
    <ul>
      <li>Panci</li>
      <li>Teflon</li>
    </ul>
  </li>
  <li>Peralatan saji
    <ul>
      <li>Piring</li>
      <li>Sendok</li>
    </ul>
  </li>
</ul>

Struktur bersarang muncul berulang kali ketika markup dibangun dari data, misalnya menu yang datanya berupa kumpulan kategori berisi item. Fungsi JavaScript berikut membangun markup ul bersarang dari susunan data, dan hasilnya persis berupa pola pada contoh di atas.

js 
const kategori = [
  { nama: "Kopi", item: ["Espresso", "Kopi susu"] },
  { nama: "Teh", item: ["Teh melati", "Teh oolong"] },
  { nama: "Cokelat", item: [] },
];

function buatUl(susunan) {
  let markup = "<ul>\n";
  for (const kelompok of susunan) {
    markup += "  <li>" + kelompok.nama;
    if (kelompok.item.length > 0) {
      markup += "\n    <ul>\n";
      for (const item of kelompok.item) {
        markup += "      <li>" + item + "</li>\n";
      }
      markup += "    </ul>\n  ";
    }
    markup += "</li>\n";
  }
  markup += "</ul>";
  return markup;
}

console.log(buatUl(kategori));
text Keluaran 
<ul>
  <li>Kopi
    <ul>
      <li>Espresso</li>
      <li>Kopi susu</li>
    </ul>
  </li>
  <li>Teh
    <ul>
      <li>Teh melati</li>
      <li>Teh oolong</li>
    </ul>
  </li>
  <li>Cokelat</li>
</ul>

Kelompok Cokelat tidak punya subdaftar karena susunannya kosong, sehingga percabangan pada fungsi melewati bagian itu. Perhatikan pula bahwa tag pembuka subdaftar berada di dalam li induknya, sedangkan tag penutup li baru muncul setelah subdaftar selesai. Tiga baris terakhir setiap kelompok, yaitu penutup subdaftar, spasi, lalu penutup li, adalah bentuk yang persis dituntut aturan penyarangan.

Menyatukan contoh dalam satu berkas#

Berkas berikut merangkum seluruh unsur topik ini dalam satu dokumen utuh. Daftar belanja menggunakan ul karena urutannya tidak berpengaruh, sedangkan langkah memasak menggunakan ol karena urutannya menentukan hasil. Daftar peralatan memperlihatkan penyarangan yang benar, dan glosarium menutup dokumen dengan dl. Urutan penyajiannya mengikuti urutan bahasan, yaitu ul, ol, penyarangan, lalu dl.

html daftar.html 
<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Contoh daftar</title>
</head>
<body>
  <h1>Catatan belanja dan persiapan masak</h1>

  <h2>Belanja bahan</h2>
  <p>Urutan pembelian tidak penting, sehingga deretnya menggunakan ul.</p>
  <ul>
    <li>Beras</li>
    <li>Minyak goreng</li>
    <li>Gula pasir</li>
  </ul>

  <h2>Langkah memasak</h2>
  <p>Urutan langkah menentukan hasil, sehingga deretnya menggunakan ol.</p>
  <ol type="1" start="1">
    <li>Cuci beras hingga airnya jernih.</li>
    <li>Didihkan air dalam panci.</li>
    <li>Masukkan beras dan kecilkan api.</li>
  </ol>

  <h2>Peralatan yang bersarang</h2>
  <p>Setiap kelompok alat menjadi satu butir induk yang memuat subdaftar.</p>
  <ul>
    <li>Peralatan masak
      <ul>
        <li>Panci</li>
        <li>Teflon</li>
      </ul>
    </li>
    <li>Peralatan saji
      <ul>
        <li>Piring</li>
        <li>Sendok</li>
      </ul>
    </li>
  </ul>

  <h2>Glosarium istilah resep</h2>
  <dl>
    <dt>Tumis</dt>
    <dd>Memasak bahan dengan minyak sedikit di atas api besar.</dd>
    <dt>Meredam</dt>
    <dd>Merendam bahan sebentar ke air mendidih, lalu ke air dingin.</dd>
  </dl>
</body>
</html>

Simpan berkasnya dengan nama apa pun yang berakhiran .html, lalu buka di browser untuk melihat penomoran dan indentasinya. Kedua subdaftar pada bagian peralatan mencontohkan penempatan yang sah, yaitu seluruh subdaftar terbungkus li induknya. Selama menyunting, menambah butir baru hanya berarti menambah satu li, sedangkan nomor dan penandanya diurus browser. Ujilah juga dengan menambahkan atribut reversed pada ol untuk melihat penomorannya turun tanpa mengubah satu butir pun. Perubahan semacam itu tidak menyentuh satu pun isi li. Apabila salah satu subdaftar dipindah keluar dari li-nya, dokumen kemungkinan besar tetap tampak sama di layar karena parser browser memaafkan banyak kesalahan. Meskipun demikian, struktur semantiknya rusak dan validator akan melaporkan temuan.

Kesalahan umum#

Empat kesalahan berikut paling sering muncul saat menulis markup daftar, dan semuanya berkaitan dengan model konten atau tujuan elemen.

  • Menulis teks langsung di dalam ul tanpa li, biasanya untuk menaruh judul di atas butir. Markup semacam itu melanggar model konten, dan teksnya bukan bagian dari butir mana pun sehingga pembaca layar dapat melewatkannya. Letakkan judul pada heading di luar daftar, atau jadikan teks itu butir pertama di dalam li.
  • Menyarangkan subdaftar sebagai anak langsung ul alih-alih di dalam li. Tampilannya bisa tampak benar karena indentasi bawaan, tetapi butir anak kehilangan ikatan induknya dan struktur daftar terbelah. Pindahkan seluruh subdaftar ke dalam li induknya.
  • Menggunakan daftar demi indentasi dengan menghapus penandanya lewat CSS. Markup ul menyatakan ada deret butir, padahal yang dibutuhkan hanyalah jarak. Gunakan margin atau padding CSS pada elemen yang memang menyatakan isinya.
  • Menulis nomor manual di dalam li daftar ol, misalnya 1. Cuci beras. Browser menambahkan nomornya sendiri sehingga tampil ganda, dan penomoran tidak menyesuaikan saat butir disisipkan. Biarkan ol yang menomori, lalu atur gayanya dengan type atau start.

Ringkasan#

  • ul mengelompokkan butir tanpa urutan dan hanya berisi li, sedangkan ol mengelompokkan butir berurutan dengan penomoran otomatis.
  • Atribut type, start, dan reversed pada ol mengatur gaya penomor, nilai awal, dan arah penghitungan.
  • dl memasangkan dt untuk istilah dengan dd untuk penjelasannya, termasuk satu istilah dengan beberapa penjelasan.
  • Subdaftar selalu diletakkan di dalam li induknya agar keterkaitan butir tetap terbaca oleh alat bantu.

Referensi#