HTML-Attribute hin­ter­le­gen zu­sätz­li­che In­for­ma­tio­nen in einem HTML-Tag. Dazu werden sie einfach im Code hin­zu­ge­fügt. Neben Universal-, Event- und Data-At­tri­bu­ten gibt es zahl­rei­che in­di­vi­du­el­le Attribute.

Wozu werden HTML-Attribute genutzt?

HTML-Attribute werden dazu genutzt, weitere In­for­ma­tio­nen über Elemente in einem HTML-Tag zu hin­ter­le­gen. Sie setzen sich zusammen aus einem Namen und einem Wert. Die HTML-Attribute stehen dabei im öffnenden Tag und sind case in­sen­si­ti­ve, also un­emp­find­lich gegenüber Groß- und Klein­schrei­bung. Zwar müssen ihre Werte nicht mehr zwangs­läu­fig in Hoch­kom­mas ge­schrie­ben werden; diese Schreib­wei­se wird dennoch empfohlen, um Fehler zu vermeiden. So werden HTML-Attribute im Code ein­ge­bun­den:

<Element Attributname="Attributwert"/>

Soll etwa ein Link auf einer Website eingebaut werden, funk­tio­niert das über das <a>-Tag und das Attribut href. Das sieht dann zusammen so aus:

<!DOCTYPE html>
<html>
<head>
<title>Beispieltitel</title>
</head>
<body>
<a href="https://www.beispiel.de">Hier gelangen Sie zur Beispielseite.</a>
</body>
</html>
Tipp

Mehr zur internen und externen Ver­lin­kung durch HTML und ent­spre­chen­de Attribute erfahren Sie in unserem aus­führ­li­chen Artikel über a href.

Welche HTML-Attribute gibt es?

Es gibt zahl­rei­che ver­schie­de­ne HTML-Attribute, wobei seit der Ein­füh­rung von HTML5 einige Optionen nicht länger nutzbar sind. Die HTML-Attribute lassen sich grob in fünf ver­schie­de­ne Gruppen einteilen:

  • Klas­si­sche Universal-Attribute, die in nahezu allen Elementen verwendet werden können und dabei eine konstante Rolle behalten. Bei einigen Elementen haben sie al­ler­dings keine Wirkung.
  • Spe­zi­fi­sche Attribute, die einzelne Elemente betreffen und für diese Parameter de­fi­nie­ren.
  • Attribute, die seit der Ein­füh­rung von HTML5 gelten; diese schaffen teilweise neue Mög­lich­kei­ten oder ersetzen ältere HTML-Attribute.
  • Event-Attribute, die ein jeweils de­fi­nier­tes Ereignis für ein Element auslösen, sobald Nut­ze­rin­nen oder Nutzer eine bestimmte Handlung ausführen.
  • Data-Attribute, die In­for­ma­tio­nen enthalten können, für Nut­ze­rin­nen und Nutzer al­ler­dings nicht erkennbar sind.

Klas­si­sche Universal-Attribute

Klas­si­sche Universal-Attribute sind in den meisten HTML-Tags erlaubt. Dies sind die be­kann­tes­ten:

HTML-Attribute Be­schrei­bung Beispiel
id Dient der ein­deu­ti­gen Iden­ti­fi­zie­rung eines HTML-Elements. id="beispiel"
class Dient dazu, ein Element einer oder mehreren Klassen zu­zu­ord­nen. class="autos"
style Definiert den Stil eines HTML-Elements und kann so z. B. Farbe, Font oder Schrift­grö­ße festlegen. style="color: blue; font-size: 2em"
title Enthält zu­sätz­li­che In­for­ma­tio­nen über den Inhalt eines Elements; diese werden z. B. in einem eigenen Fenster angezeigt, wenn man mit der Maus über das Element fährt. title="bei­spiel­text"
lang Bestimmt die Ba­sis­spra­che für ein Dokument. <html lang="de">
dir Definiert die Lauf­rich­tung eines Textes von links nach rechts oder umgekehrt. <html dir="ltr">beispiel</html>

Spe­zi­fi­sche HTML-Attribute

Für die De­fi­ni­ti­on einzelner Elemente gibt es zahl­rei­che spe­zi­fi­sche HTML-Attribute. Dies sind die gän­gigs­ten:

HTML-Attribute Be­schrei­bung Beispiel
alt Blendet einen al­ter­na­ti­ven Text ein, wenn ein Bild nicht geladen oder angezeigt werden kann. <img src="https://www.ionos.at/digitalguide/rotesauto.jpg" alt="Roter Sport­wa­gen an einer Ampel.">
height Legt die Höhe eines Elements in px fest. <img alt="das rote Auto" height="220">
width Legt die Breite eines Elements in px fest. <img alt="das rote Auto" width="220">
href Definiert die URL für einen Link. <a href="https://www.bei­spiel­sei­te.de" title="Erfahren Sie mehr">
hreflang Legt die Sprache des ver­link­ten Dokuments fest. <a href="https://www.bei­spiel­sei­te.de" lang="de" hreflang="en">In­for­ma­tio­nen auf Englisch</a>
target Legt fest, wo ein Link geöffnet werden soll. <a href="https://www.bei­spiel­sei­te.de" target="_blank">
rel Definiert die Beziehung zwischen dem target und den ver­link­ten Do­ku­men­ten. <a rel="nofollow" href="https://www.bei­spiel­sei­te.de/">bei­spiel­sei­te</a>
src Definiert die Herkunft eines Elements. <img src="https://www.ionos.at/digitalguide/rotesauto.jpg" alt="das rote Auto>
autoplay Sorgt dafür, dass ein be­stimm­ter Me­di­en­in­halt au­to­ma­tisch ab­ge­spielt wird; die meisten Browser können diese Ein­stel­lung al­ler­dings außer Kraft setzen. <video autoplay>
poster Legt ein Vor­schau­bild fest, wenn Sie ein Video in HTML einbinden. <video controls poster="vorschau.png">

Neue Attribute seit HTML5

Seit der Ein­füh­rung von HTML5 und HTML 5.1 gibt es einige HTML-Attribute, die neu da­zu­ge­kom­men sind. Dazu gehören u. a. folgende:

HTML-Attribute Be­schrei­bung Beispiel
con­ten­tedi­ta­ble Definiert, ob der Inhalt eines Elements editiert werden darf; die möglichen Werte sind true und false. <p con­ten­tedi­ta­ble="false">
hidden Universal-Attribut, das ein Element aus­blen­den kann. <p hidden> Dieser Text wird aus­ge­blen­det </p>
dropzone Definiert, ob ein Element beim Drag-and-Drop kopiert (copy), verlinkt (link) oder bewegt (move) wird. <p dropzone="move">
draggable Universal-Attribut, das definiert, ob der Inhalt eines Elements per Drag-and-Drop gezogen werden darf. <p draggable="false">
loading Legt fest, wie externe Medien geladen werden; die zu­läs­si­gen Werte sind auto, eager und lazy. <img src="https://www.ionos.at/digitalguide/rotesauto.jpg" alt="das rote Auto" loading="lazy"
spell­ch­eck Legt fest, ob eine Recht­schreib­prü­fung aktiviert werden soll; zulässige Werte sind true und false. <p con­ten­tedi­ta­ble="true" spell­ch­eck="false">

Event-Attribute

Es gibt zahl­rei­che ver­schie­de­ne HTML-Attribute, die Events in einem Browser auslösen. Die folgenden HTML-Attribute sind daher nur eine kleine Auswahl un­ter­schied­li­cher Er­eig­nis­se, die über Ja­va­Script in HTML ein­ge­bun­den werden können.

HTML-Attribute Be­schrei­bung Beispiel
onclick Löst ein Ereignis in Ja­va­Script durch einen Mausklick aus. <button onclick="Bei­spiel­funk­ti­on ( ) ">Klicken Sie hier</button>
onscroll Wird ausgelöst, wenn das Element gescrollt wird. <div onscroll="Bei­spiel­funk­ti­on ( ) ">
onkeydown Wird ausgelöst, wenn man eine Taste drückt. <input type="text" onkeydown=Bei­spiel­funk­ti­on ( ) ">
onsearch Löst ein Ja­va­Script aus, sobald eine Suche in der Suchmaske ein­ge­ge­ben wird. <input type="suche" onsearch="Bei­spiel­funk­ti­on ( ) ">
onerror Kann im Falle eines Fehlers ein Ja­va­Script ausführen. <img src="https://www.ionos.at/digitalguide/rotesauto.jpg" onerror="Bei­spiel­funk­ti­on ( ) ">
oncopy Wird ausgelöst, wenn ein Text kopiert wird. <input type="text" oncopy="Bei­spiel­funk­ti­on ( ) " value="Kopieren Sie diesen Text">
onselect Löst ein Ja­va­Script aus, sobald man einen Text im Input-Element aus­ge­wählt hat. <input type="text onselect="Bei­spiel­funk­ti­on ( ) " value="Bei­spiel­text">

Data-Attribute

Zu­sätz­lich zu den oben auf­ge­führ­ten HTML-At­tri­bu­ten gibt es eigene Attribute, die lediglich über ein Skript aus­ge­wer­tet oder mit CSS genutzt werden können. So lassen sich In­for­ma­tio­nen mit­lie­fern, die nicht visuell prä­sen­tiert werden sollen. Diese HTML-Attribute werden immer mit data- begonnen. Sie können sie mit setAt­tri­bu­te setzen und über ge­tAt­tri­bu­te lesen. Auch Such­ma­schi­nen werten diese HTML-Attribute nicht aus. Erlaubt sind für die Data-Attribute aus­schließ­lich Klein­buch­sta­ben, Zahlen, Bin­de­strich, Punkt und Dop­pel­punkt.

<article
id="Beispielelemente"
data-colums="5"
data-index-number="1385"
data-parent="html5">
</article>

Fazit: HTML-Attribute sind wichtig für fast jede Website

Wenn Sie HTML lernen, werden Sie schnell bemerken, dass die HTML-Attribute ein wichtiger Baustein auf dem Weg zur optimalen und voll funk­tio­na­len Website sind. Gerade wenn Sie Funk­tio­nen benötigen, die von der all­täg­li­chen Hand­ha­bung abweichen, sind die HTML-Attribute der beste und sicherste Weg. Die hin­ter­leg­ten In­for­ma­tio­nen sorgen dafür, dass sämtliche Aspekte Ihrer neuen Website Hand in Hand zu­sam­men­ar­bei­ten. Die Nutzung ist besonders einfach mit einem der zahl­rei­chen HTML-Editoren.

Tipp

Eine perfekte Website – ganz nach Ihrem Geschmack: Mit dem Homepage-Baukasten von IONOS bekommen Sie alle not­wen­di­gen Tools, um Ihren Online-Auftritt von Anfang an selbst zu bauen. Al­ter­na­tiv erstellen unsere Ex­per­tin­nen und Experten Ihre Website ganz nach Ihren in­di­vi­du­el­len Wünschen. Wählen Sie das passende Modell für Ihre Zwecke!

Zum Hauptmenü