BESTE WEBSITE FÜR WEBENTWICKLER
HTML CSS JAVASCRIPT SQL PYTHON PHP JAVA KOTLIN GO C C++ C# Django WIE MAN W3.CSS AI Mehr 🔍 ◑ Bücher VERWEISE ÜBUNGEN
HTML5-Lektionen für Anfänger

Ua En Es Fr

HTML Links

❮ Prev Next ❯

Links finden sich auf fast allen Webseiten. Über Links können sich Benutzer von Seite zu Seite durchklicken.

HTML Links – Hyperlinks

HTML-Links sind Hyperlinks.

Sie können auf einen Link klicken und zu einem anderen Dokument springen.

Wenn Sie die Maus über einen Link bewegen, verwandelt sich der Mauspfeil in eine kleine Hand.

Hinweis: Ein Link muss nicht per SMS gesendet werden. Ein Link kann ein Bild oder ein anderes HTML-Element sein!

HTML Links - Syntax

Das HTML-Tag <a> definiert einen Hyperlink. Es hat die folgende Syntax:

<a href="url">link text</a>

Das wichtigste Attribut des Elements <a> ist das Attribut href, das das Ziel des Links angibt.

Der Linktext ist der Teil, der für den Leser sichtbar ist.

Durch Klicken auf den Linktext wird der Leser an die angegebene URL-Adresse weitergeleitet.

Beispiel

Dieses Beispiel zeigt, wie man einen Link zu erstellt W3Schools.com:

<a href="https://www.w3schools.com/">Visit W3Schools.com!</a>
Try it Yourself »

Standardmäßig werden Links in allen Browsern wie folgt angezeigt:

  • Ein nicht besuchter Link ist unterstrichen und blau
  • Ein besuchter Link ist unterstrichen und lila
  • Ein aktiver Link ist unterstrichen und rot

Tipp: Links können natürlich mit CSS gestaltet werden, um ein anderes Aussehen zu erhalten!

HTML Links – Das Zielattribut

Standardmäßig wird die verlinkte Seite im aktuellen Browserfenster angezeigt. Um dies zu ändern, müssen Sie ein anderes Ziel für den Link angeben.

Das Attribut target gibt an, wo das verknüpfte Dokument geöffnet werden soll.

Das Attribut target kann einen der folgenden Werte haben:

  • _self – Standard. Öffnet das Dokument im selben Fenster/Tab, in dem darauf geklickt wurde
  • _blank – Öffnet das Dokument in einem neuen Fenster oder Tab
  • _parent – Öffnet das Dokument im übergeordneten Frame
  • _top – Öffnet das Dokument im gesamten Fensterbereich

Beispiel

Verwenden Sie target="_blank" um das verknüpfte Dokument in einem neuen Browserfenster oder Tab zu öffnen:

<a href="https://www.w3schools.com/" target="_blank">Visit W3Schools!</a>
Try it Yourself »

Absolute URLs vs. relative URLs

Beide Beispiele oben verwenden eine absolute URL (eine vollständige Webadresse) im href-Attribut.

Ein lokaler Link (ein Link zu einer Seite innerhalb derselben Website) wird mit einer relativen URL (ohne den "https://www"-Teil) angegeben:

Beispiel

<h2>Absolute URLs</h2>
<p><a href="https://www.w3.org/">W3C</a></p>
<p><a href="https://www.google.com/">Google</a></p>

<h2>Relative URLs</h2>
<p><a href="html_images.asp">HTML Images</a></p>
<p><a href="/css/default.asp">CSS Tutorial</a></p>
Try it Yourself »

HTML Links – Verwenden Sie ein Bild als Link

Um ein Bild als Link zu verwenden, fügen Sie einfach das Tag <img> in das Tag <a> ein:

Beispiel

<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;">
</a>
Try it Yourself »

Link zu einer E-Mail-Adresse

Verwenden Sie mailto: innerhalb des Attributs href um einen Link zu erstellen, der das E-Mail-Programm des Benutzers öffnet (um ihn senden zu lassen eine neue E-Mail):

Beispiel

<a href="mailto:someone@example.com">Send email</a>
Try it Yourself »

Button als Link

Um eine HTML-Schaltfläche als Link zu verwenden, müssen Sie JavaScript-Code hinzufügen.

Mit JavaScript können Sie angeben, was bei bestimmten Ereignissen passiert, beispielsweise beim Klicken auf eine Schaltfläche:

Beispiel

<button onclick="document.location='default.asp'">HTML Tutorial</button>
Try it Yourself »

Tipp: Erfahren Sie mehr über JavaScript in unserem JavaScript Tutorial.

Linktitel

Das Attribut title gibt zusätzliche Informationen zu einem Element an. Die Informationen werden meist als Tooltip-Text angezeigt, wenn die Maus über das Element bewegt wird.

Beispiel

<a href="https://www.w3schools.com/html/" title="Go to W3Schools HTML section">Visit our HTML Tutorial</a>
Try it Yourself »

Mehr zu absoluten URLs und relativen URLs

Beispiel

Verwenden Sie eine vollständige URL, um auf eine Webseite zu verlinken:

<a href="https://www.w3schools.com/html/default.asp">HTML tutorial</a>
Try it Yourself »

Beispiel

Link zu einer Seite im HTML-Ordner der aktuellen Website:

<a href="/html/default.asp">HTML tutorial</a>
Try it Yourself »

Beispiel

Link zu einer Seite, die sich im selben Ordner wie die aktuelle Seite befindet:

<a href="default.asp">HTML tutorial</a>
Try it Yourself »

Weitere Informationen zu Dateipfaden finden Sie im Kapitel HTML Dateipfade.

Kapitelzusammenfassung

  • Verwenden Sie das Element <a> um einen Link zu definieren
  • Verwenden Sie das Attribut href um die Linkadresse zu definieren
  • Verwenden Sie das Attribut target um zu definieren, wo das verknüpfte Dokument geöffnet werden soll
  • Verwenden Sie das Element <img> (innerhalb von <a>) um ein Bild als Link zu verwenden
  • Verwenden Sie das Schema mailto: innerhalb des Attributs href um einen Link zu erstellen, der das E-Mail-Programm des Benutzers öffnet

HTML Link-Tags

Tag Beschreibung
<a>Definiert einen Hyperlink

Eine vollständige Liste aller verfügbaren HTML-Tags finden Sie auf unserer HTML-Tag-Referenz.

❮ Prev Next ❯

✍ Kommentare