HTML Academy · Pelajaran

Atribut Data Khusus data-*

Simpan data khusus langsung pada elemen dengan atribut data-*.

Atribut Data Khusus data-* adalah pelajaran HTML Academy gratis di CoddyKit. Ini adalah pelajaran 4 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar HTML Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus HTML Academy mencakup 4 pelajaran total.

Apa Itu Atribut data-*?

Atribut data khusus memungkinkan Anda menyimpan informasi tambahan langsung pada elemen HTML:

<button data-user-id="42" data-action="delete">Delete User</button>
<li data-category="frontend" data-level="beginner">HTML</li>

<!-- Format: data-[name]="value" -->
<!-- Any alphanumeric name after data- is valid -->
<!-- Values are always strings -->

Alasan data-* Ada

Sebelum data-*, pengembang menyimpan data tambahan di:

Input tersembunyi (berantakan)
Nama kelas CSS (rapuh)
Atribut nonstandar seperti rel atau title (HTML tidak valid)

HTML5 meresmikan data-* sebagai cara resmi untuk menyematkan data khusus tanpa memengaruhi semantik atau presentasi.

Aturan Penamaan

Aturan penamaan atribut data-*:

Harus diawali dengan data-
Nama dapat berisi huruf kecil, angka, tanda hubung, garis bawah, dan titik
Tidak boleh ada huruf besar dalam nama (spesifikasi HTML mengubahnya menjadi huruf kecil)
Nama tidak boleh diawali dengan xml

<div data-user-id="1">OK</div>
<div data-product-category="tools">OK</div>
<!-- <div data-XML-thing="1">BAD: starts with xml -->
<!-- <div data-MyProp="1">BAD: uppercase in name -->

Membaca data-* di JavaScript

Akses data khusus melalui properti dataset:

<button id="btn"
  data-user-id="42"
  data-action="delete"
  data-confirm-message="Are you sure?"
>
  Delete
</button>

<script>
const btn = document.getElementById('btn');
console.log(btn.dataset.userId);          // '42'
console.log(btn.dataset.action);          // 'delete'
console.log(btn.dataset.confirmMessage);  // 'Are you sure?'
// Note: data-user-id → dataset.userId (camelCase conversion)
</script>

Menulis data-* dengan dataset

Tetapkan dan hapus atribut data melalui dataset:

const card = document.querySelector('.card');

// Set:
card.dataset.status = 'active';
// Now: <div class="card" data-status="active">

// Delete:
delete card.dataset.status;
// Now: data-status is removed

// Alternatively with setAttribute:
card.setAttribute('data-status', 'inactive');
card.removeAttribute('data-status');

Konversi Tanda Hubung ke camelCase

API dataset mengonversi nama yang dipisahkan tanda hubung menjadi camelCase:

<!-- HTML attribute         JavaScript dataset property -->
data-user-id           →   dataset.userId
data-product-category  →   dataset.productCategory
data-max-retries       →   dataset.maxRetries
data-is-active         →   dataset.isActive

Pemilih Atribut CSS

Gunakan atribut data dalam pemilih CSS:

[data-status="active"] {
  color: green;
}

[data-status="inactive"] {
  color: gray;
  text-decoration: line-through;
}

/* Present but any value: */
[data-featured] {
  border: 2px solid gold;
}

Pola Petunjuk

Buat petunjuk berbasis CSS murni dengan atribut data:

<span data-tooltip="This is a tooltip">Hover me</span>

/* CSS: */
/*
[data-tooltip] {
  position: relative;
}
[data-tooltip]::after {
  content: attr(data-tooltip);  /* attr() reads the attribute value */
  position: absolute;
  background: #333;
  color: white;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
[data-tooltip]:hover::after { opacity: 1; }
*/

Pola Pelacakan state

Lacak state komponen dengan atribut data:

<button data-state="off" id="toggle">Toggle</button>

<script>
document.getElementById('toggle').addEventListener('click', function() {
  const state = this.dataset.state;
  this.dataset.state = state === 'off' ? 'on' : 'off';
  this.textContent = this.dataset.state === 'on' ? 'Active' : 'Toggle';
});
</script>

/* CSS: */
/* [data-state="on"] { background: green; color: white; } */

data-* vs Variabel JavaScript

Kapan menggunakan data-* dibandingkan menyimpan data dalam JavaScript:

Gunakan data-* untuk nilai yang secara langsung berkaitan dengan elemen DOM dan mungkin dibaca oleh CSS
Gunakan variabel atau objek JavaScript untuk struktur data kompleks yang tidak terikat pada elemen tertentu
Jangan simpan data besar atau sensitif dalam data-* — data tersebut terlihat di DevTools

data-* Bukan untuk Presentasi

Kesalahan umum yang perlu dihindari:

<!-- BAD: storing presentation data in data-* -->
<div data-color="red" data-font-size="18">Text</div>
<!-- Use CSS classes instead: -->
<div class="text-danger text-lg">Text</div>

<!-- BAD: storing sensitive data -->
<div data-api-key="sk-123...">Content</div>
<!-- NEVER store secrets in HTML attributes -->

Pemeriksaan Singkat

Bagaimana API dataset mengakses atribut data-product-id?

Ringkasan: Atribut data-*

Hal-hal penting tentang atribut data khusus:

data-name="value" — simpan metadata khusus pada elemen
Diakses melalui element.dataset.camelCase
Tanda hubung dikonversi menjadi camelCase dalam API dataset
Gunakan dalam CSS dengan pemilih [data-name="value"]
Jangan pernah menyimpan data sensitif (kunci, kata sandi) dalam atribut data

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Atribut Data Khusus data-*” gratis?

Ya — teks lengkap “Atribut Data Khusus data-*” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus HTML Academy, upgrade ke CoddyKit PRO. Kursus HTML Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Atribut Data Khusus data-*”?

Simpan data khusus langsung pada elemen dengan atribut data-*. Kamu berlatih HTML Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai HTML Academy?

Tidak diperlukan pengalaman sebelumnya. HTML Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 4 dari 4.

Berapa lama pelajaran “Atribut Data Khusus data-*” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran HTML Academy ini?

Ya. Setiap pelajaran HTML Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke HTML Academy