Übersicht: Attribute der HTML-Tags
HTML-Attribute wie src, href und data bringen zusätzliche Informationen in ein HTML-Tag. Ein a-Tag braucht die Zieladresse oder URL zur verlinkten Webseite. Das img-Tag funktioniert nur mit dem Pfad zur Bilddatei. width und height sorgen für die Passform von Bildern.
Schreibweise von HTML-Attributen
HTML-Attribute sind Gestaltungsmerkmale wie width im img-Tag. class- und id-Attribute identifizieren HTML-Elemente für Javascript und transportieren CSS-Stile. title- und src-Attribut transferieren Informationen zum Browser.
HTML-Attribute stehen im öffnenden Tag und ihre Werte in Hochkommas.
<tagname attribute="value" attribute="value">
<a href="hierhin.html">Link auf eine andere Webseite</a>
▲ ▲
│ └──── Wert des Attributs
│
└──── Name des Attributs
<img src="bild.png" width="300" height="200" alt="Noch ein Bild">
▲ ▲
│ └──── Wert des Attributs
│
└──── Name des Attributs
Die Namen der HTML-Attribute sind unempfindlich gegenüber Groß- und Kleinschreibung (case-insensitive). So dürfte das img-Tag also auch geschrieben werden:
<img loading=lazy src=veloziraptor.svg WIDTH=488 Height=268 Alt="HTML-Attribute ohne Hochkommas einsetzen">
Die allgemeine Empfehlung lautet allerdings, die Namen mit Kleinbuchstaben und die Werte grundsätzlich in Hochkammas zu schreiben – vorzugsweise doppelte Hochkommas. Bei Leerzeichen im Attribut müssen Hochkommas gesetzt werden, und innerhalb von doppelten Hochkommas einfache oder umgekehrt.
<div class=note style="font-size:1em;font-family:'Times New Roman'">
Wenn Attribute falsch geschrieben werden oder ein Attributname nicht existiert, passiert nichts – die Browser ignorieren Attribute, die es in ihrem Repertoire nicht gibt. Nur der Validator wird eine Fehlermeldung zeigen.
Boolean Attribute in HTML
In älteren HTML-Version mussten die Werte der Attribute immer in Hochkommas gesetzt werden. Heute werden keine Hochkommas benötigt, wenn der Wert eine Zeichenkette ohne Leerzeichen und keine Aufzählung ist.
Boole'sche Attribute können nur vorhanden oder nicht vorhanden sein. Das Attribut hidden wird entweder kurz als hidden ohne Wert oder als hidden="hidden" gesetzt.
HTML-Attribute mit nur einem zulässigen Wert wie draggable, disabled oder checked in Formularen, defer und async beim script-Tag dürfen ohne Wert in das öffnende HTML-Tag geschrieben werden.
<input type="checkbox" disabled="disabled" checked="checked" hidden="hidden">
<input type="checkbox" disabled checked hidden>
|
kurz für checked="checked" --+
Selbst wenn das Attribut hidden den Wert false hätte, wäre es true. Darum wirft der Validator einen Fehler aus: Bad value false for attribute hidden on element input. Auch wenn die Ansicht stimmt, obwohl das HTML nicht sauber oder valide ist: CSS und Javascript könnten die Mitarbeit verweigern.
Attribut-Kategorien
Attribute lassen sich in vier Kategorien einteilen:
- globale Attribute, die fast allen HTML-Tags stehen können – z.B. id, class, title, …
- individuelle Attribute (z.B. href in a- und base-Tags, src in img-Tags, nur iframe: srcdoc und sandbox). rowspan und colspan kommen nur in Tabellenzellen td / th vor.
- Events (z.B. onmouseover), Ereignisse, die für ein HTML-Element registriert werden können,
- eigene Attribute – data-Attribute –, die mit data. anfangen müssen und nur für Javascript eine Bedeutung haben,
Welche Attribute können in fast allen HTML-Tags stehen?
Die meisten Attribute sind optional, einige Attribute sind erforderlich (z.B. das src-Attribut in einem img- oder iframe-Tag).
Einige Attribute haben dieselben Namen wie Tags und haben dennoch nichts mit dem Tag zu tun (z.B. style-Tag im Seitenkopf und style als Attribut in einem HTML-Tag, title-Tag im Kopf der HTML-Datei und title-Attribut in einem HTML-Tag).
<head> <title> … </title> <style> … </style> </head> <body> <div style="background: green"> … </div> <a href="foo.html" title="Wichtiger Link"> … </a> </body>
Globale Attribute, die in fast allen HTML-Tags erlaubt und sinnvoll sind:
| Attribut | Funktion |
|---|---|
| class | CSS-Klasse für Gestaltung und JavaScript-Zugriff |
| id | Eindeutige Kennung |
| style | Inline-CSS für individuellen Stil |
| title | Zusätzliche Information (Tooltip) |
| tabindex | Fokusreihenfolge beim Tabben |
| hidden | Ausblenden des Elements ohne CSS display:none |
| lang | Sprachausgabe |
| dir | Textausrichtung (ltr links nach rechts, rtl rechts nach links) |
| data-* | Eigenes Datenattribut für Javascript |
| draggable | Ob der Benutzer das Element per drag & drop bewegen darf |
| contenteditable | Ob der Benutzer das Element verändern kann |
| spellcheck | Rechtschreibprüfung aktivieren |
| accesskey | Tastaturkürzel für den Fokus auf ein Element |
| aria-* | Zugriffe verbessern im Sinne der Barrierefreiheit |
| role | Rolle (z.B. role="navigation") |
<section id="intro" title="Einleitung"
class="highlight" lang="de"
data-theme="dark">
<h2>HTML-Attribute</h2>
</section>
Alle diese Attribute sind erlaubt, gleich ob im section-, article-, header-, div- oder footer-Tag.
Spezialisierte Attribute: src, href
| Attribut | HTML-Tag |
|---|---|
| src | <img>, <script>, <iframe>, <audio>, <video>, input type="image", <source>, <embed>, <track> |
| href | <a>, <area>, <base>, <link> |
Javascript-Events als HTML-Attribute
Javascript-Events wie onclick, onfocus oder onblur sind ebenfalls reguläre und valide Attribute in HTML-Tags, auch wenn Javascript-Events kaum noch im HTML-Element abgefangen werden.
<div onclick="this.innerHTML='Touch Down!'"></div>
Event Handler wie onclick und onfocus lauschen im HTML-Markup auf Ereignisse. Heute wird diese Form des Event Handlings kaum noch praktiziert, denn sie macht das HTML unübersichtlich und die meisten Skripte sind heute zu komplex, um innerhalb von HTML-Tags abgehandelt zu werden.
Veraltete HTML-Attribute (deprecated)
Die meisten Attribute aus HTML 4 und davor sind inzwischen nicht mehr erlaubt – deprecated. Die folgenden Attribute lassen sich effizienter durch CSS-Regeln realisieren, gelten als veraltet und werden in HTML aktuell nicht mehr unterstützt:
