Globale Attribute sind Attribute, die du auf jedes HTML-Element setzen kannst, unabhängig von seinem Typ. Sie bieten Identifikation, Styling-Anker, Accessibility-Informationen und Metadaten.
html
Content
id — einzigartiger Anker für CSS (#hero), JS (getElementById) und Links innerhalb der Seite (href="#hero").class — der primäre Styling-/Scripting-Anker; wiederverwendbar über Elemente hinweg.data-* — heften benutzerdefinierte Daten an Elemente an, lesbar in JS über element.dataset.tabindex — steuere Fokussierbarkeit und Keyboard-Tab-Reihenfolge (0 = fokussierbar in Reihenfolge, -1 = fokussierbar nur über Script).hidden, title, lang, role, aria-* — Sichtbarkeit, Tooltips, Sprache und Accessibility.<button data-action="delete" data-id="7">Delete</button>
button.dataset.action; // "delete"
button.dataset.id; // "7" (always a string)
Globale Attribute sind das gemeinsame Toolkit, das du auf fast jedem Element verwendest — class/id für Styling und Scripting, data-* zum Weitergeben von Daten an JS, und tabindex/role/aria-* für Accessibility.
Die Kenntnis davon hält dein Markup sauber und das Verhalten konsistent.