HTML-Attribute

Zuletzt aktualisiert am 3. Juli 2026

HTML-Tags allein beschreiben nur die Art eines Elements: “das ist ein Absatz”, “das ist ein Bild”. Aber oft brauchst du mehr: Wohin führt ein Link? Welches Bild soll geladen werden? Welche CSS-Klasse soll angewendet werden? Dafür gibt es Attribute.

Was sind Attribute?

Attribute sind zusätzliche Informationen, die du in den öffnenden Tag eines Elements schreibst. Sie bestehen immer aus einem Namen und (meistens) einem Wert:

<a href="https://mitmario.dev" target="_blank">Mitmario.dev besuchen</a>

Die Syntax ist immer gleich:

<tag attribut="wert">Inhalt</tag>
      ─────── ─────
       Name    Wert

• Der Attributname steht nach dem Tag-Namen, getrennt durch ein Leerzeichen
• Dann kommt ein Gleichheitszeichen
• Der Wert steht in Anführungszeichen (doppelte " oder einfache ')
• Mehrere Attribute werden durch Leerzeichen getrennt

Globale Attribute

Manche Attribute kannst du bei jedem HTML-Element verwenden. Diese nennt man globale Attribute. Hier sind die wichtigsten:

id: Eindeutige Kennung

Vergibt eine eindeutige ID, die nur einmal pro Seite vorkommen darf:

<h2 id="kapitel-1">Erstes Kapitel</h2>

IDs werden verwendet für:

• CSS-Styling: #kapitel-1 { color: blue; }
• JavaScript: document.getElementById('kapitel-1')
• Sprungmarken: <a href="#kapitel-1">Zum ersten Kapitel</a>

class: CSS-Klassen

Weist einem Element eine oder mehrere CSS-Klassen zu. Im Gegensatz zu id dürfen Klassen mehrfach auf einer Seite verwendet werden:

<p class="hinweis wichtig">Achtung, das ist wichtig!</p>
<p class="hinweis">Das ist auch ein Hinweis.</p>

Mehrere Klassen werden durch Leerzeichen getrennt. Das ist die Grundlage für CSS-Styling und wird in der Praxis ständig verwendet.

style: Inline-CSS

Definiert CSS-Styles direkt am Element:

<p style="color: #0ea5e9; font-weight: bold;">Blauer, fetter Text</p>

Inline-Styles solltest du sparsam einsetzen. Für wiederkehrende Styles ist eine externe CSS-Datei mit Klassen besser wartbar.

title: Tooltip-Text

Zeigt einen Tooltip an, wenn der Nutzer mit der Maus über das Element fährt:

<abbr title="Hypertext Markup Language">HTML</abbr> ist die Sprache des Webs.

hidden: Element verstecken

Blendet ein Element aus, ohne es aus dem DOM zu entfernen:

<p hidden>Dieser Text ist nicht sichtbar.</p>

Mit dem Wert until-found bleibt der versteckte Inhalt für die Browser-Suche (Strg+F) und für Sprungmarken auffindbar. Findet der Browser einen Treffer, entfernt er das Attribut automatisch und scrollt zum Element. Das ist ideal für FAQ-Listen und Akkordeons: Die Antworten sind eingeklappt, die Suche findet sie trotzdem.

<h3>Wie widerrufe ich meine Bestellung?</h3>
<div hidden="until-found">
  Schreib uns innerhalb von 14 Tagen eine E-Mail an support@example.com.
</div>

Kurz bevor der Browser den Inhalt aufdeckt, feuert er das Event beforematch auf dem Element. Damit kannst du zum Beispiel den passenden Akkordeon-Eintrag auch optisch aufklappen. hidden="until-found" wird inzwischen von allen modernen Browsern unterstützt, Safari hat die Unterstützung als letzter Browser nachgereicht. Browser ohne Unterstützung behandeln das Attribut wie ein normales hidden, der Inhalt bleibt dann einfach ausgeblendet.

inert: Element komplett deaktivieren

Das Boolean-Attribut inert deaktiviert ein Element samt komplettem Unterbaum: Klicks kommen nicht an, per Tastatur lässt sich darin nichts fokussieren, und auch Screenreader ignorieren den Bereich. Es wird von allen modernen Browsern unterstützt.

<main inert>
  <!-- Alles hier ist vorübergehend nicht bedienbar -->
  <button>Ich bin nicht klickbar</button>
</main>

Typischer Anwendungsfall: Während ein selbstgebautes Overlay oder ein Off-Canvas-Menü geöffnet ist, setzt du den restlichen Seiteninhalt auf inert. So können Tastaturnutzer nicht versehentlich hinter das Overlay tabben, und Screenreader landen nicht im ausgeblendeten Inhalt.

Ein weiteres globales Attribut hat so viele Fähigkeiten, dass es einen eigenen Artikel bekommen hat: Mit popover baust du Overlays und Menüs, die sich ganz ohne JavaScript öffnen und schließen lassen. Mehr dazu im Artikel Das popover-Attribut.

Boolean-Attribute

Manche Attribute haben keinen Wert, sie sind entweder vorhanden oder nicht. Das nennt man Boolean-Attribute:

<!-- Alle drei Schreibweisen sind äquivalent: -->
<input type="text" disabled>
<input type="text" disabled="disabled">
<input type="text" disabled="">

Die gängigsten Boolean-Attribute:

Elementspezifische Attribute

Neben den globalen Attributen hat jedes Element eigene, spezifische Attribute. Hier einige Beispiele:

Links (<a>)

<a href="https://mitmario.dev" target="_blank" rel="noopener">Link</a>

• href: die URL, zu der der Link führt
• target="_blank": in neuem Tab öffnen
• rel="noopener": Sicherheit bei externen Links

Bilder (<img>)

<img src="foto.jpg" alt="Beschreibung" width="400" height="300">

• src: Pfad zum Bild
• alt: Alternativtext (wichtig für Barrierefreiheit)
• width/height: Abmessungen (verhindert Layout-Verschiebungen)

Formulare (<input>)

<input type="email" name="email" placeholder="name@example.com" required>

• type: Art des Eingabefeldes (text, email, number, …)
• name: Name für die Formular-Übermittlung
• placeholder: Platzhaltertext
• required: Pflichtfeld

data-* Attribute

Wenn du eigene Daten an ein Element anhängen willst, kannst du Custom Data Attributes verwenden. Sie beginnen immer mit data-:

<button data-product-id="42" data-action="add-to-cart">
  In den Warenkorb
</button>

<script>
  const button = document.querySelector('[data-action="add-to-cart"]');
  console.log(button.dataset.productId); // "42"
</script>

In JavaScript greifst du über element.dataset auf die Werte zu. Dabei wird der Attributname von kebab-case (data-product-id) zu camelCase (productId) konvertiert.

ARIA-Attribute

ARIA (Accessible Rich Internet Applications) Attribute verbessern die Barrierefreiheit, indem sie Screenreadern zusätzliche Informationen geben:

<button aria-label="Menü öffnen" aria-expanded="false">
  ☰
</button>

<div role="alert" aria-live="polite">
  Deine Änderungen wurden gespeichert.
</div>

Die wichtigsten ARIA-Attribute:

Mehr dazu im Artikel Barrierefreiheit.

Häufige Fehler

• Anführungszeichen vergessen: <a href=https://example.com> funktioniert zwar bei einfachen URLs, führt aber bei Werten mit Leerzeichen zu Problemen. Nutze immer Anführungszeichen.
• Doppelte IDs: Jede id darf nur einmal pro Seite vorkommen. Doppelte IDs führen zu Fehlern bei JavaScript und Sprungmarken.
• alt bei Bildern weglassen: Das alt-Attribut ist für Barrierefreiheit wichtig. Wenn ein Bild dekorativ ist, verwende alt="" (leerer String), aber lass es nie ganz weg.
• Erfundene Attribute: <p color="red"> funktioniert nicht, denn color ist kein HTML-Attribut. Für Styling nutze class oder style.

Zusammenfassung

Im nächsten Artikel geht es um semantisches HTML: warum die Wahl des richtigen Elements mehr ist als nur Kosmetik.