HTML-Attribute: Zusätzliche Informationen für HTML-Tags

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.

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.

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.

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.

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.

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