CSS, HTML und Javascript mit {stil}

Ü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.

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 Attributes wie class, id, width, hidden
23-02-02 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

Schreibweise von HTML-Attributen

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=svg/veloziraptor.svg 
       WIDTH=488 Height=268 
         Alt="Beispiel: HTML-Attribute ohne Hochkommas schreiben">
Beispiel: HTML-Attribute ohne Hochkommas schreiben
Keine Hochkommas, Kleinbuchstaben, Großbuchstaben, aber das Bild wird korrekt angezeigt: sauberes valides HTML

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 sie 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:

  1. globale Attribute, die fast allen HTML-Tags stehen können – z.B. id, class, title, …
  2. 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.
  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 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- 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:

id
class
style
title
lang
dir

Neue Attribute in HTML5

contenteditable
contextmenu
hidden
inert
data-
draggable
dropzone
laoding
role
spellcheck
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.

Beispiel für onclick als valides Attribut für Javascript 
<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:

link alink vlink text background bgcolor border clear language noshade nowrap