HTML -Links
Links sind auf fast allen Webseiten zu finden. Links ermöglichen es Benutzern, sich von Seite zu Seite zu klicken.
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 kein Text sein. Ein Link kann ein Bild oder ein beliebiges anderes HTML-Element sein!
HTML-Links - Syntax
Das HTML <a>-Tag definiert einen Hyperlink. Es hat die folgende Syntax:
<a href="url">link text</a>
Das wichtigste Attribut des <a> Elements ist das
hrefAttribut, 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 Sie einen Link zu W3Schools.com erstellen:
<a href="https://www.w3schools.com/">Visit W3Schools.com!</a>
Standardmäßig werden Links in allen Browsern wie folgt angezeigt:
- Ein nicht besuchter Link ist unterstrichen und blau
- Ein besuchter Link ist unterstrichen und violett
- Ein aktiver Link ist unterstrichen und rot
Tipp: Links können natürlich mit CSS gestylt werden, um einen anderen Look zu bekommen!
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 targetAttribut gibt an, wo das verknüpfte Dokument geöffnet werden soll.
Das targetAttribut kann einen der folgenden Werte haben:
_self- Standard. Öffnet das Dokument in demselben Fenster/Tab, in dem es angeklickt 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>
Absolute URLs vs. relative URLs
Beide obigen Beispiele verwenden eine absolute URL (eine vollständige Webadresse) im hrefAttribut.
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>
HTML-Links - Verwenden Sie ein Bild als Link
Um ein Bild als Link zu verwenden, fügen Sie einfach das <img>
Tag in das <a>Tag ein:
Beispiel
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;">
</a>
Link zu einer E-Mail-Adresse
Verwenden Sie
mailto:innerhalb des
hrefAttributs, um einen Link zu erstellen, der das E-Mail-Programm des Benutzers öffnet (um ihn eine neue E-Mail senden zu lassen):
Beispiel
<a href="mailto:[email protected]">Send email</a>
Schaltfläche als Link
Um eine HTML-Schaltfläche als Link zu verwenden, müssen Sie etwas JavaScript-Code hinzufügen.
Mit JavaScript können Sie angeben, was bei bestimmten Ereignissen passiert, z. B. beim Klicken auf eine Schaltfläche:
Beispiel
<button
onclick="document.location='default.asp'">HTML Tutorial</button>
Tipp: Erfahren Sie mehr über JavaScript in unserem JavaScript-Tutorial .
Titel verlinken
Das titleAttribut gibt zusätzliche Informationen zu einem Element an. Die Informationen werden meistens 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>
Mehr zu Absolute URLs und Relative 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>
Beispiel
Link zu einer Seite im HTML-Ordner der aktuellen Website:
<a href="/html/default.asp">HTML tutorial</a>
Beispiel
Link zu einer Seite, die sich im selben Ordner wie die aktuelle Seite befindet:
<a href="default.asp">HTML tutorial</a>
Mehr über Dateipfade erfahren Sie im Kapitel HTML -Dateipfade .
Kapitelzusammenfassung
- Verwenden Sie das
<a>Element, um einen Link zu definieren - Verwenden Sie das
hrefAttribut, um die Linkadresse zu definieren - Verwenden Sie das
targetAttribut, um festzulegen, wo das verknüpfte Dokument geöffnet werden soll - Verwenden Sie das
<img>Element (innerhalb<a>), um ein Bild als Link zu verwenden - Verwenden Sie das
mailto:Schema innerhalb deshrefAttributs, um einen Link zu erstellen, der das E-Mail-Programm des Benutzers öffnet
HTML-Link-Tags
| Tag | Description |
|---|---|
| <a> | Defines a hyperlink |
Eine vollständige Liste aller verfügbaren HTML-Tags finden Sie in unserer HTML-Tag-Referenz .