# 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](https://www.ionos.at/digitalguide/websites/web-entwicklung/html-tags/ "HTML-Tags") 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: ```none ``` 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: ```none Beispieltitel Hier gelangen Sie zur Beispielseite. ``` --- ### Tipp Mehr zur internen und externen Verlinkung durch HTML und entsprechende Attribute erfahren Sie in unserem ausführlichen Artikel über [a href](https://www.ionos.at/digitalguide/websites/web-entwicklung/href-html/ "href HTML"). --- ## Welche HTML-Attribute gibt es? Es gibt zahlreiche verschiedene HTML-Attribute, wobei seit der Einführung von [HTML5](https://www.ionos.at/digitalguide/websites/web-entwicklung/was-ist-html5/ "Was ist 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.at/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](https://www.ionos.at/digitalguide/online-marketing/suchmaschinenmarketing/hreflang-beispiele-grundlagen-und-haeufige-fehler/) Legt die Sprache des verlinkten Dokuments fest. <a href="https://www.beispielseite.de" lang="de" hreflang="en">Informationen auf Englisch</a>
[target](https://www.ionos.at/digitalguide/websites/web-entwicklung/html-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.at/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](https://www.ionos.at/digitalguide/websites/webseiten-erstellen/mit-html-ein-video-einbinden-so-wirds-gemacht/). <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.at/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](https://www.ionos.at/digitalguide/websites/web-entwicklung/javascript-in-html-einbinden/ "JavaScript in HTML einbinden") 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.at/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. ```none
``` ## Fazit: HTML-Attribute sind wichtig für fast jede Website Wenn Sie [HTML lernen](https://www.ionos.at/digitalguide/websites/web-entwicklung/html-lernen-das-grosse-einsteiger-tutorial/), 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](https://www.ionos.at/digitalguide/websites/web-entwicklung/html-editoren/). --- ### Tipp Eine perfekte Website – ganz nach Ihrem Geschmack: Mit dem [**Homepage-Baukasten**](https://www.ionos.at/websites/homepage-erstellen "Homepage-Baukasten von IONOS") 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! --- This is a markdown version of: [https://www.ionos.at/digitalguide/websites/web-entwicklung/html-attribute/](https://www.ionos.at/digitalguide/websites/web-entwicklung/html-attribute/) for AI/LLM consumption.