0Pricing
HTML Academy · Lektion

data-*-Syntax und Benennungskonventionen

Verstehen Sie gültige Namen von data-*-Attributen und deren Zweck

data-*-Syntax und Benennungskonventionen ist eine kostenlose HTML Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des HTML Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der HTML Academy-Kurs umfasst insgesamt 4 Lektionen.

Rückblick: data-*-Attribute

Datenattribute (data-*) speichern benutzerdefinierte Informationen in HTML-Elementen:

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

Regeln für gültige Namen

Anforderungen an die Benennung von data-*-Attributen:

  • Müssen mit data- beginnen
  • Danach muss mindestens ein Zeichen folgen
  • Nur Kleinbuchstaben, Ziffern, Bindestriche, Unterstriche, Punkte und Doppelpunkte
  • Keine Großbuchstaben (der HTML-Parser wandelt Attribute in Kleinbuchstaben um)
  • Keine Leerzeichen

Namenskonventionen

Namenskonventionen der Community:

<!-- 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"

Mehrere Datenattribute

Ein Element kann beliebig viele Datenattribute haben:

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

Werte sind immer Zeichenfolgen

Werte von Datenattributen sind immer Zeichenfolgen – parsen Sie sie in 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

JSON in data-* speichern

Speichern Sie komplexe Daten als JSON-Zeichenfolgen:

<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-* vs. benutzerdefinierte Elemente

Wann Sie data-* statt benutzerdefinierter Elemente oder JavaScript-Objekten verwenden sollten:

  • data-* — elementspezifische Metadaten, im HTML sichtbar und aus CSS zugänglich
  • Benutzerdefinierte Elemente — komplexe, wiederverwendbare Komponenten mit gekapseltem Verhalten
  • JavaScript Map/WeakMap — Daten, die im HTML nicht benötigt werden; große oder komplexe Daten

Verwendung von data-* in Frameworks

Häufige Verwendungszwecke von Datenattributen in Frameworks:

<!-- 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>

Barrierefreiheit und data-*

Datenattribute werden von Screenreadern nicht angesagt – verwenden Sie sie nicht für Informationen zur Barrierefreiheit:

<!-- 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>

Überlegungen zur Performance

data-*-Attribute haben vernachlässigbare Auswirkungen auf die Performance:

  • Das Auslesen von dataset ist schnell (O(1))
  • Auch die umfangreiche Verwendung von data-* bei Tausenden von Elementen ist unproblematisch
  • Das Speichern großer Datenblöcke (Bilder, große JSON-Daten) in data-* ist ineffizient
  • Verwenden Sie WeakMap, um große JavaScript-Objekte zu speichern, die DOM-Elementen zugeordnet sind

Zusammenfassung: Bewährte Verfahren für data-*

Bewährte Verfahren für data-*:

  • Verwenden Sie kleingeschriebene Namen mit Bindestrichen
  • Werte sind immer Zeichenfolgen – parsen Sie sie bei Bedarf
  • Für JSON: JSON.stringify / JSON.parse
  • Verwenden Sie data-* für Metadaten, die CSS oder JavaScript benötigt
  • data-* ist kein Ersatz für ARIA-Attribute
  • Speichern Sie keine Geheimnisse (sie sind in den DevTools sichtbar)

Kurzer Check

Als welchen Datentyp gibt dataset Attributwerte immer zurück?

Zusammenfassung: data-*-Syntax

Die wichtigsten Regeln für data-*-Namen:

  • Format: data-[lowercase-name]="value"
  • Zugriff über: element.dataset.camelCaseName
  • Alle Werte sind Zeichenfolgen – parsen Sie sie ausdrücklich
  • Speichern Sie komplexe Daten als JSON
  • Kleinschreibung verwenden, keine Großbuchstaben und keine Leerzeichen im Attributnamen

Häufig gestellte Fragen

Ist die Lektion „data-*-Syntax und Benennungskonventionen“ kostenlos?

Ja — der vollständige Text von „data-*-Syntax und Benennungskonventionen“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des HTML Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der HTML Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „data-*-Syntax und Benennungskonventionen“?

Verstehen Sie gültige Namen von data-*-Attributen und deren Zweck Du übst HTML Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um HTML Academy zu starten?

Keine Vorkenntnisse erforderlich. HTML Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 4.

Wie lange dauert die Lektion „data-*-Syntax und Benennungskonventionen“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser HTML Academy-Lektion Code schreiben und ausführen?

Ja. Jede HTML Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

  1. data-*-Syntax und Benennungskonventionen
  2. data-* mit dataset in JavaScript auslesen
  3. data-* mit CSS-Attributselektoren verwenden
  4. Praxisnahe Muster: Tooltips und Zustandsverwaltung
← Zurück zu HTML Academy