HTML Eigenschaft

Attribute sind zusätzliche Informationen, die von HTML-Elementen bereitgestellt werden.

Attribute erscheinen normalerweise im öffnenden Tag eines HTML-Tags und werden verwendet, um das Verhalten, den Stil, den Inhalt oder andere Eigenschaften des Elements zu definieren.

Attribute beginnen immer mitname="value"geschrieben innerhalb des Tags in der Formnameist der Name des Attributs,Wertist der Wert des Attributs.

HTML-Attribute

• HTML-Elementen kann eineEigenschaft gesetzt werden
• Attribute können zu Elementen hinzugefügt werdenZusätzliche Informationen
• Attribute werden im Allgemeinen imStart-Tag beschrieben
• Attribute erscheinen immer in Form von Name/Wert-Paaren.Zum Beispiel: name="value"。

Attributbeispiel

HTML-Links werden durch das <a>-Tag definiert. Die Adresse des Links steht imhref-AttributAngegeben in:

HTML-Attribute verwenden häufig Attributwerte in Anführungszeichen

Attributwerte sollten immer in Anführungszeichen eingeschlossen werden.

Doppelte Anführungszeichen sind am gebräuchlichsten, aber die Verwendung von einfachen Anführungszeichen ist ebenfalls akzeptabel.

mit doppelten Anführungszeichen:

<a href="../index.html">Link</a>

mit einfachen Anführungszeichen:

<a href='/index.html'>Link</a>

Tipp:In bestimmten Einzelfällen, z. B. wenn der Attributwert selbst doppelte Anführungszeichen enthält, müssen Sie einfache Anführungszeichen verwenden, zum Beispiel:

name='John "ShotGun" Nelson'

Oder:

<a href="../index.html'search'">Link</a>

HTML-Tipp: Attribute in Kleinbuchstaben verwenden

Bei Attributen und Attributwerten wird nicht zwischen Groß- und Kleinschreibung unterschieden.

Allerdings empfiehlt das W3C in seiner HTML-4-Empfehlung Kleinbuchstaben für Attribute/Attributwerte.

Neuere Versionen von (X)HTML erfordern jedoch Kleinbuchstaben für Attribute.

HTML-Attributreferenz

Sehen Sie die vollständige Liste der HTML-Attribute:HTML-Tag-Referenz。

Die folgende Liste enthält Attribute, die für die meisten HTML-Elemente gelten:

Globale Attribute

Globale Attribute sind Attribute, die von allen HTML-Elementen verwendet werden können.

id: Gibt einen eindeutigen Bezeichner für das Element an.

<div id="header">This is the header</div>

class: Gibt einen oder mehrere Klassennamen für ein Element an, die für die Auswahl per CSS oder JavaScript verwendet werden.

<p class="text highlight">This is a highlighted text.</p>

style: Wird verwendet, um CSS-Stile direkt auf das Element anzuwenden.

<p style="color: blue; font-size: 14px;">This is a styled paragraph.</p>

title: Bietet zusätzliche Hinweisinformationen für das Element, die normalerweise beim Überfahren mit der Maus angezeigt werden.

<abbr title="HyperText Markup Language">HTML</abbr>

data-*: Wird zum Speichern benutzerdefinierter Daten verwendet, auf die normalerweise über JavaScript zugegriffen wird.

<div data-user-id="12345">User Info</div>

Attribute bestimmter Elemente

Einige Attribute gelten nur für bestimmte HTML-Elemente.

href(verwendet für<a>und<link>Element): Gibt die Ziel-URL des Links an.

<a href="https://www.example.com">Visit Example</a>

src(verwendet für<img>, <script>, <iframe>etc. Elemente): Gibt die URL einer externen Ressource an.

<img src="image.jpg.html" alt="An example image">

alt (verwendet für<img>Element): Stellt alternativen Text für das Bild bereit, der angezeigt wird, wenn das Bild nicht angezeigt werden kann.

<img src="image.jpg.html" alt="An example image">

type(verwendet für<input>und<button>Element): Gibt den Typ des Eingabesteuerelements an.

<input type="text" placeholder="Enter your name">

value(verwendet für<input>, <button>, <option>etc. Elemente): Gibt den Anfangswert des Elements an.

<input type="text" value="Default Value">

disabled (für Formularelemente): Deaktiviert das Element und macht es nicht interaktiv.

<input type="text" disabled>

checked(verwendet für<input type="checkbox">und<input type="radio">): Gibt an, ob ein Kontrollkästchen oder Optionsfeld aktiviert ist.

<input type="checkbox" checked>

placeholder(verwendet für<input>und<textarea>Element): Zeigt Platzhaltertext im Eingabefeld an.

<input type="text" placeholder="Enter your email">

target(verwendet für<a>und<form>Element): Gibt das Zielfenster oder den Ziel-Frame für einen Link oder eine Formularübermittlung an.

<a href="https://www.example.com" target="_blank">Open in new tab</a>

Boolesches Attribut

Boolesche Attribute sind Attribute, die keinen Wert erfordern; ihr Vorhandensein bedeutet true, und ihr Fehlen bedeutet false.

disabled: deaktiviert das Element.

<input type="text" disabled>

readonly: Macht das Eingabefeld schreibgeschützt.

<input type="text" readonly>

required: Legt das Eingabefeld als erforderlich fest.

<input type="text" required>

autoplay(verwendet für<audio>und<video>Element): Spielt Medien automatisch ab.

<video src="video.mp4.html" autoplay></video>

Benutzerdefinierte Attribute

HTML5 führtedata-*Attribute ein, mit denen Entwickler benutzerdefinierte Attribute definieren können, um zusätzliche Daten zu speichern.

data-*: Wird zum Speichern benutzerdefinierter Daten verwendet, auf die normalerweise über JavaScript zugegriffen wird.

<div data-user-id="12345" data-role="admin">User Info</div>

Attribute zur Ereignisbehandlung

HTML-Elemente können über Event-Handler-Attribute auf bestimmte Ereignisse wie Klicks, Maus-Hover usw. reagieren.

onclick: Wird ausgelöst, wenn der Benutzer auf das Element klickt.

<button onclick="alert('Button clicked!')">Click Me</button>

onmouseover: Wird ausgelöst, wenn der Benutzer den Mauszeiger über das Element bewegt.

<div onmouseover="this.style.backgroundColor='yellow'">Hover over me</div>

onchange: Wird ausgelöst, wenn sich der Wert des Elements ändert.

<input type="text" onchange="alert('Value changed!')">

Weitere Erläuterungen zu Standardattributen:HTML-Referenz für Standardattribute.