Kadang kita perlu menyimpan informasi kecil yang menempel pada elemen: harga satu item menu, kode produk, atau status satu baris daftar. HTML tidak menyediakan atribut bawaan untuk setiap kebutuhan seperti itu — tetapi menyediakan mekanisme umum: atribut berprefiks data- yang namanya kita pilih sendiri.

Atribut data-* termasuk global attributes: sah dipakai pada elemen apa pun. Browser tidak memakai nilainya untuk apa pun — data tersebut murni tersimpan untuk dibaca skrip yang kita tulis.

Bentuk Penulisan #

Pola dasarnya: prefiks data- diikuti nama pilihan kita, lalu nilai berupa teks dalam tanda kutip. Nama sebaiknya kebab-case (huruf kecil dipisah tanda hubung) supaya seragam dan mudah diketik; nilainya bebas — angka, kode, atau teks pendek.

html 
<li data-harga="15000">Kopi susu</li>

Mari kita telaah baris di atas:

  1. Baris 1 (data-harga="15000"): atribut kustom bernama harga menempel pada butir daftar.
  2. Baris 1 (nilai "15000"): nilai selalu berupa teks (string), meskipun isinya tampak seperti angka.

Membaca Lewat dataset #

JavaScript membaca data attributes lewat properti dataset pada elemen: prefiks data- dibuang, dan tanda hubung pada nama diubah menjadi huruf besar (camelCase). Contoh data-harga menjadi dataset.harga.

html 
<ul>
  <li data-harga="15000" data-kode="KS-01">Kopi susu</li>
  <li data-harga="12000" data-kode="TM-01">Teh melati</li>
</ul>
<script>
  const item = document.querySelector("li");
  console.log(item.dataset.harga, item.dataset.kode);
</script>

Mari kita telaah kode di atas:

  1. Baris 2-3 (data-harga dan data-kode): dua data kustom menempel pada elemen yang sama — tidak ada batasan jumlah.
  2. Baris 6 (querySelector("li")): mengambil elemen li pertama dari dokumen.
  3. Baris 7 (item.dataset.harga dan item.dataset.kode): membaca data-harga dan data-kode; tanda hubung pada nama yang lebih panjang menjadi huruf besar — data-harga-promo dibaca sebagai dataset.hargaPromo.

Saat halaman dibuka, console DevTools menampilkan 15000 dan KS-01. Kedua nilai tersebut bertipe string, jadi perhitungan angka memerlukan pengubahan tipe terlebih dahulu.

Nilai data-* tidak pernah tampil di halaman — tetapi skrip bisa membacanya kapan pun. Tekan salah satu tombol berikut, lalu lihat hasil pembacaan dataset-nya:

Skrip kecil di dalam demo membaca tiga atribut sekaligus saat tombol ditekan. Perhatikan konversi namanya: atribut data-nama-menu terbaca sebagai dataset.namaMenu — tanda hubung dibuang dan huruf setelahnya menjadi besar, persis aturan camelCase di atas.

Kapan Dipakai #

Skenario tipikalnya: skrip membaca data dari atribut lalu memakainya untuk logika halaman. Daftar menu di atas, misalnya, bisa dihitung totalnya dengan membaca data-harga dari setiap butir yang dipilih pengguna — tanpa perlu mencocokkan teks “Kopi susu” dengan tabel harga di JavaScript.

Sebaliknya, jangan memakai data-* untuk menggantikan atribut bawaan yang memang tersedia: tujuan tautan tetap ditulis di href, bukan di data-tujuan.

Ringkasan #

  • Atribut data-nama="nilai" menyimpan data kustom; sah pada semua elemen.
  • Nama memakai kebab-case; nilai bebas dan selalu berupa string.
  • JavaScript membacanya lewat element.dataset: data-harga → dataset.harga.
  • Nilainya tidak tampil dan tidak dibacakan pembaca layar — informasi penting tetap harus tampil sebagai konten.

Chapter berikutnya membahas kelompok atribut yang bekerja seperti saklar: boolean attributes.