HTML-Attribute: Ein Überblick über die wichtigsten Attribute

HTML-Attribute hinterlegen zusätzliche Informationen in einem HTML-Tag. Dazu werden sie einfach im Code hinzugefügt. Neben Universal-, Event- und Data-Attributen gibt es zahlreiche individuelle Attribute.

Inhaltsverzeichnis

Wozu werden HTML-Attribute genutzt?
Welche HTML-Attribute gibt es?
Klassische Universal-Attribute
Spezifische HTML-Attribute
Neue Attribute seit HTML5
Event-Attribute
Data-Attribute
Fazit: HTML-Attribute sind wichtig für fast jede Website

Wozu werden HTML-Attribute genutzt?

HTML-Attribute werden dazu genutzt, weitere Informationen über Elemente in einem HTML-Tag zu hinterlegen. Sie setzen sich zusammen aus einem Namen und einem Wert. Die HTML-Attribute stehen dabei im öffnenden Tag und sind case insensitive, also unempfindlich gegenüber Groß- und Kleinschreibung. Zwar müssen ihre Werte nicht mehr zwangsläufig in Hochkommas geschrieben werden; diese Schreibweise wird dennoch empfohlen, um Fehler zu vermeiden. So werden HTML-Attribute im Code eingebunden:

<Element Attributname="Attributwert"/>

Soll etwa ein Link auf einer Website eingebaut werden, funktioniert 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 Verlinkung durch HTML und entsprechende Attribute erfahren Sie in unserem ausführlichen Artikel über a href.

Welche HTML-Attribute gibt es?

Es gibt zahlreiche verschiedene HTML-Attribute, wobei seit der Einführung von HTML5 einige Optionen nicht länger nutzbar sind. Die HTML-Attribute lassen sich grob in fünf verschiedene Gruppen einteilen:

Klassische Universal-Attribute, die in nahezu allen Elementen verwendet werden können und dabei eine konstante Rolle behalten. Bei einigen Elementen haben sie allerdings keine Wirkung.
Spezifische Attribute, die einzelne Elemente betreffen und für diese Parameter definieren.
Attribute, die seit der Einführung von HTML5 gelten; diese schaffen teilweise neue Möglichkeiten oder ersetzen ältere HTML-Attribute.
Event-Attribute, die ein jeweils definiertes Ereignis für ein Element auslösen, sobald Nutzerinnen oder Nutzer eine bestimmte Handlung ausführen.
Data-Attribute, die Informationen enthalten können, für Nutzerinnen und Nutzer allerdings nicht erkennbar sind.

Klassische Universal-Attribute

Klassische Universal-Attribute sind in den meisten HTML-Tags erlaubt. Dies sind die bekanntesten:

HTML-Attribute	Beschreibung	Beispiel
id	Dient der eindeutigen Identifizierung eines HTML-Elements.	id="beispiel"
class	Dient dazu, ein Element einer oder mehreren Klassen zuzuordnen.	class="autos"
style	Definiert den Stil eines HTML-Elements und kann so z. B. Farbe, Font oder Schriftgröße festlegen.	style="color: blue; font-size: 2em"
title	Enthält zusätzliche Informationen ü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="beispieltext"
lang	Bestimmt die Basissprache für ein Dokument.	<html lang="de">
dir	Definiert die Laufrichtung eines Textes von links nach rechts oder umgekehrt.	<html dir="ltr">beispiel</html>

Spezifische HTML-Attribute

Für die Definition einzelner Elemente gibt es zahlreiche spezifische HTML-Attribute. Dies sind die gängigsten:

HTML-Attribute	Beschreibung	Beispiel
alt	Blendet einen alternativen Text ein, wenn ein Bild nicht geladen oder angezeigt werden kann.	<img src="https://www.ionos.de/digitalguiderotesauto.jpg" alt="Roter Sportwagen 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.beispielseite.de" title="Erfahren Sie mehr">
hreflang	Legt die Sprache des verlinkten Dokuments fest.	<a href="https://www.beispielseite.de" lang="de" hreflang="en">Informationen auf Englisch</a>
target	Legt fest, wo ein Link geöffnet werden soll.	<a href="https://www.beispielseite.de" target="_blank">
rel	Definiert die Beziehung zwischen dem target und den verlinkten Dokumenten.	<a rel="nofollow" href="https://www.beispielseite.de/">beispielseite</a>
src	Definiert die Herkunft eines Elements.	<img src="https://www.ionos.de/digitalguiderotesauto.jpg" alt="das rote Auto>
autoplay	Sorgt dafür, dass ein bestimmter Medieninhalt automatisch abgespielt wird; die meisten Browser können diese Einstellung allerdings außer Kraft setzen.	<video autoplay>
poster	Legt ein Vorschaubild fest, wenn Sie ein Video in HTML einbinden.	<video controls poster="vorschau.png">

Neue Attribute seit HTML5

Seit der Einführung von HTML5 und HTML 5.1 gibt es einige HTML-Attribute, die neu dazugekommen sind. Dazu gehören u. a. folgende:

HTML-Attribute	Beschreibung	Beispiel
contenteditable	Definiert, ob der Inhalt eines Elements editiert werden darf; die möglichen Werte sind true und false.	<p contenteditable="false">
hidden	Universal-Attribut, das ein Element ausblenden kann.	<p hidden> Dieser Text wird ausgeblendet </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 zulässigen Werte sind auto, eager und lazy.	<img src="https://www.ionos.de/digitalguiderotesauto.jpg" alt="das rote Auto" loading="lazy"
spellcheck	Legt fest, ob eine Rechtschreibprüfung aktiviert werden soll; zulässige Werte sind true und false.	<p contenteditable="true" spellcheck="false">

Event-Attribute

Es gibt zahlreiche verschiedene HTML-Attribute, die Events in einem Browser auslösen. Die folgenden HTML-Attribute sind daher nur eine kleine Auswahl unterschiedlicher Ereignisse, die über JavaScript in HTML eingebunden werden können.

HTML-Attribute	Beschreibung	Beispiel
onclick	Löst ein Ereignis in JavaScript durch einen Mausklick aus.	<button onclick="Beispielfunktion ( ) ">Klicken Sie hier</button>
onscroll	Wird ausgelöst, wenn das Element gescrollt wird.	<div onscroll="Beispielfunktion ( ) ">
onkeydown	Wird ausgelöst, wenn man eine Taste drückt.	<input type="text" onkeydown=Beispielfunktion ( ) ">
onsearch	Löst ein JavaScript aus, sobald eine Suche in der Suchmaske eingegeben wird.	<input type="suche" onsearch="Beispielfunktion ( ) ">
onerror	Kann im Falle eines Fehlers ein JavaScript ausführen.	<img src="https://www.ionos.de/digitalguiderotesauto.jpg" onerror="Beispielfunktion ( ) ">
oncopy	Wird ausgelöst, wenn ein Text kopiert wird.	<input type="text" oncopy="Beispielfunktion ( ) " value="Kopieren Sie diesen Text">
onselect	Löst ein JavaScript aus, sobald man einen Text im Input-Element ausgewählt hat.	<input type="text onselect="Beispielfunktion ( ) " value="Beispieltext">

Data-Attribute

Zusätzlich zu den oben aufgeführten HTML-Attributen gibt es eigene Attribute, die lediglich über ein Skript ausgewertet oder mit CSS genutzt werden können. So lassen sich Informationen mitliefern, die nicht visuell präsentiert werden sollen. Diese HTML-Attribute werden immer mit data- begonnen. Sie können sie mit setAttribute setzen und über getAttribute lesen. Auch Suchmaschinen werten diese HTML-Attribute nicht aus. Erlaubt sind für die Data-Attribute ausschließlich Kleinbuchstaben, Zahlen, Bindestrich, Punkt und Doppelpunkt.

<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 funktionalen Website sind. Gerade wenn Sie Funktionen benötigen, die von der alltäglichen Handhabung abweichen, sind die HTML-Attribute der beste und sicherste Weg. Die hinterlegten Informationen sorgen dafür, dass sämtliche Aspekte Ihrer neuen Website Hand in Hand zusammenarbeiten. Die Nutzung ist besonders einfach mit einem der zahlreichen HTML-Editoren.

Tipp

Eine perfekte Website – ganz nach Ihrem Geschmack: Mit dem Homepage-Baukasten von IONOS bekommen Sie alle notwendigen Tools, um Ihren Online-Auftritt von Anfang an selbst zu bauen. Alternativ erstellen unsere Expertinnen und Experten Ihre Website ganz nach Ihren individuellen Wünschen. Wählen Sie das passende Modell für Ihre Zwecke!