Übersicht: Attribute der HTML-Tags

Schreibweise von HTML-Attributen

HTML-Attribute stehen im öffnenden Tag und ihre Werte in Hochkommas.

Mit HTML5 entfällt der Zwang, den Wert des Attributs in Hochkommas zu setzen, wenn der Wert eine Zeichenkette ohne Leerzeichen und keine Aufzählung ist. So dürfte das img-Tag also auch geschrieben werden:

<img src=bild.jpg width=300 height=220 alt="Bild eines Elefanten" />

<div class=note style="font-size:1em;font-family:'Times New Roman'"/>

Die allgemeine Empfehlung lautet allerdings, die Werte von Attribute grundsätzlich in Hochkammas zu schreiben – vorzugsweise doppelte Hochkommas.

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.

HTML-Attribute in HTML5

Mit HTML5 dürfen Attribute mit nur einem zulässigen Wert (wie draggable, defer und async beim script-Tag und disabled und checked in input-Tags) ohne Wert in das HTML-Tag geschrieben werden.

<input type="checkbox" disabled="disabled" checked="checked">

<input type="checkbox" disabled checked>
                                  | 
     kurz für checked="checked" --+

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-Tags, src in img-Tags),
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 (ab HTML5) und nur für Javascript eine Bedeutung haben,

Optionale / erforderliche Attribute

Die meisten Attribute sind optional, einige Attribute sind erforderlich (z.B. das src-Attribut in einem img-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:

class

style

title

lang

dir

Neue Attribute in HTML5

contenteditable

contextmenu

hidden

inert

data-

draggable

dropzone

role

checkspell

translate

inert

Die meisten HTML-Tags erlauben nur diese globalen HTML-Attribute. Zu den Ausnahmen gehören

HTML-Tags für Formularfelder,
img,
video- und audio-Tags und
Tags für den head des HTML-Dokuments.

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 auf diese Weise programmiert 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.

Eine der wenigen Ausnahmen ist z.B. der Event Handler für das Opt-Out vom Tracking, der nur auf einer Seite eingesetzt wird.

<a href="javascript:gaOptout()" onclick="alert('Google Analytics wurde deaktiviert')">
   Erfassung von Daten durch Google Analytics für diese Website deaktivieren
</a>

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 unerwünscht und werden in HTML5 nicht mehr unterstützt:

link alink vlink text background bgcolor border clear language noshade nowrap