li adalah elemen pekerja keras HTML: ia muncul di navigasi, daftar artikel, daftar fitur, dan hampir semua pola daftar yang kita temui. Kita sudah memakainya berulang kali pada chapter-chapter sebelumnya — sekarang saatnya membedah aturan isinya secara khusus.

Chapter ini membahas dua hal: fleksibilitas isi li, dan atribut value yang mampu mengubah nomor satu butir di dalam ol.

li dan Penandanya #

Aturan dasarnya: li (list item) adalah satu anggota daftar. Posisi sahnya sebagai child langsung dari ul atau ol. Penanda yang tampil di depannya — bulatan pada ul, angka pada ol — bukan milik li sendiri; li tidak punya penanda apa pun. Penanda diberikan oleh parent sesuai jenis daftarnya.

Mekanismenya sederhana: li yang sama berganti penanda ketika berganti parent. Butir “Kopi tubruk” di dalam ul tampil berbulatan; di dalam ol tampil bernomor. Isi butirnya tidak berubah sama sekali.

Isi li Fleksibel #

li termasuk elemen yang paling bebas isinya. Di dalamnya kita boleh menaruh teks, elemen inline seperti strong, em, a, dan img, sampai elemen blok seperti p — bahkan daftar lain (dibahas tuntas pada chapter Nested Lists). Satu butir boleh memuat beberapa paragraf sekaligus:

html 
<ul>
  <li>
    <p><strong>Kopi Gayo</strong> — arabika dari dataran tinggi Aceh.</p>
    <p>Paling pas diseduh dengan metode pour over.</p>
  </li>
  <li>
    <p><strong>Kopi Toraja</strong> — arabika dari dataran tinggi Sulawesi.</p>
  </li>
</ul>

Hasil Render secara naratif: dua butir tampil dengan penanda bulatan; butir pertama menampung dua paragraf yang keduanya tetap terhitung sebagai satu butir, dan nama kopi pada tiap butir tampil tebal karena strong.

Mari kita telaah kode di atas:

  1. li pertama: membungkus dua p sekaligus — keduanya bagian dari satu butir yang sama.
  2. <strong>: nama kopi diberi bobot penting di dalam butir, bukan di level daftar.
  3. li kedua: hanya satu p — jumlah isi tiap butir boleh berbeda.
  4. Teks tanpa p: butir pendek seperti <li>Teh melati</li> tetap sah; teks langsung adalah bentuk yang paling umum.

Atribut value pada li dalam ol #

Atribut khusus li hanya satu: value, dan ia hanya berlaku di dalam ol. Mekanismenya: value menimpa nomor satu butir, lalu butir-butir setelahnya melanjutkan penomoran dari nilai baru itu:

html 
<ol>
  <li>Rebus air hingga mendidih.</li>
  <li value="5">Masukkan mie ke dalam air.</li>
  <li>Tiriskan setelah tiga menit.</li>
</ol>

Hasil Render:

Mari kita telaah kode di atas:

  1. Baris 1 (butir pertama): bernomor normal — 1.
  2. Baris 2 (value="5"): nomor butir ini ditimpa menjadi 5.
  3. Baris 3 (butir ketiga): penomoran melanjutkan dari 5 menjadi 6, bukan kembali ke 3.

Perbedaannya dengan start: start bekerja pada ol dan menggeser titik awal seluruh daftar; value bekerja pada satu li dan menimpa nomornya saja. Keduanya berguna untuk penomoran yang harus melompat — misalnya melanjutkan daftar yang terpotong oleh penjelasan di tengah.

Ringkasan #

  • li adalah anggota daftar; posisi sahnya child langsung ul atau ol.
  • Penanda diberikan parent — li tidak punya penanda sendiri.
  • Isi li fleksibel: teks, elemen inline, p, sampai daftar bersarang.
  • value menimpa nomor satu butir dalam ol; beda dari start yang mengatur awal seluruh daftar.

Chapter berikutnya membahas teknik yang memanfaatkan keluwesan isi li: nested list, daftar di dalam daftar.