HTML -Tutorial

HTML-HOME HTML-Einführung HTML-Editoren HTML-Basis HTML-Elemente HTML-Attribute HTML-Überschriften HTML-Absätze HTML-Stile HTML-Formatierung HTML-Zitate HTML-Kommentare HTML-Farben HTML-CSS HTML-Links HTML-Bilder HTML-Favicon HTML-Tabellen HTML-Listen HTML-Block und Inline HTML-Klassen HTML-ID HTML-Iframes HTML-JavaScript HTML-Dateipfade HTML-Kopf HTML-Layout HTML-responsiv HTML Computercode HTML-Semantik HTML-Styleguide HTML-Entitäten HTML-Symbole HTML-Emojis HTML-Zeichensatz HTML-URL-Codierung HTML vs. XHTML

HTML -Formulare

HTML-Formulare HTML-Formularattribute HTML-Formularelemente HTML-Eingabetypen HTML-Eingabeattribute HTML-Eingabeformularattribute

HTML -Grafiken

HTML-Leinwand HTML-SVG

HTML- Medien

HTML-Medien HTML-Video HTML-Audio HTML-Plugins HTML-YouTube

HTML -APIs

HTML-Geolokalisierung HTML-Drag/Drop HTML-Webspeicher HTML-Webworker HTML-SSE

HTML- Beispiele

HTML-Beispiele HTML-Quiz HTML-Übungen HTML-Zertifikat HTML-Zusammenfassung HTML-Barrierefreiheit

HTML -Referenzen

HTML-Tag-Liste HTML-Attribute Globale HTML-Attribute HTML-Browser-Unterstützung HTML-Ereignisse HTML-Farben HTML-Leinwand HTML-Audio/Video HTML-Doctypes HTML-Zeichensätze HTML-URL-Codierung HTML-Sprachcodes HTTP-Nachrichten HTTP-Methoden PX-zu-EM-Konverter Tastatürkürzel

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 hrefAttribut 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 srcAttribut 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 widthund 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 altAttribut 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 srcAttribut 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 styleAttribut 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 langAttribut 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 titleAttribut 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 hrefAttribut von <a>gibt die URL der Seite an, auf die der Link führt
  • Das srcAttribut von <img>gibt den Pfad zum anzuzeigenden Bild an
  • Die Attribute widthund von liefern Größeninformationen für Bilderheight<img>
  • Das altAttribut von <img>stellt einen alternativen Text für ein Bild bereit
  • Das styleAttribut wird verwendet, um einem Element Stile hinzuzufügen, z. B. Farbe, Schriftart, Größe und mehr
  • Das langAttribut des <html>Tags deklariert die Sprache der Webseite
  • Das titleAttribut definiert einige zusätzliche Informationen über ein Element

HTML-Übungen

Testen Sie sich mit Übungen

Übung:

Fügen Sie dem folgenden Absatz einen „Tooltip“ mit dem Text „Über W3Schools“ hinzu.

<S="Über W3Schools">W3Schools ist eine Website für Webentwickler.</p>


HTML-Attributreferenz

Eine vollständige Liste aller Attribute für jedes HTML-Element finden Sie in unserer: HTML Attribute Reference .