Pernah pengen nempelin info tambahan ke elemen HTML buat dipake JavaScript atau CSS — tapi HTML gak punya atribut bawaan yang cocok? Sebelum 2010, developer hack pake class aneh kayak class="user-id-42". Berantakan, conflict, susah maintain. Solusinya akhirnya datang: data-* attributes — atribut custom yang BEBAS namanya, asal diawali data-. Kasih nilai apapun, akses dari JS lewat element.dataset.namaKamu.

💡 Bahan bakar framework modern. Alpine.js dan HTMX dua framework baru yang lagi naik daun, dua-duanya ngandelin data-* (atau prefix mirip kayak x- / hx-) buat ngebawa interactivity langsung dari HTML — tanpa nulis JavaScript terpisah. Tombol <button hx-get="/api/news"> langsung fetch data pas diklik. Pattern ini lagi tren karena lebih sederhana dari React di banyak kasus.

Sintaks data-* Attribute

<div class="produk" data-category="elektronik" data-price="150000">
  Laptop Murah
</div>

Aturan Penamaan

• Selalu dimulai dengan data-
• Setelah data- gunakan huruf kecil, bisa dipisah dengan tanda hubung (-)
• Contoh: data-user-id, data-color, data-is-active

Mengakses dari JavaScript

const produk = document.querySelector(".produk");
console.log(produk.dataset.category); // "elektronik"
console.log(produk.dataset.price);    // "150000"

🎭 Analogi sehari-hari

data-* itu kayak label kecil yang ada di balik kerah baju — ada info ukuran, kode produksi, bahan, instruksi cuci. Yang make baju (user) gak perlu liat, tapi vital banget buat tukang laundry (JavaScript) atau penjahit yang mau permak (CSS). Info penting yang nempel di barangnya, tapi gak ganggu tampilan utama.

⚠️ Jebakan yang sering ditemui

• TERLIHAT di view-source — bukan tempat data sensitif (token, role, password). Anggap public.
• Case conversion data-user-id → dataset.userId — kebab-case di HTML jadi camelCase di JS. data-userId (camelCase di HTML!) jadi dataset.userid (semua lowercase) — kacau.
• Value SELALU string — data-count="5" lalu parseInt(el.dataset.count). Lupa parse = string concat bug.
• Set via JS pakai dataset.x = ..., bukan setAttribute("data-x", ...) — keduanya jalan tapi dataset lebih clean.
• CSS [data-state="active"] powerful selector — pakai untuk styling berdasar state.
• Limit < 64KB total per element — jangan stuff JSON besar di sini, pakai state management.

TL;DR: data-* = atribut custom buat nempelin info ke elemen HTML, dipake JS/CSS. Sintaks: <div data-user-id="42"> → akses el.dataset.userId (kebab-case → camelCase). Value SELALU string — parseInt() kalau perlu number. CSS selector [data-state="active"] powerful buat styling state. Bukan tempat data sensitif (terlihat di view-source). Bahan bakar framework modern: Alpine.js (x-), HTMX (hx-) — interactivity langsung dari HTML.