HTML - Attribute

Globale Attribute

Globale Attribute können bei jedem HTML-Element verwendet werden. Sie verleihen den Elementen zusätzliche Funktionen oder Gestaltungsmöglichkeiten. Einige häufig verwendete globale Attribute sind:

1. class: Das class-Attribut ermöglicht es, einem Element einen oder mehrere Klassennamen zuzuweisen. Klassen werden verwendet, um Elemente zu gruppieren und ihnen mit CSS oder JavaScript gemeinsame Stile oder Funktionen zuzuweisen.

<div class="container">...</div>

2. id: Das id-Attribut wird verwendet, um einem Element innerhalb eines HTML-Dokuments eine eindeutige Kennung zu geben. Es wird oft zum Verlinken auf bestimmte Elemente oder zum Anwenden einzigartiger Stile oder Funktionen mit CSS oder JavaScript verwendet.

<h1 id="main-heading">Willkommen</h1>

3. style: Mit dem style-Attribut können Inline-CSS-Stile direkt auf ein Element angewendet werden. Es wird verwendet, um CSS-Eigenschaften und deren Werte für ein bestimmtes Element festzulegen.

<p style="color: blue; font-size: 18px;">Dies ist ein gestylter Absatz.</p>

4. title: Das title-Attribut gibt zusätzliche Informationen oder einen Tooltip, der beim Überfahren eines Elements angezeigt wird. Es wird oft verwendet, um mehr Kontext zu geben oder den Zweck eines Elements zu beschreiben.

<a href="https://www.example.com" title="Beispiel-Website besuchen">Beispiel</a>

Elementspezifische Attribute

Neben globalen Attributen haben einige HTML-Elemente ihre eigenen spezifischen Attribute, die einzigartige Funktionen bieten oder ihr Verhalten ändern. Diese Attribute funktionieren nur bei bestimmten Elementen. Hier einige Beispiele:

1. src-Attribut für <img>-Elemente: Das src-Attribut legt die URL oder den Pfad zur Bilddatei fest, die innerhalb eines <img>-Elements angezeigt werden soll.

<img src="bild.jpg" alt="Beschreibung des Bildes">

2. href-Attribut für <a>-Elemente: Das href-Attribut wird verwendet, um die Ziel-URL oder den Ankerlink für einen mit dem <a>-Element erstellten Hyperlink festzulegen.

<a href="https://www.example.com">Beispiel-Website besuchen</a>

3. type-Attribut für <input>-Elemente: Das type-Attribut legt den Typ des Eingabefelds fest, das von einem <input>-Element angezeigt wird. Es kann auf Werte wie "text", "password", "checkbox", "radio" usw. gesetzt werden.

<input type="text" name="username" placeholder="Geben Sie Ihren Benutzernamen ein">

Dies sind nur einige Beispiele für elementspezifische Attribute. Jedes HTML-Element hat seine eigene Reihe von Attributen, die sein Verhalten oder Aussehen ändern.

class-Attribut

Das class-Attribut weist einem HTML-Element eine oder mehrere Klassen zu. Klassen gruppieren Elemente und wenden mithilfe von CSS oder JavaScript gemeinsame Stile oder Verhaltensweisen auf sie an.

Um einem Element eine Klasse hinzuzufügen, verwenden Sie das class-Attribut gefolgt vom Klassennamen im öffnenden Tag:

<div class="container">...</div>

Sie können CSS-Stile auf Elemente mit einer bestimmten Klasse anwenden, indem Sie in Ihrem CSS einen Klassenselektor verwenden:

.container {
  background-color: #f1f1f1;
  padding: 20px;
}

Sie können einem einzelnen Element auch mehrere Klassen zuweisen, indem Sie die Klassennamen durch Leerzeichen trennen:

<div class="container text-center">...</div>

id-Attribut

Das id-Attribut gibt einem HTML-Element innerhalb eines Dokuments eine eindeutige Kennung. Im Gegensatz zu Klassen sollte eine id einzigartig sein und nur einmal pro Seite verwendet werden.

Um einem Element eine id zuzuweisen, verwenden Sie das id-Attribut gefolgt von der eindeutigen Kennung im öffnenden Tag:

<h1 id="main-heading">Willkommen</h1>

Das id-Attribut wird oft verwendet, um mithilfe von Fragment-Identifikatoren in URLs auf bestimmte Elemente innerhalb einer Seite zu verlinken:

<a href="#main-heading">Zum Haupttitel</a>

Sie können das id-Attribut auch verwenden, um einzigartige Stile oder Verhaltensweisen auf ein Element mithilfe von CSS oder JavaScript anzuwenden.

style-Attribut

Das style-Attribut ermöglicht es Ihnen, Inline-CSS-Stile direkt auf ein HTML-Element anzuwenden. Obwohl es im Allgemeinen empfohlen wird, externe Stylesheets für die Gestaltung zu verwenden, kann das style-Attribut für schnelle oder spezifische Stiländerungen nützlich sein.

Um Inline-Stile zu verwenden, fügen Sie das style-Attribut zum öffnenden Tag eines Elements hinzu, gefolgt von den CSS-Eigenschaften und -Werten:

<p style="color: blue; font-size: 18px;">Dies ist ein gestylter Absatz.</p>

Es ist wichtig zu beachten, dass Inline-Stile, die mit dem style-Attribut angewendet werden, die höchste Priorität haben und Stile überschreiben, die in externen Stylesheets oder <style>-Tags definiert sind.

title-Attribut

Das title-Attribut bietet zusätzliche Informationen oder einen Tooltip, der erscheint, wenn man mit der Maus über ein Element fährt. Es kann den meisten HTML-Elementen hinzugefügt werden, um mehr Kontext zu geben oder den Zweck des Elements zu beschreiben.

Um einem Element einen Titel hinzuzufügen, verwenden Sie das title-Attribut gefolgt von dem Text, den Sie anzeigen möchten:

<a href="https://www.beispiel.de" title="Besuchen Sie die Beispiel-Website">Beispiel</a>

Wenn ein Benutzer mit der Maus über das Element mit einem title-Attribut fährt, wird der Text als Tooltip angezeigt.

Die Verwendung des title-Attributs kann auch die Barrierefreiheit verbessern, indem es Screenreadern und anderen Hilfstechnologien mehr Informationen über das Element liefert.