HTML -Attribute
HTML-Attribute liefern zusätzliche Informationen zu HTML-Elementen.
HTML-Attribute
- Alle HTML-Elemente können Attribute haben
- Attribute liefern zusätzliche Informationen über Elemente
- Attribute werden immer im Start-Tag angegeben
- Attribute kommen normalerweise in Name/Wert-Paaren wie: name="value"
Das href-Attribut
Das <a>
Tag definiert einen Hyperlink. Das
href
Attribut gibt die URL der Seite an, auf die der Link führt:
Beispiel
<a href="https://www.w3schools.com">Visit W3Schools</a>
Mehr über Links erfahren Sie in unserem Kapitel HTML-Links .
Das src-Attribut
Das <img>
Tag wird verwendet, um ein Bild in eine HTML-Seite einzubetten. Das src
Attribut gibt den Pfad zum anzuzeigenden Bild an:
Beispiel
<img src="img_girl.jpg">
src
Es gibt zwei Möglichkeiten, die URL im Attribut 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 können urheberrechtlich geschützt sein. Wenn Sie keine Genehmigung zur Verwendung erhalten, verstoßen Sie möglicherweise gegen Urheberrechtsgesetze. Außerdem können Sie keine externen Bilder steuern; es kann plötzlich entfernt oder geändert werden.
2. Relative URL – Links zu einem Bild, das auf der Website gehostet wird. Hier enthält die URL nicht den Domänennamen. 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 Domäne wechseln.
Die Breiten- und Höhenattribute
Das <img>
Tag sollte auch die
Attribute width
und enthalten
height
, die die Breite und Höhe des Bildes (in Pixel) angeben:
Beispiel
<img src="img_girl.jpg" width="500" height="600">
Das alt-Attribut
Das erforderliche alt
Attribut für das <img>
Tag gibt einen alternativen Text für ein Bild an, falls das Bild aus irgendeinem Grund nicht angezeigt werden kann. Dies kann an einer langsamen Verbindung oder einem Fehler im src
Attribut liegen oder wenn der Benutzer einen Screenreader verwendet.
Beispiel
<img src="img_girl.jpg" alt="Girl
with a jacket">
Beispiel
Sehen Sie, was passiert, wenn wir versuchen, ein Bild anzuzeigen, das nicht existiert:
<img src="img_typo.jpg" alt="Girl
with a jacket">
Mehr über Bilder erfahren Sie in unserem Kapitel HTML-Bilder .
Das style-Attribut
Das style
Attribut wird verwendet, um einem Element Stile hinzuzufügen, z. B. Farbe, Schriftart, Größe und mehr.
Beispiel
<p style="color:red;">This is a red paragraph.</p>
Mehr über Stile erfahren Sie in unserem Kapitel HTML-Stile .
Das lang-Attribut
Sie sollten das lang
Attribut immer in das <html>
Tag einfügen, um die Sprache der Webseite anzugeben. Dies soll Suchmaschinen und Browsern helfen.
Das folgende Beispiel gibt Englisch als Sprache an:
<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>
Der Sprachcode im lang
Attribut kann auch um Ländercodes ergänzt werden. Die ersten beiden Zeichen definieren also die Sprache der HTML-Seite und die letzten beiden Zeichen das Land.
Das folgende Beispiel gibt Englisch als Sprache und USA 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 title
Attribut definiert einige zusätzliche Informationen über ein Element.
Der Wert des Titelattributs wird als Tooltip angezeigt, wenn Sie mit der Maus über das Element fahren:
Beispiel
<p title="I'm a tooltip">This is a paragraph.</p>
Wir empfehlen: Verwenden Sie immer Kleinbuchstaben
Der HTML-Standard erfordert keine Kleinbuchstaben für Attributnamen.
Das title-Attribut (und alle anderen Attribute) kann wie title oder TITLE groß- oder kleingeschrieben werden .
W3C empfiehlt jedoch Attribute in Kleinbuchstaben in HTML und verlangt Attribute in Kleinbuchstaben für strengere Dokumenttypen wie XHTML.
Bei W3Schools verwenden wir Attributnamen immer in Kleinbuchstaben.
Wir empfehlen: Geben Sie immer Attributwerte an
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/">Visit our HTML tutorial</a>
Schlecht:
<a href=https://www.w3schools.com/html/>Visit our HTML tutorial</a>
Manchmal muss man Anführungszeichen verwenden. In diesem Beispiel wird das Titelattribut nicht korrekt angezeigt, da es ein Leerzeichen enthält:
Beispiel
<p
title=About W3Schools>
Bei W3Schools verwenden wir immer Anführungszeichen um Attributwerte.
Einfache oder doppelte Anführungszeichen?
Doppelte Anführungszeichen um Attributwerte sind die häufigsten in HTML, aber einfache Anführungszeichen können auch verwendet werden.
In einigen Situationen, wenn der Attributwert selbst doppelte Anführungszeichen enthält, müssen einfache Anführungszeichen verwendet werden:
<p title='John "ShotGun" Nelson'>
Oder umgekehrt:
<p title="John 'ShotGun' Nelson">
Kapitelzusammenfassung
- Alle HTML-Elemente können Attribute haben
- Das
href
Attribut von<a>
gibt die URL der Seite an, auf die der Link führt - Das
src
Attribut von<img>
gibt den Pfad zum anzuzeigenden Bild an - Die Attribute
width
und von liefern Größeninformationen für Bilderheight
<img>
- Das
alt
Attribut von<img>
stellt einen alternativen Text für ein Bild bereit - Das
style
Attribut wird verwendet, um einem Element Stile hinzuzufügen, z. B. Farbe, Schriftart, Größe und mehr - Das
lang
Attribut des<html>
Tags deklariert die Sprache der Webseite - Das
title
Attribut definiert einige zusätzliche Informationen über ein Element
HTML-Übungen
HTML-Attributreferenz
Eine vollständige Liste aller Attribute für jedes HTML-Element finden Sie in unserer: HTML Attribute Reference .