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>
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"> |
Legt die Sprache des verlinkten Dokuments fest. | <a href="https://www.beispielseite.de" lang="de" hreflang="en">Informationen auf Englisch</a> | |
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.
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!
Ähnliche Artikel
HTML-Tag style: So gestalten Sie das Aussehen von Elementen
Das HTML-Tag style ist die beste Möglichkeit, das Aussehen einzelner Elemente auf einer Website zu gestalten und die Seite so optimal aufzubauen. Hier erfahren Sie, wofür das style-Tag in HTML genau verwendet wird, wie es aufgebaut ist und welche HTML-Attribute mit ihm kompatibel sind. Damit können Sie das Tag einfach in Ihren Code einbetten.
_target: Linkziele definieren in HTML
Möchten Sie Verlinkungen auf Ihrer Website einbauen, können Sie mit dem HTML-Attribut target festlegen, wo der Link geöffnet werden soll. Dabei entscheiden Sie, ob die Nutzer und Nutzerinnen auf Ihrer Onlinepräsenz bleiben oder zur nächsten Website weitergehen sollen. Hier erfahren Sie, wie Sie _target verwenden und was Sie dabei beachten sollten.
div in HTML: Alles Wichtige zur Verwendung des div-Containers
Da das div-Tag keine eigenen semantischen Merkmale hat, wird seit der Einführung von HTML5 sein Einsatz nur dann empfohlen, wenn keine passenderen Elemente verfügbar sind. Hier erfahren Sie alles über den div-Container, lernen anhand praktischer Beispiele, wie er eingesetzt wird, und warum div in HTML kaum noch eine Rolle spielt.
Was ist HTML (Hyper Text Markup Language)?
Eine eigene Website mit einer unverwechselbaren Handschrift? Das lässt sich mit der Auszeichnungssprache HTML in die Tat umsetzen. Das Besondere an HTML: Sie bietet eine übersichtliche, intuitive Syntax und ist als Open-Source-Sprache kostenlos. Zudem stellt sie für Laiinnen und Laien den optimalen Einstieg in die Welt des Programmierens dar. Wir zeigen, was HTML kann und wie es funktioniert.