HTML-Attribute

In der letzten Lektion haben Sie gelernt, dass Elemente aus Tags und Inhalt bestehen. Attribute geben diesen Tags zusätzliche Informationen. Ohne Attribute können viele Elemente ihre eigentliche Aufgabe nicht erfüllen — ein Link braucht eine Adresse, ein Bild einen Dateipfad.

Was ist ein HTML-Attribut?

Ein HTML-Attribut ist ein Name und ein Wert im Start-Tag eines Elements. Es teilt dem Browser etwas über das Element mit, das nicht derselbe sichtbare Text zwischen den Tags ist.

Direkte Antwort

Attribute folgen einem einfachen Muster: name="value". Sie gehören ins öffnende Tag, vor dem schließenden >. Häufige Beispiele sind href für Links sowie src und alt für Bilder. Spätere Lektionen nutzen Attribute oft — lernen Sie das Muster hier einmal.

Das Beispiel lesen

• Am Link speichert href die Ziel-URL
• Der sichtbare Linktext bleibt der Inhalt zwischen <a> und </a>
• Am Bild zeigt src auf die Bilddatei
• alt liefert Alternativtext, wenn das Bild nicht lädt oder für Barrierefreiheit
• Beide Attribute sitzen im Start-Tag

Syntaxregeln zum Merken

1. Attribute nur ins Start-Tag — nicht ins End-Tag
2. Attributname und Wert mit = trennen
3. Die meisten Werte in Anführungszeichen: href="https://example.com"
4. Mehrere Attribute im selben Start-Tag durch Leerzeichen trennen
5. Attributnamen in modernem HTML meist kleinschreiben

Hier setzt href die Adresse und title kann zusätzlichen Hinweistext liefern (oft als Tooltip in Desktop-Browsern). Sie brauchen nicht jedes optionale Attribut an jedem Tag — nutzen Sie, was das Element braucht.

Attribute vs. Inhalt

Inhalt steht zwischen Start- und End-Tag, etwa die Wörter in einem Absatz. Attribute liegen am Start-Tag und konfigurieren das Element. Verwechslung erzeugt Fehler: Eine URL nur im Linktext macht keinen funktionierenden Link; die URL gehört in href.

Hinweis zu leeren Elementen

Leere Elemente wie img nutzen weiterhin Attribute, auch ohne separates End-Tag. Das ist normal: Attribute beschreiben das Element; sie sind nicht derselbe umschlossene Inhalt.

Selbst ausprobieren

1. Öffnen Sie eine einfache HTML-Seite im Editor
2. Fügen Sie einen Link mit href zu einer echten oder Beispiel-URL hinzu
3. Fügen Sie ein img mit src und sinnvollem alt hinzu (Übungspfad oder Platzhaltername zum Lernen der Syntax)
4. Speichern und Seite im Browser öffnen
5. Link anklicken und im Quelltext prüfen, dass das Bild-Markup da ist, auch wenn die Bilddatei fehlt

Häufige Fehler

• Attribute am schließenden Tag schreiben
• Anführungszeichen um nötige Werte vergessen
• Falsches Attribut für die Aufgabe (z. B. URL in src am Link statt href)
• alt bei informativen Bildern leer lassen
• Annehmen, Attributtext erscheine immer als sichtbarer Seiteninhalt — viele Attribute steuern Verhalten oder Barrierefreiheit

Zusammenfassung

• Attribute fügen Extra-Informationen im Start-Tag hinzu
• Die übliche Form ist name="value"
• Links brauchen href; Bilder oft src und alt
• Inhalt steht zwischen Tags; Attribute konfigurieren das Tag
• Mehrere Attribute können an einem Start-Tag kombiniert werden
• Spätere Lektionen nutzen dieses Muster für Überschriften, Formulare, Medien und mehr