HTML Element - `a`

Das HTML-Element <a> wird verwendet, um Verweise (Links) innerhalb einer Webseite oder zu anderen Webseiten zu erstellen. Es gehört zu den zentralen Elementen des Webs und wird häufig mit zusätzlichen Attributen kombiniert.

Beispiel

<a href="https://mach-es.org">mach-es.org</a>

Definition und Verwendung

Das a-Tag definiert einen Hyperlink, der von einer Seite auf eine andere verweist. Das wichtigste Attribut des a-Elements ist das href-Attribut, das das Ziel des Links angibt.

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

Ein unbesuchter Link ist unterstrichen und blau.
Ein besuchter Link ist unterstrichen und violett.
Ein aktiver Link ist unterstrichen und rot.

Attribute

Attribute erweitern Elemente um zusätzliche Eigenschaften oder Informationen und beeinflussen deren Bedeutung, Verhalten oder Darstellung. Sie bestehen in der Regel aus einem Attributnamen und einem zugehörigen Wert, wobei die zulässigen Attribute vom jeweiligen Element abhängen und teils allgemein, teils elementbezogen definiert sind.

Eine besondere Gruppe bilden die aria-*-Attribute, die zur Unterstützung der Barrierefreiheit zusätzliche Informationen für assistive Technologien bereitstellen.

Attribute-Tabelle
Attribut	Wert	Beschreibung
download	Dateiname	Gibt an, dass das Ziel heruntergeladen wird, wenn ein Benutzer auf den Hyperlink klickt.
href	URL	Gibt die URL der Seite an, zu der der Link führt.
hreflang	Sprachcode	Gibt die Sprache des verknüpften Dokuments an.
media	Medienabfrage	Gibt an, für welches Medium/Gerät das verlinkte Dokument optimiert ist.
ping	Liste der URLs	Gibt eine durch Leerzeichen getrennte Liste von URLs an, an die beim Aufruf des Links der Browser (im Hintergrund) POST-Anfragen mit dem Body „ping“ sendet. Wird typischerweise für Tracking-Zwecke verwendet.
referrerpolicy	no-referrer no-referrer-when-downgrade origin origin-when-cross-origin same-origin strict-origin-when-cross-origin unsafe-url	Gibt an, welche Referrer-Informationen mit dem Link gesendet werden sollen.
rel	alternate author bookmark external help license next nofollow noreferrer noopener prev search tag	Legt die Beziehung zwischen dem aktuellen Dokument und dem verknüpften Dokument fest.
target	_blank _parent _self _top	Gibt an, wo das verknüpfte Dokument geöffnet werden soll.
type	Medientyp	Gibt den Medientyp des verknüpften Dokuments an.

Beispiele mit Attributen

Attribut download

Gibt an, dass das Ziel heruntergeladen wird, wenn ein Benutzer auf den Hyperlink klickt.

<a href="https://mach-es.org/img/mach-es-logo.jpg" download>Ziel ist eine Beispielseite</a>

Attribut hreflang

Gibt die Sprache des verknüpften Dokuments an.

<a href="https://example.com" hreflang="en">Ziel ist eine Beispielseite</a>

Attribut target

Gibt an, wo das verknüpfte Dokument geöffnet werden soll.

_blank: öffnet in einem neuen Browsertab / Fenster

<a href="https://example.com" target="_blank">Ziel ist eine Beispielseite</a>

Beispiel Global Attribute

Das <a>-Tag unterstützt Globale-Attribute.

Global Attribut title

Definiert einen Zusatztext (Tooltip) für ein Element. Sichtbar wenn man die Maus darüber hält.

<a href="https://example.com" title="Externe Webseite">Ziel ist eine Beispielseite</a>

Beispiel Event Attribut

Das <a>-Tag unterstützt Event-Attribute.

Event Attribut onclick

Führt JavaScript-Code aus, wenn ein Maus- oder Zeigerereignis direkt auf dem Element auftritt.

<a href="javascript:void(0)" onclick="alert('Hallo Welt!')">Bitte, klick mich</a>

Standardbrowser CSS

Webbrowser wenden auf viele Elemente vordefinierte CSS-Stile an, die eine grundlegende Struktur und Lesbarkeit sicherstellen. Umfang und Ausgestaltung dieser Standardstile können je nach Browser variieren, etwa in Bezug auf Abstände, Schriftgrößen oder die Darstellung einzelner Elemente.

a:link, a:visited {
  color: (internal value);
  text-decoration: underline;
  cursor: auto;
}

a:link:active, a:visited:active {
  color: (internal value);
}

Browserunterstützung

Die Unterstützung von Elementen und Attributen ist in den gängigen modernen Browsern weitgehend einheitlich gewährleistet. Unterschiede können dennoch in Details, im Einführungszeitpunkt neuer Funktionen oder bei experimentellen Features auftreten.

Diese Tabelle zeigt die Unterstützung des `<a>`-Tag durch gängige Webbrowser und ordnet dessen Verfügbarkeit im aktuellen Browserumfeld ein.
Element	Firefox	Internet Explorer / Edge	Safari	Chrome	Opera
`<a>`