0Pricing
HTML Academy · Pelajaran

Sintaks data-* dan Konvensi Penamaan

Pahami nama atribut data-* yang valid dan tujuannya.

Sintaks data-* dan Konvensi Penamaan adalah pelajaran HTML Academy gratis di CoddyKit. Ini adalah pelajaran 1 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.

Tinjauan: Atribut data-*

Atribut data (data-*) menyimpan informasi khusus pada elemen HTML:

<div data-user-id="42" data-role="admin" data-active="true">
  User Card
</div>

Aturan Penamaan yang Valid

Persyaratan penamaan atribut data-*:

  • Harus diawali dengan data-
  • Diikuti oleh setidaknya satu karakter
  • Hanya boleh menggunakan huruf kecil, angka, tanda hubung, garis bawah, titik, dan titik dua
  • Tidak boleh menggunakan huruf besar (pengurai HTML mengubah atribut menjadi huruf kecil)
  • Tidak boleh ada spasi

Konvensi Penamaan

Konvensi penamaan komunitas:

<!-- BEM-style: module__element--modifier -->
data-card="profile"
data-card-id="42"
data-card-state="expanded"

<!-- Descriptive: domain-concept -->
data-product-id="SKU-123"
data-analytics-event="click-cta"
data-feature-flag="dark-mode"

Beberapa Atribut Data

Sebuah elemen dapat memiliki atribut data dalam jumlah berapa pun:

<button
  type="button"
  data-action="delete"
  data-target-id="user-42"
  data-confirm="true"
  data-confirm-message="Delete this user permanently?"
>Delete</button>

Nilai Selalu Berupa String

Nilai atribut data selalu berupa string — uraikan nilainya dalam JavaScript:

const el = document.querySelector('[data-user-id]');

console.log(el.dataset.userId);              // '42' (string)
console.log(typeof el.dataset.userId);       // 'string'

// Parse to number:
const id = parseInt(el.dataset.userId, 10);   // 42 (number)

// Parse to boolean:
const active = el.dataset.active === 'true'; // true (boolean)

// Parse to JSON:
const config = JSON.parse(el.dataset.config); // object

Menyimpan JSON di data-*

Simpan data kompleks sebagai string JSON:

<div
  data-config='{"theme":"dark","locale":"en-US","pageSize":20}'
  id="app"
></div>

<script>
const el = document.getElementById('app');
const config = JSON.parse(el.dataset.config);
console.log(config.theme);    // 'dark'
console.log(config.pageSize); // 20
</script>

data-* dibandingkan Elemen Kustom

Kapan memilih data-* dibandingkan elemen kustom atau objek JavaScript:

  • data-* — metadata khusus elemen, terlihat di HTML, dan dapat diakses dari CSS
  • Elemen kustom — komponen kompleks yang dapat digunakan kembali dengan perilaku yang terenkapsulasi
  • JavaScript Map/WeakMap — data yang tidak diperlukan dalam HTML; data berukuran besar atau kompleks

Penggunaan data-* oleh Kerangka Kerja

Penggunaan umum atribut data oleh kerangka kerja:

<!-- Bootstrap: target collapsible elements -->
<button data-bs-toggle="collapse" data-bs-target="#menu">
  Toggle
</button>

<!-- Alpine.js: component data -->
<div x-data="{ open: false }">

<!-- Stimulus: controller identification -->
<div data-controller="menu" data-menu-open-value="false">

<!-- Testing libraries: stable selectors -->
<button data-testid="submit-btn">Submit</button>

Aksesibilitas dan data-*

Atribut data tidak dibacakan oleh pembaca layar — jangan gunakan atribut tersebut untuk informasi aksesibilitas:

<!-- BAD: accessibility info in data-* -->
<button data-label="Close dialog">×</button>
<!-- Screen reader does NOT read data-label -->

<!-- GOOD: use aria-label for accessibility -->
<button aria-label="Close dialog">×</button>

Pertimbangan Performa

Atribut data-* hampir tidak berdampak pada performa:

  • Membaca dataset berlangsung cepat (O(1))
  • Penggunaan data-* secara intensif pada ribuan elemen tidak menjadi masalah
  • Menyimpan data berukuran besar (gambar, JSON besar) di data-* merupakan pemborosan
  • Gunakan WeakMap untuk menyimpan objek JavaScript besar yang terkait dengan elemen DOM

Ringkasan: Praktik Terbaik data-*

Praktik terbaik data-*:

  • Gunakan nama dengan huruf kecil dan tanda hubung
  • Nilai selalu berupa string — uraikan sesuai kebutuhan
  • Untuk JSON: JSON.stringify / JSON.parse
  • Gunakan untuk metadata yang diperlukan CSS atau JavaScript
  • Bukan pengganti atribut ARIA
  • Jangan simpan rahasia (terlihat di DevTools)

Pemeriksaan Singkat

Sebagai tipe apa dataset selalu mengembalikan nilai atribut?

Rekap: Sintaks data-*

Hal penting dalam penamaan data-*:

  • Format: data-[lowercase-name]="value"
  • Diakses sebagai: element.dataset.camelCaseName
  • Semua nilai berupa string — uraikan secara eksplisit
  • Simpan JSON untuk data kompleks
  • Gunakan huruf kecil, tanpa huruf besar dan tanpa spasi dalam nama atribut

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Sintaks data-* dan Konvensi Penamaan” gratis?

Ya — teks lengkap “Sintaks data-* dan Konvensi Penamaan” 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 “Sintaks data-* dan Konvensi Penamaan”?

Pahami nama atribut data-* yang valid dan tujuannya. 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 1 dari 4.

Berapa lama pelajaran “Sintaks data-* dan Konvensi Penamaan” 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

  1. Sintaks data-* dan Konvensi Penamaan
  2. Mengakses data-* dengan dataset dalam JavaScript
  3. Menggunakan data-* dengan Pemilih Atribut CSS
  4. Pola Dunia Nyata Tooltip Pelacakan Status
← Kembali ke HTML Academy