HTML <a> Tag
Beispiel
Erstellen Sie einen Link zu W3Schools.com:
<a href="https://www.w3schools.com">Visit W3Schools.com!</a>
Try it Yourself »
Weitere "Try it Yourself" („Probieren Sie es selbst“)-Beispiele weiter unten.
Definition und Verwendung
Das Tag <a> definiert einen Hyperlink, der zum Verlinken von einer Seite auf eine andere verwendet wird.
Das wichtigste Attribut des Elements <a> ist das Attribut href, das den Link angibt Ziel.
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
Tipps und Hinweise
Tipp: Wenn das <a>-Tag kein href-Attribut hat, ist es nur ein Platzhalter für einen Hyperlink.
Tipp: Eine verlinkte Seite wird normalerweise im aktuellen Browserfenster angezeigt, sofern Sie kein anderes Ziel angeben.
Tipp: Verwenden Sie CSS, um Links zu formatieren: CSS-Links und CSS-Schaltflächen.
Browser-Unterstützung
| Element | |||||
|---|---|---|---|---|---|
| <a> | Yes | Yes | Yes | Yes | Yes |
Attribute
| Attribut | Wert | Beschreibung |
|---|---|---|
| download | filename | Geben Sie an, dass das Ziel heruntergeladen wird, wenn ein Benutzer auf den Hyperlink klickt |
| href | URL | Geben Sie die URL der Seite an, zu der der Link führt |
| hreflang | language_code | Geben Sie die Sprache des verknüpften Dokuments an |
| media | media_query | Geben Sie an, für welches Medium/Gerät das verknüpfte Dokument optimiert ist |
| ping | list_of_URLs | Geben Sie eine durch Leerzeichen getrennte Liste von URLs an, an die beim Klicken auf den Link vom Browser (im Hintergrund) Post-Anfragen mit dem Body-Ping gesendet werden. Wird normalerweise zur Nachverfolgung verwendet |
| referrerpolicy | no-referrer no-referrer-when-downgrade origin origin-when-cross-origin same-origin strict-origin-when-cross-origin unsafe-url |
Geben Sie an, welche Referrer-Informationen mit dem Link gesendet werden sollen |
| rel | alternate author bookmark external help license next nofollow noreferrer noopener prev search tag |
Gibt die Beziehung zwischen dem aktuellen Dokument und dem verknüpften Dokument an |
| target | _blank _parent _self _top |
Geben Sie an, wo das verknüpfte Dokument geöffnet werden soll |
| type | media_type | Geben Sie den Medientyp des verknüpften Dokuments an |
Globale Attribute
Das Tag unterstützt auch die Globale Attribute in HTML.
Ereignisattribute
Das Tag <a> unterstützt auch die Ereignisattribute in HTML.
Weitere Beispiele
Beispiel
So verwenden Sie ein Bild als Link:
<a href="https://www.w3schools.com">
<img border="0" alt="W3Schools" src="logo_w3s.gif" width="100" height="100">
</a>
Try it Yourself »
Beispiel
So öffnen Sie einen Link in einem neuen Browserfenster:
<a href="https://www.w3schools.com" target="_blank">Visit W3Schools.com!</a>
Try it Yourself »
Beispiel
So verknüpfen Sie eine E-Mail-Adresse:
<a href="mailto:someone@example.com">Send email</a>
Try it Yourself »
Beispiel
So verknüpfen Sie eine Telefonnummer:
<a href="tel:+4733378901">+47 333 78 901</a>
Try it Yourself »
Beispiel
So verlinken Sie auf einen anderen Abschnitt auf derselben Seite:
<a href="#section2">Go to Section 2</a>
Try it Yourself »
Beispiel
So verlinken Sie auf ein JavaScript:
<a href="javascript:alert('Hello World!');">Execute JavaScript</a>
Try it Yourself »
Verwandte Seiten
HTML-Tutorial: HTML-Links
HTML-DOM-Referenz: Ankerobjekt
CSS-Tutorial: Styling-Links
Standard-CSS-Einstellungen
Die meisten Browser zeigen das Element <a> mit den folgenden Standardwerten an:
a:link, a:visited {
color: (internal value);
text-decoration: underline;
cursor: auto;
}
a:link:active, a:visited:active {
color: (internal value);
}
