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.

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/digitalguide/rotesauto.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/digitalguide/rotesauto.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/digitalguide/rotesauto.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/digitalguide/rotesauto.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!

War dieser Artikel hilfreich?