Ausführbare HTML-Docs: HTML Attribute

Q: Was ist der Unterschied zwischen class und id in HTML?

Eine id muss auf der Seite eindeutig sein und kennzeichnet genau ein Element, etwa für #fragment-Links, und getElementById. Eine class können viele Elemente teilen, und ein Element kann mehrere Klassen haben, getrennt durch Leerzeichen. Zum Stylen nimmst du Klassen.

Q: Wie gebe ich einem HTML-Element mehrere Klassen?

Schreib sie in ein einziges class-Attribut, getrennt durch Leerzeichen: . class zweimal zu schreiben funktioniert nicht: Der Browser behält nur das erste.

Q: Warum ist mein Button mit disabled="false" immer noch deaktiviert?

disabled ist ein boolesches Attribut: Seine bloße Anwesenheit bedeutet true, egal was im Wert steht. Um das Element zu aktivieren, entferne das Attribut oder setz in JavaScript button.disabled = false, was es entfernt.

Q: Kann ich eigene HTML-Attribute erfinden?

Nimm das Präfix data-: data-price="12" oder data-user-id="7" sind an jedem Element gültig und in JavaScript über element.dataset lesbar. Erfundene Namen ohne Präfix sind ungültiges HTML.

Was HTML-Attribute sind

Ein Attribut gibt einem Element zusätzliche Informationen. Es steht im öffnenden Tag und besteht aus einem Namen, einem Gleichheitszeichen und einem Wert in Anführungszeichen: name="value". Ein Element kann beliebig viele Attribute haben, getrennt durch Leerzeichen.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Attributes</title>
</head>
<body>
  <a href="#note" title="Jumps to the note below">A link with href and title</a>
  <p>
    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Ccircle cx='30' cy='30' r='28' fill='%2316a34a'/%3E%3C/svg%3E" alt="A green circle" width="60" height="60">
  </p>
  <input type="email" placeholder="you@example.com" required>
  <p id="note">Hover the link to see its title.</p>
</body>
</html>

href sagt dem Link, wohin er führt, src und alt beschreiben das Bild, type, placeholder und required konfigurieren das Eingabefeld. Jedes Element hat seine eigenen Attribute, und ein paar (die globalen Attribute weiter unten) funktionieren an jedem Element.

Syntaxregeln

<input type="text" name="city" value="Paris" disabled>

Name, Gleichheitszeichen, Wert in Anführungszeichen. Doppelte Anführungszeichen sind die Konvention; einfache funktionieren auch (title='Say "hi"' ist der Weg, ein doppeltes Anführungszeichen in einen Wert zu bekommen).
Bei Namen ist Groß- und Kleinschreibung egal. CLASS und class sind dasselbe Attribut. Bei Werten nicht: class="Box" und class="box" sind verschiedene Klassen.
Ohne Leerzeichen sind Anführungszeichen optional, setz sie trotzdem. class=big box gibt dem Element die Klasse big und ein zweites, bedeutungsloses Attribut namens box.
Die Reihenfolge spielt keine Rolle. <img alt="" src="a.png"> ist dasselbe wie <img src="a.png" alt="">.
Jeder Name nur einmal pro Element. Kommt ein Attribut zweimal vor, behält der Browser das erste und verwirft das zweite ohne Meldung.

Boolesche Attribute

Manche Attribute sind entweder an oder aus. Bei ihnen gilt: Anwesenheit bedeutet true, der Wert wird ignoriert. disabled, checked, required, readonly, hidden, multiple, autofocus und open funktionieren alle so.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Boolean attributes</title>
</head>
<body>
  <p><button>No attribute: enabled</button></p>
  <p><button disabled>disabled: off</button></p>
  <p><button disabled="false">disabled="false": still off</button></p>
  <p><label><input type="checkbox" checked> checked</label></p>
</body>
</html>

Der dritte Button ist deaktiviert, obwohl der Wert false lautet, weil der Browser nur prüft, ob das Attribut vorhanden ist. Um ein boolesches Attribut auszuschalten, entfernst du es. In JavaScript macht button.disabled = false genau das.

Das class-Attribut

class gibt einem Element einen oder mehrere Namen, über die CSS und JavaScript es finden. Mehrere Elemente können eine Klasse teilen, und ein Element kann mehrere Klassen haben, getrennt durch Leerzeichen:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>class</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .card { border: 2px solid #e5e7eb; border-radius: 8px; padding: 12px; margin-bottom: 8px; }
    .featured { border-color: #2563eb; }
    .muted { color: #6b7280; }
  </style>
</head>
<body>
  <div class="card">class="card"</div>
  <div class="card featured">class="card featured"</div>
  <div class="card featured muted">class="card featured muted"</div>
</body>
</html>

Jede zusätzliche Klasse legt ihre Regeln obendrauf. In CSS wählst du eine Klasse mit einem Punkt aus (.card); in JavaScript ändern element.classList.add('featured') und classList.remove sie. Klassen sind der normale Weg zu stylen: Der Großteil deines CSS wird auf Klassen zielen.

Das id-Attribut

id gibt einem Element einen Namen, der auf der Seite eindeutig sein muss. Verwende es, wenn du genau ein Element brauchst: ein Linkziel, ein <label for> oder document.getElementById.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>id</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    #pricing { background: #e5e7eb; padding: 12px; margin-top: 600px; }
  </style>
</head>
<body>
  <a href="#pricing">Jump to pricing</a>
  <p><label for="email">Email</label> <input id="email" type="email"></p>
  <section id="pricing">This section has id="pricing". The link above scrolls here.</section>
</body>
</html>

Ein Klick auf das Label fokussiert das Eingabefeld, weil for="email" auf id="email" zeigt. Der Link scrollt zu #pricing, weil das Fragment im href zur id passt.

	`class`	`id`
Wie viele Elemente sie teilen können	Beliebig viele	Eines (eindeutig)
Werte pro Element	Mehrere, durch Leerzeichen getrennt	Einer
CSS-Selektor	`.name`	`#name`
Typische Verwendung	Gruppen von Elementen stylen	Linkziele, Labels, ein bestimmtes Element in JavaScript

Eine id darf keine Leerzeichen enthalten. Lass sie mit einem Buchstaben beginnen, damit sie in CSS leicht nutzbar bleibt: #2col ist ohne Escaping kein gültiger CSS-Selektor.

Globale Attribute

Diese Attribute funktionieren an jedem Element:

Attribut	Was es macht
`id`	Eindeutiger Name für das Element
`class`	Liste von Klassennamen, durch Leerzeichen getrennt
`style`	Inline-CSS, zum Beispiel `style="color: red"`
`title`	Tooltip-Text, der beim Überfahren mit der Maus erscheint
`lang`	Sprache des Inhalts, zum Beispiel `lang="fr"`
`dir`	Textrichtung: `ltr`, `rtl` oder `auto`
`hidden`	Blendet das Element aus (boolesch)
`tabindex`	Macht ein Element mit Tab fokussierbar oder legt seine Reihenfolge fest
`contenteditable`	Lässt den Nutzer den Text des Elements bearbeiten
`data-*`	Deine eigenen Daten, mit JavaScript lesbar

Das lang-Attribut hat eine eigene Seite, weil es Screenreader, Übersetzung und Suche beeinflusst.

data-* Attribute

Wenn du einen eigenen Wert an einem Element speichern willst, stell dem Namen data- voran. Nach dem Präfix ist jeder Name erlaubt, und JavaScript liest die Werte über element.dataset, wobei Bindestriche in camelCase umgewandelt werden:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>data attributes</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    button { margin: 4px; }
    #out { font-weight: bold; }
  </style>
</head>
<body>
  <button data-product-id="101" data-price="4.50">Tea</button>
  <button data-product-id="102" data-price="3.20">Coffee</button>
  <p id="out">Click a product.</p>
  <script>
    document.querySelectorAll('button').forEach((btn) => {
      btn.addEventListener('click', () => {
        const { productId, price } = btn.dataset;
        document.getElementById('out').textContent = 'Product ' + productId + ' costs ' + price;
      });
    });
  </script>
</body>
</html>

Aus data-product-id wird dataset.productId. Werte kommen immer als Strings zurück, wandle sie also mit Number() um, bevor du damit rechnest. Auch CSS kann danach auswählen: [data-price="4.50"].

Häufige Fehler

class zweimal schreiben. <div class="a" class="b"> behält nur a. Schreib beide in ein Attribut: class="a b".
Eine id mehrfach verwenden. Zwei Elemente mit derselben id machen #links, Labels und getElementById kaputt, das nur das erste zurückgibt. Für alles, was sich wiederholt, nimm eine Klasse.
disabled="false" oder checked="false". Das Attribut ist immer noch da, also ist es immer noch an. Entferne es stattdessen.
Werte mit Leerzeichen ohne Anführungszeichen. alt=My photo setzt alt auf My. Setz jeden Wert in Anführungszeichen.
Attribute ohne data- erfinden. <div price="4"> ist ungültiges HTML und kann mit einem künftigen Standardattribut kollidieren. Nimm data-price.

Häufig gestellte Fragen

Was ist ein HTML-Attribut?

Ein Attribut ist eine zusätzliche Information, die im öffnenden Tag als name="value" steht. Es konfiguriert das Element: href legt fest, wohin ein Link führt, src und alt beschreiben ein Bild, über class und id finden CSS und JavaScript das Element.

Was ist der Unterschied zwischen class und id in HTML?

Eine id muss auf der Seite eindeutig sein und kennzeichnet genau ein Element, etwa für #fragment-Links, <label for> und getElementById. Eine class können viele Elemente teilen, und ein Element kann mehrere Klassen haben, getrennt durch Leerzeichen. Zum Stylen nimmst du Klassen.

Wie gebe ich einem HTML-Element mehrere Klassen?

Schreib sie in ein einziges class-Attribut, getrennt durch Leerzeichen: <div class="card featured dark">. class zweimal zu schreiben funktioniert nicht: Der Browser behält nur das erste.

Brauchen HTML-Attribute Anführungszeichen?

Anführungszeichen sind optional, wenn der Wert keine Leerzeichen oder Sonderzeichen enthält, aber immer zu quoten ist die sichere Gewohnheit. class=big box gibt dem Element die Klasse big plus ein separates Attribut namens box.

Warum ist mein Button mit disabled="false" immer noch deaktiviert?

disabled ist ein boolesches Attribut: Seine bloße Anwesenheit bedeutet true, egal was im Wert steht. Um das Element zu aktivieren, entferne das Attribut oder setz in JavaScript button.disabled = false, was es entfernt.

Kann ich eigene HTML-Attribute erfinden?

Nimm das Präfix data-: data-price="12" oder data-user-id="7" sind an jedem Element gültig und in JavaScript über element.dataset lesbar. Erfundene Namen ohne Präfix sind ungültiges HTML.

Verwandte Konzepte