CSS, HTML und Javascript mit {stil}

Übersicht: Attribute von HTML-Tags

Grundlagen HTML-Attribute: HTML-Tag um zusätzliche Informationen und Anweisungen für den Browser erweitern

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.

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.

HTML-Attribute<tagname attribute="value" attribute="value"><a href="hierhin.html">Link auf eine andere Webseite</a>Name des AttributsWert des Attributs<img src="bild.png" width="300" height="220" alt="bild">Name des AttributsWert des Attributs

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:

  1. globale Attribute, die fast allen HTML-Tags stehen können – z.B. id, class, title, …
  2. individuelle Attribute (z.B. href in a-Tags, src in img-Tags),
  3. Events (z.B. onmouseover), Ereignisse, die für ein HTML-Element registriert werden können.
  4. eigene Attribute – data-Attribute –, die mit data anfangen müssen (ab HTML5),

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:

id
class
style
title
lang
dir

Neue Attribute in HTML5

contextmenu
hidden
inert
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, ondrag oder ontouchstart sind ebenfalls reguläre und valide Attribute in HTML-Tags, auch wenn Javascript-Events kaum noch auf diese Weise programmiert werden.

Beispiel für onclick als valides Attribut für Javascript
<div ontouch="this.innerHTML='Touch Down!'" 
     onclick="this.innerHTML='Clicked!'"></div>

Event Handler wie onclick und ontouch 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.

Veralterte und unerwünschte HTML-Attribute

Die meisten Attribute aus HTML 4 und davor sind inzwischen nicht mehr erlaubt. 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
HTML-Attribute