Für den Aufbau des Internets im Allgemeinen und einzelner Webseiten im Speziellen sind HTML-Tags ausgesprochen wichtig. Es kommt aber immer wieder zu Situationen, in denen die klassischen Einsatzgebiete solcher Tags nicht ausreichen. Dann ist es möglich, dass sie diesen mithilfe von HTML-Attributen zusätzliche Informationen anhängen. Welche HTML-Attribute es gibt, wozu sie dienen und worauf Sie bei der Nutzung achten sollten, erfahren Sie in diesem Artikel.
![→ Leitfaden CSS & HTML für Anfänger [Kostenloser Download]](https://no-cache.hubspot.com/cta/default/53/07f1f640-9445-4bbc-861d-5b336e8d2e3d.png)
Was ist ein HTML-Attribut?
Ein HTML-Attribut ist eine Zusatzinformation, die einem HTML-Tag angehängt wird. Hierdurch verändert sich das Aussehen oder die Funktionsweise des Tags. Solche Attribute bestehen aus einem Attributnamen und einem Attributwert und stehen im Start-Tag. HTML-Attribute sind beispielsweise für Links und Bilder hilfreich.
Dafür sind HTML-Attribute wichtig
HTML-Attribute sind wichtig, wenn Sie HTML-Tags ausgestalten und dem eigenen Webauftritt eine individuelle Note geben möchten. Unter anderem kann man durch solche Attribute Links in einen Text integrieren oder Images einfügen. Ebenso werden sie genutzt, um Text einzublenden, wenn ein Bild nicht angezeigt werden kann, oder um die Höhe und Breite von Elementen festzulegen.
Grundsätzlich wird zwischen optionalen und erforderlichen Attributen unterschieden. Beispielsweise ist das src-Attribut bei Bildern erforderlich, da es den Pfad zum Bild angibt. Das alt-Attribut ist hingegen optional, da es nicht zwingend erforderlich ist, einen alternativen Text anzuzeigen, wenn das Bild nicht dargestellt werden kann.
Ganz allgemein dienen HTML-Attribute dazu, Komponenten in eine Webseite zu integrieren und diesen zusätzlichen Funktionen und Informationen zuzuweisen. Das Ziel besteht in der Regel darin, ein möglichst intuitives und angenehmes Nutzer- und Nutzerinnenerlebnis für die Besucher und Besucherinnen des Webauftritts zu erreichen.
Aufbau und Schreibweise von HTML-Attributen
Ein HTML-Attribut setzt sich grundsätzlich aus Name und Wert zusammen, die durch ein Gleichheitszeichen voneinander getrennt werden. Sie werden im öffnenden Tag platziert und haben eine eindeutige Schreibweise. Ein Beispiel sind HTML-class Attribute. Sie dienen dazu, einem Element eine bestimmte Klasse zuzuweisen:
<p class=“highlight“>Dies ist ein Beispieltext.</p>
„class“ ist in diesem Beispiel der Attributname und „highlight“ der Attributwert. Diese werden immer durch ein „=“ voneinander getrennt. Durch dieses HTML-Attribut ist es möglich, einem Absatz einen CSS-Style zuzuweisen und ihm beispielsweise eine Hintergrundfarbe zu geben oder ihn fett zu gestalten.
Es ist allerdings auch möglich, verschiedene HTML-Attribute in einen Code einzubauen. Das folgende Beispiel zeigt, wie ein Bild einen eindeutigen Pfad (src), einen alternativen Text (alt) sowie Breite (width) und Höhe (height) zugewiesen bekommt:
<img src=“bild.jpg“ alt=“Ein Bild“ width=“300“ height=“200“>
Welche HTML-Attribute gibt es?
Es gibt eine Vielzahl ganz unterschiedlicher HTML-Attribute mit jeweils eigenen Funktionen wie HTML-lang-Attribute, HTML-id-Attribute, HTML-Boolean-Attribute oder HTML-style-Attribute, die unterschiedlichen Kategorien zugeordnet werden. Diese werden im Folgenden kurz vorgestellt:
Universalattribute
Universalattribute sind ausgesprochen vielseitig und können in nahezu allen Elementen Verwendung finden. Sie haben eine konkrete Rolle, die sich bei der Nutzung nicht ändert. In einigen seltenen Fällen haben universale Attribute aber keine Wirkung und können somit nicht in HTML-Tags verwendet werden.
| 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 CSS-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> |
Individuelle Attribute
Individuelle Attribute, die auch als spezifische Attribute bezeichnet werden, gelten nicht in allen HTML-Tags, sondern werden für ganz spezifische Einsatzgebiete verwendet. Mit ihnen legen Sie beispielsweise die Höhe und Breite von Elementen fest, binden Links ein oder definieren die Sprache eines Elements.
| HTML-Attribute | Beschreibung | Beispiel |
| alt | Blendet einen alternativen Text ein, wenn ein Bild nicht geladen oder angezeigt wird. | <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"> |
Event-Attribute
Event-Attribute sorgen für eine größtmögliche Flexibilität. Abhängig davon, welches Verhalten Nutzer und Nutzerinnen zeigen, wird ein jeweils anderes Ergebnis beim Elements ausgelöst. Unter anderem kommen Event-Attribute zum Einsatz, wenn Anwender und Anwenderinnen mit der Maus klicken, scrollen, eine bestimmte Taste drücken oder eine andere Handlung vollziehen.
| 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"> |
Eigene Attribute
Eigene Attribute spielen bei der Nutzung von Javascript eine Rolle. Sie werden auch als HTML-data-Attribute bezeichnet, da sie immer mit „data“ beginnen. Mit eigenen Attributen ist es möglich, zusätzliche CSS-Stile und Funktionen zu nutzen, die für eine Webseite von Bedeutung sind.
<article
id="Beispielelemente"
data-colums="5"
data-index-number="1385"
data-parent="html5">
</article>
Attribute, die seit der Einführung von HTML5 gelten
Attribute, die seit der Einführung von HTML5 gelten, erweitern das Leistungsspektrum oder tauschen veraltete Attribute durch neue Varianten aus. Hierdurch stehen Ihnen viel mehr Möglichkeiten zur Individualisierung eines Webauftritts zur Verfügung.
| 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 | Universalattribut, das ein Element ausblendet. | <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 | Universalattribut, 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 wird; zulässige Werte sind true und false. | <p contenteditable="true" spellcheck="false"> |
Fazit: HTML-Attribute sind vielseitig einsetzbar
Bei der Gestaltung von Webseiten spielen HTML-Attribute eine wichtige Rolle. Mit ihnen reichern Sie HTML-Tags mit zusätzlichen Informationen an, um so deren Aussehen oder Funktionsspektrum zu verändern. Die einzelnen HTML-Attribute sind verschiedenen Kategorien zugewiesen, was die Handhabung erleichtert und dafür sorgt, dass Sie für jedes Einsatzgebiet die passenden Attribute verwenden können.
Der Einsatz erfordert zwar etwas Einarbeitungszeit, danach profitieren Sie jedoch stark von den zusätzlichen Möglichkeiten, die Ihnen die HTML-Attribute bieten.
Titelbild: SARINYAPINNGAM / iStock / Getty Images Plus
