HTML Attribute
HTML-Attribute liefern zusätzliche Informationen zu HTML-Elementen.
HTML Attribute
- Alle HTML-Elemente können Attribute haben
- Attribute stellen zusätzliche Informationen über Elemente bereit
- Attribute werden immer im Start-Tag angegeben
- Attribute kommen normalerweise in Name/Wert-Paaren vor, wie zum Beispiel: name="value"
Das href-Attribut
Das Tag <a> definiert einen Hyperlink. Das Attribut href gibt die URL der Seite an, zu der der Link führt:
Mehr über Links erfahren Sie in unserem Kapitel HTML-Links.
Das src-Attribut
Das Tag <img> wird verwendet, um ein Bild in eine HTML-Seite einzubetten. Das Attribut src gibt den Pfad zum anzuzeigenden Bild an:
Es gibt zwei Möglichkeiten, die URL im Attribut src anzugeben:
1. Absolute URL - Links zu einem externen Bild, das auf einer anderen Website gehostet wird. Beispiel: src="https://www.w3schools.com/images/img_girl.jpg".
Hinweise: Externe Bilder unterliegen möglicherweise dem Urheberrecht. Wenn Sie keine Erlaubnis zur Nutzung erhalten, verstoßen Sie möglicherweise gegen das Urheberrecht. Darüber hinaus können Sie externe Bilder nicht steuern; es kann plötzlich entfernt oder geändert werden.
2. Relative URL – Verlinkt zu einem Bild, das auf der Website gehostet wird. Hier enthält die URL nicht den Domainnamen. Wenn die URL ohne Schrägstrich beginnt, ist sie relativ zur aktuellen Seite. Beispiel: src="img_girl.jpg". Wenn die URL mit einem Schrägstrich beginnt, ist sie relativ zur Domain. Beispiel: src="/images/img_girl.jpg".
Tipp: Es ist fast immer am besten, relative URLs zu verwenden. Sie werden nicht beschädigt, wenn Sie die Domain wechseln.
Die Attribute width und height
Das <img>-Tag sollte auch das enthalten width und height Attribute, die die Breite und Höhe des Bildes (in Pixel) angeben:
Das alt-Attribut
Das erforderliche Attribut alt für das Tag <img> gibt einen alternativen Text für ein Bild an, wenn das Bild für Aus irgendeinem Grund kann die Anzeige nicht angezeigt werden. Dies kann an einer langsamen Verbindung oder einem Fehler im Attribut src liegen oder daran, dass der Benutzer einen Bildschirmleser verwendet.
Beispiel
Sehen Sie, was passiert, wenn wir versuchen, ein Bild anzuzeigen, das nicht existiert:
<img src="img_typo.jpg" alt="Mädchen mit Jacke">
Try it Yourself »
Mehr über Bilder erfahren Sie in unserem Kapitel HTML-Bilder.
Das style-Attribut
Das Attribut style wird verwendet, um Stile zu einem Element hinzuzufügen, z. B. Farbe, Schriftart, Größe und mehr.
Weitere Informationen zu Stilen finden Sie in unserem Kapitel HTML-Stile.
Das lang-Attribut
Sie sollten immer das Attribut lang in das Tag <html> einschließen, um die Sprache zu deklarieren der Webseite. Dies soll Suchmaschinen und Browsern helfen.
Im folgenden Beispiel wird Englisch als Sprache angegeben:
<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>
Ländercodes können dem Sprachcode auch im Attribut lang hinzugefügt werden. Die ersten beiden Zeichen definieren also die Sprache der HTML-Seite und die letzten beiden Zeichen definieren das Land.
Das folgende Beispiel gibt Englisch als Sprache und die Vereinigten Staaten als Land an:
<!DOCTYPE html>
<html lang="en-US">
<body>
...
</body>
</html>
Sie können alle Sprachcodes in unserer HTML-Sprachcode-Referenz sehen.
Das Titelattribut
Das Attribut title definiert einige zusätzliche Informationen zu einem Element.
Der Wert des Titelattributs wird als Tooltip angezeigt, wenn Sie mit der Maus über das Element fahren:
Wir empfehlen, Attribute immer in Kleinbuchstaben zu verwenden
Der HTML-Standard erfordert keine kleingeschriebenen Attributnamen.
Das Titelattribut (und alle anderen Attribute) können in Groß- oder Kleinbuchstaben geschrieben werden, z. B. title oder TITLE.
W3C empfiehlt jedoch Kleinbuchstaben-Attribute in HTML und verlangt Kleinbuchstaben-Attribute für strengere Dokumenttypen wie XHTML.
Bei W3Schools verwenden wir immer Attributnamen in Kleinbuchstaben.
Wir empfehlen: Attributwerte immer angeben
Der HTML-Standard erfordert keine Anführungszeichen um Attributwerte.
W3C empfiehlt jedoch Anführungszeichen in HTML und verlangt Anführungszeichen für strengere Dokumenttypen wie XHTML.
Gut:
<a href="https://www.w3schools.com/html/">Besuchen Sie unser HTML-Tutorial</a>Schlecht:
<a href=https://www.w3schools.com/html/>Besuchen Sie unser HTML-Tutorial</a>
Manchmal muss man Anführungszeichen verwenden. In diesem Beispiel wird das Titelattribut nicht korrekt angezeigt, da es ein Leerzeichen enthält:
Bei W3Schools verwenden wir immer Anführungszeichen um Attributwerte.
Einfache oder doppelte Anführungszeichen?
Doppelte Anführungszeichen um Attributwerte kommen in HTML am häufigsten vor, es können jedoch auch einfache Anführungszeichen verwendet werden.
In manchen Situationen, wenn der Attributwert selbst doppelte Anführungszeichen enthält, ist es notwendig, einfache Anführungszeichen zu verwenden:
<p title='John "ShotGun" Nelson'>
Oder umgekehrt:
<p title="John 'ShotGun' Nelson">
Try it Yourself »
Kapitelzusammenfassung
- Alle HTML-Elemente können Attribute haben
- Das Attribut
hrefvon<a>gibt die URL der Seite an, zu der der Link führt - Das Attribut
srcvon<img>gibt den Pfad zum anzuzeigenden Bild an - Die Attribute
widthundheightvon<img>Größeninformationen für Bilder bereitstellen - Das Attribut
altvon<img>stellt einen alternativen Text für ein Bild bereit - Das Attribut
stylewird verwendet, um Stile zu einem Element hinzuzufügen, z. B. Farbe, Schriftart, Größe und mehr - Das Attribut
langdes Tags<html>deklariert die Sprache der Webseite - Das Attribut
titledefiniert einige zusätzliche Informationen zu einem Element
HTML Übungen
HTML Attributreferenz
Eine vollständige Liste aller Attribute für jedes HTML-Element finden Sie in unserer: HTML-Attributreferenz.
