HTML-Attribute: Zusatzinfos für Elemente

vom 24.02.2018 von Mark Manns

Attribute geben einem Element zusätzliche Eigenschaften mit. Sie stehen immer im öffnenden Tag und folgen dem Muster name="wert":

HTML-Code

<a href="https://www.htmlwiki.de/" title="Zum HTMLWiki">Hier klicken</a>

Das href sagt dem Link wohin er führt, das title liefert einen Hinweistext. Ohne Attribute wäre ein Link nur unterstrichener Text der nirgendwohin führt, ziemlich sinnlos also. Viele Elemente werden erst durch ihre Attribute nützlich.

Die Schreibregeln

Attribute stehen nur im öffnenden Tag, nie im schließenden.
Mehrere Attribute werden mit Leerzeichen getrennt, die Reihenfolge ist egal.
Werte gehören in Anführungszeichen. Technisch geht es manchmal auch ohne, aber mit Anführungszeichen gibt es keine bösen Überaschungen bei Leerzeichen oder Sonderzeichen.
Attributnamen schreibt man klein. HREF funktioniert zwar, sieht aber aus wie 1996.

Boolesche Attribute

Manche Attribute brauchen keinen Wert, ihre bloße Anwesenheit genügt. Ein deaktivierter Button sieht so aus:

<button disabled>Nicht klickbar</button>

Ergebnis

Weitere Beispiele sind checked bei Checkboxen, required bei Pflichtfeldern und hidden zum Verstecken von Elementen.

Globale Attribute: gehen überall

Einige Attribute darf jedes Element tragen. Die wichtigsten:

Attribut	Zweck
`id`	Eindeutiger Name für genau ein Element. Praktisch als Sprungziel und für CSS und JavaScript. Jede id darf pro Seite nur einmal vorkommen.
`class`	Ordnet das Element einer oder mehreren Klassen zu, der Hauptanschluss für CSS. Mehr dazu unter Klassen und IDs.
`lang`	Sprache des Inhalts, etwa `lang="de"`. Steht meist am html-Element, kann aber auch einzelne fremdsprachige Abschnitte markieren.
`title`	Hinweistext der beim Draufzeigen mit der Maus erscheint. Auf Touchgeräten unsichtbar, also nie für wichtige Infos benutzen.
`hidden`	Blendet das Element komplett aus.
`data-*`	Frei erfindbare Datenattribute wie `data-preis="9.99"`, gedacht für eigene Zwecke und JavaScript.

Weiter im Lernpfad: Überschriften · Attribute in Aktion: das a-Element und das img-Element