Globale Attribute

Zuletzt geprüft am 7. September 2026 von Daniel Weihmann

Die meisten Attribute gehören zu einem bestimmten Element: href zum Link, src zum Bild. Ein knappes Dutzend aber ist an jedem Element erlaubt. Sie regeln Identität, Sprache, Sichtbarkeit und Bedienbarkeit und sind deshalb der Werkzeugkasten, den man überall dabei hat.

Schreibweise

Attributnamen werden kleingeschrieben, Werte gehören in doppelte Anführungszeichen. Ohne sie funktioniert es zwar bei einzelnen Wörtern, geht aber sofort schief, sobald ein Leerzeichen im Wert steht – etwa bei zwei CSS-Klassen. Der Aufwand, es immer zu tun, ist kleiner als die Suche nach dem einen Fall, in dem es fehlt.

Eine eigene Gruppe sind die booleschen Attribute: required, disabled, checked, readonly, multiple, hidden. Bei ihnen zählt allein die Anwesenheit. disabled="false" schaltet nichts frei, sondern ist ein aktives disabled – wer es loswerden will, muss das Attribut entfernen.

id und class

id: Der eindeutige Name eines Elements auf der Seite – eindeutig heißt: genau einmal. Doppelte id-Werte sind ein Validierungsfehler und sorgen dafür, dass Sprungmarken, label for und aria-describedby auf das falsche Element zeigen. Die id darf kein Leerzeichen enthalten, sollte mit einem Buchstaben beginnen und wird von Sprungmarken (#abschnitt) angesteuert.
class: Ein oder mehrere Namen, durch Leerzeichen getrennt, beliebig oft wiederverwendbar. Für Gestaltung ist class das Mittel der Wahl, nicht id – Klassen lassen sich wiederholen und haben eine niedrigere Spezifität, was spätere Änderungen erleichtert.

lang und dir

lang gibt die Sprache an. Am <html>-Element gilt es für das ganze Dokument und ist eine Pflichtangabe im Sinne der Barrierefreiheit; an einzelnen Elementen kennzeichnet es fremdsprachige Passagen. Screenreader wechseln daraufhin die Aussprache, Browser bieten passende Übersetzung an, und die Silbentrennung per hyphens: auto greift überhaupt erst dadurch.

dir bestimmt die Leserichtung: ltr, rtl für Arabisch und Hebräisch, oder auto, wenn der Inhalt aus einer Datenquelle kommt und die Richtung unbekannt ist – dann entscheidet der Browser am ersten starken Zeichen.

title und seine Grenzen

title erzeugt den kleinen Kasten, der nach kurzem Verweilen mit der Maus erscheint. Er ist bequem und deshalb beliebt – und für wichtige Informationen die falsche Wahl. Auf Touchgeräten erscheint er gar nicht, mit der Tastatur ist er nicht erreichbar, er lässt sich nicht vergrößern und verschwindet nach wenigen Sekunden.

Wo er sinnvoll bleibt: als Beschriftung für ein <iframe>, als Erläuterung eines pattern in einem Formularfeld und als ergänzender Hinweis, den man auch weglassen könnte. Was Nutzer brauchen, gehört sichtbar auf die Seite.

hidden und inert

hidden blendet ein Element vollständig aus – für Auge und Hilfsmittel gleichermaßen. Es entspricht display: none, und weil es nur eine Standardregel im Browser-Stylesheet ist, überschreibt jede eigene display-Angabe es klaglos. Wer sich wundert, warum ein hidden-Element trotzdem sichtbar ist, findet die Ursache fast immer in einer Regel wie .karte { display: flex }.

Die Variante hidden="until-found" versteckt einen Bereich, lässt ihn aber von der Seitensuche des Browsers finden – der Bereich klappt dann automatisch auf. Praktisch für zusammengeklappte Abschnitte, deren Inhalt auffindbar bleiben soll.

inert geht einen anderen Weg: Das Element bleibt sichtbar, ist aber nicht mehr bedienbar – kein Fokus, keine Klicks, für Screenreader nicht vorhanden. Gedacht für den Hintergrund, während ein Dialog offen ist.

Eigene Daten mit data-*

Alles, was mit data- beginnt, ist ein erlaubtes eigenes Attribut. Damit lassen sich Werte am Element hinterlegen, ohne das Dokument ungültig zu machen:

<li class="produkt" data-artikelnummer="4711" data-preis="19.90">
  Schraubenschlüssel
</li>

Im CSS lässt sich darauf mit Attributselektoren zugreifen ([data-preis]), in JavaScript über element.dataset, wobei aus data-artikelnummer dann dataset.artikelnummer wird. Was mit Bindestrich geschrieben ist, erscheint dort in Binnenmajuskel: data-mwst-satz wird zu dataset.mwstSatz.

Nicht hineingehören sichtbare Texte. Was der Nutzer lesen soll, steht im Dokument – ein data--Attribut wird weder gefunden noch vorgelesen noch von Suchmaschinen gewertet.

tabindex

tabindex steuert, ob und wann ein Element den Tastaturfokus bekommt. Es kennt drei sinnvolle Zustände:

tabindex="0": Nimmt ein Element in die natürliche Reihenfolge auf. Nötig etwa für einen scrollbaren Bereich, der sonst mit der Tastatur unerreichbar wäre.
tabindex="-1": Fokussierbar nur per Skript, nicht über die Tabulatortaste. Für Elemente, auf die man nach einer Aktion den Fokus setzen möchte, etwa eine Fehlermeldung.
Werte über 0: Nicht verwenden. Sie ziehen das Element vor alle anderen und mischen die Reihenfolge der ganzen Seite durcheinander. Wer die Abfolge ändern will, ändert die Reihenfolge im Quelltext.

Links, Schaltflächen und Formularfelder sind von sich aus fokussierbar und brauchen kein tabindex. Ein <div>, das eines braucht, ist meistens ein <button>, der noch nicht als solcher geschrieben wurde.

Weitere globale Attribute

style: Formatierung direkt am Element. Praktisch für berechnete Einzelwerte, sonst schwer zu überschreiben und schlecht zu pflegen. Wird von einer strengen Content-Security-Policy blockiert.
translate: translate="no" schützt Eigennamen, Codebeispiele und Produktbezeichnungen vor der automatischen Übersetzung.
spellcheck: Schaltet die Rechtschreibprüfung in Eingabefeldern an oder aus. Bei Benutzernamen und Seriennummern stört sie eher.
contenteditable: Macht einen Bereich direkt beschreibbar. Grundlage jedes Rich-Text-Editors und ohne begleitendes Skript selten sinnvoll.
popover: Erzeugt eine überlagernde Ebene, die der Browser selbst verwaltet – samt Schließen per Escape und Klick daneben. Zusammen mit popovertarget an einem Button entsteht daraus ein Aufklappmenü ohne eine Zeile JavaScript. Seit 2024 in allen aktuellen Browsern.
role und aria-*: Streng genommen aus einer eigenen Spezifikation, aber überall erlaubt. Die erste Regel dazu lautet: Wenn ein normales HTML-Element dasselbe leistet, wird kein role gesetzt. Näheres bei der Barrierefreiheit.

Häufige Fehler

Dieselbe id mehrfach. Fällt visuell nie auf und bricht jede Verknüpfung, die darauf zeigt.
hidden von einer display-Regel ausgehebelt. Siehe oben – der Klassiker.
Positive tabindex-Werte, um eine Reihenfolge zu erzwingen.
Wichtige Information nur im title. Auf dem Telefon existiert sie damit nicht.
Erfundene Attribute ohne data--Präfix. preis="19.90" ist ungültig, data-preis nicht.
lang nur im <head> gesucht. Es gehört an das <html>-Element selbst, siehe Grundgerüst.