Globale HTML-Attribute

Globale Attribute sind Attribute, die du jedem HTML-Element hinzufügen kannst. Im Gegensatz zu elementspezifischen Attributen — wie href (nur bei <a>), src (nur bei <img>) oder colspan (nur bei Tabellenzellen) — gehören globale Attribute zum gemeinsamen Vokabular, das jedes Tag versteht.

Das macht sie so wichtig: Statt für jedes Element ein anderes Attribut zu lernen, lernst du einmal einen Satz globaler Attribute und kannst ihn überall wiederverwenden. Du wirst class und id nutzen, um Elemente mit CSS und JavaScript zu verknüpfen, data-* um eigene benutzerdefinierte Daten anzuhängen, tabindex um den Tastaturfokus zu steuern, lang und dir um Inhalte in jeder Sprache zugänglich zu machen, sowie hidden, title und contenteditable für alltägliches UI-Verhalten.

Ein globales Attribut kann auf einem Element gültig sein, ohne dass es dort immer eine sichtbare Wirkung hat. Zum Beispiel ändert spellcheck nicht das Verhalten oder die Semantik eines Absatzes, und lang hat keine Wirkung auf ein Element ohne Textinhalt. Das ist in Ordnung — sie sind überall erlaubt; sie bewirken schlicht nichts, wenn es nichts zu beeinflussen gibt.

Alle globalen Attribute und ihre Erklärungen findest du in der Referenztabelle unten, gefolgt von einem genaueren Blick auf die am häufigsten verwendeten.

Das id-Attribut

id gibt einem Element einen eindeutigen Namen auf der Seite. Es ist der Anker, der HTML mit dem Rest der Plattform verbindet: CSS kann es mit #name ansprechen, JavaScript kann es mit document.getElementById() abrufen, ein Label kann ein Formularelement über for darauf verweisen, und ein Link kann direkt dorthin springen.

<h2 id="install">Installation</h2>

<!-- Clicking this link scrolls to the heading above -->
<a href="#install">Jump to Installation</a>

Der Wert muss innerhalb des Dokuments eindeutig sein und darf keine Leerzeichen enthalten. Doppelte id-Werte sind ungültig und bewirken, dass getElementById() nur den ersten Treffer zurückgibt. Mehr dazu im Kapitel id-Attribut und Ankerlinks in HTML-Links.

Das class-Attribut

Während id für ein einzelnes Element gedacht ist, ist class für Gruppen von Elementen, die Styling oder Verhalten teilen. Ein Element kann mehrere durch Leerzeichen getrennte Klassen haben, und dieselbe Klasse kann auf beliebig vielen Elementen wiederverwendet werden.

<button class="btn btn-primary">Save</button>
<button class="btn btn-secondary">Cancel</button>

Beide Buttons teilen die Klasse btn (gemeinsame Stile) und fügen jeweils eine weitere Klasse für ihre Variante hinzu. Das ist die Grundlage dafür, wie CSS angewendet wird — siehe CSS-Selektoren und CSS id und class.

Benutzerdefinierte data-*-Attribute

data-* ermöglicht es dir, eigene private Daten an ein Element anzuhängen, ohne nicht-standardisierte Attribute erfinden zu müssen. Jedes Attribut, dessen Name mit data- beginnt, ist gültig und wird vom Browser beim Rendern ignoriert — es existiert ausschließlich für deine Skripte.

<button id="cart" data-product-id="42" data-price="19.99">
  Add to cart
</button>

<script>
  const btn = document.getElementById("cart");

  // A "data-foo-bar" attribute is read as element.dataset.fooBar
  console.log(btn.dataset.productId); // "42"
  console.log(btn.dataset.price);     // "19.99"
</script>

Beachte die Benennungsregel: Das Attribut data-product-id wird in JavaScript zu dataset.productId — das Präfix data- wird entfernt und jedes mit Bindestrich getrennte Segment wird zu camelCase. Werte sind immer strings, also konvertiere sie (Number(btn.dataset.price)), wenn du eine Zahl benötigst.

Das tabindex-Attribut

tabindex steuert, ob ein Element den Tastaturfokus erhalten kann und in welcher Reihenfolge die Tab-Taste es erreicht. Es gibt drei sinnvolle Fälle:

• tabindex="0" — fügt das Element der natürlichen Tab-Reihenfolge hinzu, an der Position, die durch seinen Platz im Dokument bestimmt wird. Nutze dies, um ein normalerweise nicht fokussierbares Element (z. B. ein <div>, das du zu einem benutzerdefinierten Widget gemacht hast) per Tastatur erreichbar zu machen.
• tabindex="-1" — entfernt das Element aus der Tab-Reihenfolge, erlaubt es aber dennoch, es per JavaScript über element.focus() zu fokussieren. Nützlich, um den Fokus auf einen Bereich zu verschieben (z. B. einen Dialog oder eine Fehlerzusammenfassung), ohne es in die Tab-Sequenz aufzunehmen.
• Ein positiver Wert (tabindex="1" und höher) — erzwingt, dass das Element in der Tab-Reihenfolge ganz vorne steht, vor allem mit tabindex="0" oder ohne tabindex. Das ist ein Anti-Pattern: Es überschreibt die natürliche Lesereihenfolge und verwirrt Tastaturnutzer fast immer. Vermeide es.

<!-- Reachable by keyboard, in normal order -->
<div tabindex="0" role="button">Custom button</div>

<!-- Focusable by script only, skipped by Tab -->
<div id="dialog" tabindex="-1">Dialog content</div>

Die zugängliche Faustregel: Lass die DOM-Reihenfolge die Tab-Reihenfolge bestimmen. Verwende 0 und -1 bewusst, und verzichte konsequent auf positive Werte.

Das contenteditable-Attribut

contenteditable="true" macht den Inhalt eines Elements direkt durch den Benutzer bearbeitbar und verwandelt ein einfaches <div> in eine grundlegende Rich-Text-Oberfläche. contenteditable="false" (der Standard) hält es schreibgeschützt.

<div contenteditable="true">
  Click here and start typing — this text is editable.
</div>

Es ist der Grundbaustein hinter seiteninternen Editoren und Inline-Notizfeldern. Da der Benutzer den DOM verändern kann, lese den aktuellen Text in JavaScript mit textContent oder innerHTML des Elements aus, wenn du ihn speichern möchtest.

Die Attribute lang und dir (Internationalisierung)

lang deklariert die Sprache des Inhalts eines Elements mithilfe eines Sprachcodes wie en, fr oder ar. Das Setzen von lang am <html>-Element ist für die Barrierefreiheit unerlässlich: Screenreader verwenden es, um die richtige Aussprache und Stimme zu wählen, und Suchmaschinen sowie Übersetzungstools nutzen es zur Spracherkennung.

dir legt die Basistextrichtung fest — ltr (von links nach rechts, der Standard), rtl (von rechts nach links, für Sprachen wie Arabisch und Hebräisch) oder auto (der Browser leitet es aus dem Inhalt ab).

<html lang="en">
  <body>
    <p>This paragraph reads left to right.</p>

    <!-- An Arabic phrase that reads right to left -->
    <p lang="ar" dir="rtl">مرحبا بكم في عالم البرمجة</p>
  </body>
</html>

Für Details zum Rechts-nach-Links-Layout siehe die CSS-Eigenschaft direction. Setze lang immer am <html>-Element und füge es erneut bei Inline-Inhalten hinzu, die die Sprache wechseln — das richtige Setzen dieser Attribute ist eine der einfachsten und wirkungsvollsten Maßnahmen für Barrierefreiheit auf einer Seite.

Hinweise zur Barrierefreiheit

Einige globale Attribute haben eine direkte Auswirkung auf assistive Technologien — verwende sie daher mit Bedacht:

• lang — erforderlich, damit Screenreader Inhalte in der richtigen Sprache und mit dem richtigen Akzent vorlesen. Setze es am <html>-Element und an jedem Element, dessen Sprache von der der Seite abweicht.
• dir — stellt sicher, dass Rechts-nach-Links-Sprachen korrekt dargestellt und navigiert werden. Kombiniere es mit lang für RTL-Inhalte.
• tabindex — positive Werte stören die erwartete Fokusreihenfolge für Tastatur- und Screenreader-Nutzer; halte dich an 0 und -1.
• accesskey — seine Tastaturkürzel kollidieren häufig mit den Kürzeln von Browsern und assistiven Technologien, sodass der gewählte Key möglicherweise nicht für alle funktioniert. Behandle es als Komfort-Funktion, nie als einzigen Weg, eine Funktion zu erreichen.

Zusammenfassung

Eine Handvoll globaler Attribute ist es wert, sie gründlich zu kennen, da du sie ständig verwenden wirst: id, class, data-*, tabindex und das i18n-Paar lang / dir. Die übrigen — title, hidden, contenteditable, draggable, spellcheck, translate, style, accesskey — sind nützlich zu kennen und in der obigen Tabelle nachzuschlagen, wenn eine Situation es erfordert. Und vermeide die entfernten Attribute (contextmenu, dropzone) vollständig; sie sind kein Bestandteil von HTML mehr.

Übungen