List Bersarang

Daftar Belanja yang Punya Anak Daftar

Bayangkan kamu menulis daftar belanja di kertas: "Buah", lalu di bawahnya dengan indentasi kamu tulis "Apel, Pisang, Mangga" sebagai rincian dari Buah. Lalu "Sayur" dengan rinciannya sendiri. Struktur seperti ini, daftar di dalam daftar, ada di mana-mana: daftar isi buku (bab berisi sub-bab), menu restoran (kategori berisi hidangan), sampai silsilah keluarga (orang tua berisi anak-anaknya).

Di HTML, konsep ini disebut list bersarang (nested list). Kenapa ia penting? Karena banyak hal di web pada dasarnya adalah list bertingkat: menu navigasi dengan dropdown, komentar yang punya balasan, dan struktur folder. Memahaminya berarti memahami kerangka banyak komponen web.

Aturan Sakralnya: List Harus Tinggal di Dalam li

Ada satu aturan yang tidak bisa ditawar: sebuah ul atau ol yang bersarang harus berada di dalam sebuah li, bukan langsung di dalam ul/ol induknya. Analoginya: rincian "Apel, Pisang" adalah milik item "Buah", jadi ia harus ditulis di dalam baris "Buah", bukan sebagai tetangga sejajarnya.

<ul>
  <li>Buah
    <ul>
      <li>Apel</li>
      <li>Pisang</li>
      <li>Mangga</li>
    </ul>
  </li>
  <li>Sayur
    <ul>
      <li>Bayam</li>
      <li>Wortel</li>
    </ul>
  </li>
</ul>

Perhatikan: ul dalam dibuka setelah teks "Buah" tetapi sebelum </li> penutupnya. Ia adalah anak dari li "Buah". Browser boleh saja merender struktur yang salah, tetapi screen reader akan mengumumkan hierarki yang kacau, dan validatormu akan protes.

Contoh 1: Dari Sederhana ke Campuran

List bersarang tidak harus sejenis: ol bisa berisi ul, dan sebaliknya. Contoh rencana liburan:

<ol>
  <li>Hari 1: Tiba di Yogyakarta
    <ul>
      <li>Check-in hotel</li>
      <li>Makan malam di Malioboro</li>
    </ul>
  </li>
  <li>Hari 2: Wisata Candi
    <ul>
      <li>Candi Prambanan pagi hari</li>
      <li>Candi Ratu Boko saat senja</li>
    </ul>
  </li>
  <li>Hari 3: Pulang
    <ul>
      <li>Beli oleh-oleh bakpia</li>
      <li>Check-out dan ke bandara</li>
    </ul>
  </li>
</ol>

Urutan hari memakai ol karena berangka dan berurutan, sedangkan kegiatan dalam tiap hari memakai ul karena tidak ada urutan wajib. Memilih jenis list yang tepat di tiap level adalah bagian dari keahlian ini.

Contoh 2: Tiga Kasus Nyata

Daftar isi dokumen. Ini penggunaan paling klasik, mirip hierarki heading tetapi dalam bentuk list yang bisa diklik:

<nav aria-label="Daftar isi">
  <ol>
    <li><a href="#bab-1">Bab 1: Pengenalan</a>
      <ol>
        <li><a href="#bab-1-1">1.1 Latar Belakang</a></li>
        <li><a href="#bab-1-2">1.2 Rumusan Masalah</a></li>
      </ol>
    </li>
    <li><a href="#bab-2">Bab 2: Pembahasan</a>
      <ol>
        <li><a href="#bab-2-1">2.1 Landasan Teori</a></li>
        <li><a href="#bab-2-2">2.2 Analisis Data</a>
          <ol>
            <li><a href="#bab-2-2-1">2.2.1 Data Primer</a></li>
            <li><a href="#bab-2-2-2">2.2.2 Data Sekunder</a></li>
          </ol>
        </li>
      </ol>
    </li>
  </ol>
</nav>

Menu navigasi dengan dropdown. Inilah kerangka semua menu navigasi website di dunia:

<nav aria-label="Navigasi utama">
  <ul>
    <li><a href="/">Beranda</a></li>
    <li><a href="/produk">Produk</a>
      <ul>
        <li><a href="/produk/makanan">Makanan</a></li>
        <li><a href="/produk/minuman">Minuman</a></li>
        <li><a href="/produk/aksesoris">Aksesoris</a></li>
      </ul>
    </li>
    <li><a href="/tentang">Tentang Kami</a></li>
  </ul>
</nav>

Nantinya CSS akan menyembunyikan sub-menu dan menampilkannya saat hover, tetapi fondasi HTML-nya tetap list bersarang seperti ini.

Silsilah keluarga sederhana.

<ul>
  <li>Kakek Budi dan Nenek Siti
    <ul>
      <li>Ayah Andi
        <ul>
          <li>Saya</li>
          <li>Adik Rina</li>
        </ul>
      </li>
      <li>Tante Dewi
        <ul>
          <li>Sepupu Fajar</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

Kesalahan Umum Pemula

Salah: list bersarang langsung di dalam list, tanpa li.

<!-- SALAH -->
<ul>
  <li>Buah</li>
  <ul>
    <li>Apel</li>
  </ul>
</ul>

<!-- BENAR -->
<ul>
  <li>Buah
    <ul>
      <li>Apel</li>
    </ul>
  </li>
</ul>

Ini kesalahan paling umum. Ingat: sub-list adalah isi dari sebuah item, jadi ia harus berada di dalam li miliknya.

Salah: indentasi palsu dengan spasi atau  . Sebagian pemula membuat "tampilan" bertingkat seperti ini:

<!-- SALAH: terlihat bertingkat, tapi bukan list -->
<p>Daftar belanja:<br>&nbsp;&nbsp;- Buah<br>&nbsp;&nbsp;&nbsp;&nbsp;- Apel</p>

Browser dan screen reader hanya melihat satu paragraf biasa. Struktur semu ini tidak bisa dinavigasi sebagai list.

Salah: memakai br berulang sebagai pengganti item list. Serupa dengan di atas: kalau datanya memang sebuah daftar, pakai li. Tag br hanya untuk jeda baris di dalam satu kesatuan teks, seperti alamat atau puisi.

Salah: menutup li induk sebelum sub-list-nya. Perhatikan posisi tag penutup:

<!-- SALAH: sub-list jadi yatim -->
<li>Buah</li>
<ul>
  <li>Apel</li>
</ul>

<!-- BENAR -->
<li>Buah
  <ul>
    <li>Apel</li>
  </ul>
</li>

Catatan teknis: Kedalaman bersarang secara teknis tidak dibatasi, tetapi secara praktis jangan lebih dari 3 sampai 4 level. List yang terlalu dalam sulit dibaca manusia dan biasanya tanda struktur informasimu perlu disederhanakan. Kalau kamu butuh level kelima, pertimbangkan memecah konten menjadi beberapa halaman atau bagian.