Attribute

Ein Tag allein sagt nur, welche Art Element es ist. Oft brauchst du mehr: Wohin führt ein Link? Welches Bild soll geladen werden? Welche Sprache hat die Seite? Dafür gibt es Attribute.

Gesehen hast du schon welche. Im Grundgerüst standen lang="de" am html und charset="UTF-8" am meta, und am img in der letzten Lektion src und alt. Jetzt kommt die Systematik dahinter.

01 / 04Name, Gleichheitszeichen, Wert

Attribute stehen im öffnenden Tag, nach dem Element-Namen, getrennt durch ein Leerzeichen. Sie bestehen aus einem Namen, einem Gleichheitszeichen und einem Wert in Anführungszeichen.

Hier sind zwei an einem einzigen Element:

<a href="https://example.com" title="Zur Startseite">Mehr erfahren</a>

href trägt die Zieladresse, title einen Hinweistext. Mehrere Attribute trennst du einfach mit einem Leerzeichen, eine Reihenfolge gibt es nicht. Fahr auf der Seite mit der Maus über den Link, dann siehst du, was title macht.

Drei Dinge, die dabei oft schiefgehen:

• Attribute gehören nur in den öffnenden Tag. </a href="..."> gibt es nicht.
• Die Anführungszeichen sind Pflicht, sobald der Wert ein Leerzeichen enthält. Setz sie einfach immer, dann musst du nicht darüber nachdenken.
• Es müssen gerade Anführungszeichen sein. Typografische aus einem Textprogramm sehen fast gleich aus und funktionieren nicht.

02 / 04Attribute, die fast überall gehen

Ein paar Attribute kannst du an nahezu jedem Element verwenden. Sie heißen globale Attribute, und drei davon brauchst du ständig:

• id vergibt eine eindeutige Kennung. Sie darf pro Seite nur einmal vorkommen. Damit springst du gezielt zu einem Element, und CSS und JavaScript sprechen es darüber an.
• class ordnet ein Element einer oder mehreren Gruppen zu. Anders als id darf dieselbe Klasse beliebig oft auftauchen, und ein Element darf mehrere Klassen haben, getrennt durch Leerzeichen. Klassen sind die Grundlage fürs Styling mit CSS.
• title zeigt einen kleinen Tooltip, wenn man mit der Maus über das Element fährt. Sein klassischer Einsatz ist die Abkürzung: <abbr title="HyperText Markup Language">HTML</abbr> zeigt beim Draufzeigen die Langform. Ansonsten ist title kein Ersatz für sichtbaren Text, denn auf dem Handy gibt es keinen Mauszeiger, und viele Screenreader lesen ihn nicht vor.

Die Faustregel zwischen id und class: Gibt es das Ding genau einmal, nimm id. Kann es mehrfach vorkommen, nimm class. Im Zweifel class, damit fährst du fast immer richtig.

03 / 04Manche Attribute haben gar keinen Wert

Es gibt eine Sonderform:

<input type="text" value="Normales Feld">
<input type="text" value="Gesperrtes Feld" disabled>
<label><input type="checkbox" checked> Häkchen ist gesetzt</label>

disabled und checked haben keinen Wert, sie sind einfach da oder nicht. Genau das ist die Aussage: Das Feld ist gesperrt, das Häkchen ist gesetzt.

Wichtig dabei: Es zählt nur die Anwesenheit. disabled="false" sperrt das Feld trotzdem, denn der Browser liest nur „disabled steht da“. Wenn du es nicht willst, lässt du es weg. Lösch im Beispiel das disabled und klick in das zweite Feld, dann siehst du den Unterschied.

04 / 04Erfundene Attribute tun nichts

Zum Schluss die Gegenprobe:

<p color="rot">Dieser Absatz sollte rot sein.</p>
<p groesse="24">Dieser Absatz sollte groß sein.</p>
<p class="hinweis">Dieser Absatz macht es richtig.</p>
<p style="color: red">Und dieser ist wirklich rot.</p>

Da stehen color="rot" und groesse="24" an zwei Absätzen. Auf der Seite: nichts passiert. Keine Farbe, keine Größe, aber auch keine Fehlermeldung.

Der Grund: Ein Attribut wirkt nur, wenn der Browser eine Bedeutung dafür kennt. href an einem a kennt er, color an einem p nicht, also passiert nichts. Weggeworfen wird es deshalb nicht, es steht weiter im Baum, nur eben ohne Wirkung. Du kannst dir also keine Attribute ausdenken und hoffen, dass sie etwas tun. Der dritte Absatz macht es richtig: class="hinweis" ist zwar auch nur eine Kennzeichnung, aber die übliche, an der CSS später ansetzt.

Der vierte Absatz ist tatsächlich rot, und zwar über style="color: red". Das style-Attribut nimmt echtes CSS entgegen, für genau dieses eine Element. Es funktioniert, ist aber die letzte Wahl: Es gilt nur hier, lässt sich am schwersten überschreiben, und es mischt das Aussehen unter die Struktur. Wohin CSS stattdessen gehört, klärt Abschnitt 9.

Auch das ist wieder die Fehlertoleranz von HTML. Sie ist der Grund, warum ein Tippfehler im Attributnamen so schwer zu finden ist: einmal herf statt href getippt, und der Link ist einfach kein Link mehr. Kein roter Hinweis, nichts. Wenn etwas nicht wirkt, ist die Schreibweise des Attributs immer einen zweiten Blick wert.