<a>: Das Anchor-Element

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

Das <a>-HTML-Element (oder Anchor-Element), mit seinem href-Attribut, erstellt einen Hyperlink zu Webseiten, Dateien, E-Mail-Adressen, Positionen in derselben Seite oder allem anderen, was eine URL adressieren kann.

Der Inhalt innerhalb jedes <a> sollte das Ziel des Links angeben. Wenn das href-Attribut vorhanden ist, wird das Drücken der Eingabetaste, während das <a>-Element fokussiert ist, es aktivieren.

Probieren Sie es aus

Attribute

Attribute dieses Elements umfassen die globalen Attribute.

attributionsrc Experimentell

Bestimmt, dass der Browser einen Attribution-Reporting-Eligible-Header senden soll. Auf der Serverseite wird dies verwendet, um das Senden eines Attribution-Reporting-Register-Source-Headers in der Antwort auszulösen, um eine navigationsbasierte Attributionsquelle zu registrieren.

Der Browser speichert die Quellendaten, die mit der navigationsbasierten Attributionsquelle verbunden sind (wie im Attribution-Reporting-Register-Source-Antwort-Header bereitgestellt), wenn der Benutzer auf den Link klickt. Weitere Details finden Sie in der Attribution Reporting API.

Es gibt zwei Versionen dieses Attributs, die Sie festlegen können:

  • Boolesch, d. h. nur der Name attributionsrc. Dies gibt an, dass Sie den Attribution-Reporting-Eligible-Header an denselben Server senden möchten, auf den das href-Attribut verweist. Dies ist in Ordnung, wenn Sie die Registrierung der Attributionsquelle auf demselben Server behandeln.

  • Wert, der eine oder mehrere URLs enthält, zum Beispiel:

    html
    attributionsrc="https://a.example/register-source
    https://b.example/register-source"
    

    Dies ist nützlich in Fällen, in denen die angeforderte Ressource sich nicht auf einem von Ihnen kontrollierten Server befindet oder Sie einfach die Registrierung der Attributionsquelle auf einem anderen Server verwalten möchten. In diesem Fall können Sie eine oder mehrere URLs als Wert von attributionsrc angeben. Wenn die Ressourcenanforderung auftritt, wird der Attribution-Reporting-Eligible-Header an die im attributionsrc angegebenen URL(s) zusätzlich zur Ursprungsressource gesendet. Diese URLs können dann mit dem Attribution-Reporting-Register-Source antworten, um die Registrierung abzuschließen.

    Hinweis: Das Angeben mehrerer URLs bedeutet, dass mehrere Attributionsquellen bei derselben Funktion registriert werden können. Sie könnten beispielsweise verschiedene Kampagnen haben, deren Erfolg Sie messen möchten, die das Generieren unterschiedlicher Berichte über unterschiedliche Daten beinhalten.

<a>-Elemente können nicht als Attributionstrigger, nur als Quellen verwendet werden.

download

Veranlasst den Browser, die verlinkte URL als Download zu behandeln. Kann mit oder ohne einen filename-Wert verwendet werden:

  • Ohne Wert wird der Browser einen Dateinamen/-erweiterung vorschlagen, der aus verschiedenen Quellen generiert wird:

  • filename: das Definieren eines Werts schlägt ihn als Dateinamen vor. / und \ Zeichen werden in Unterstriche (_) umgewandelt. Dateisysteme können andere Zeichen in Dateinamen verbieten, daher passen Browser den vorgeschlagenen Namen bei Bedarf an.

Hinweis:

  • download funktioniert nur für gleiche-Ursprung-URLs oder die blob:- und data:-Schemata.

  • Wie Browser Downloads behandeln, variiert je nach Browser, Benutzereinstellungen und anderen Faktoren. Der Benutzer kann aufgefordert werden, bevor ein Download startet, oder die Datei wird automatisch gespeichert, oder sie kann automatisch geöffnet werden, entweder in einer externen Anwendung oder im Browser selbst.

  • Wenn der Content-Disposition-Header andere Informationen als das download-Attribut enthält, kann sich das resultierende Verhalten unterscheiden:

    • Wenn der Header einen filename angibt, hat dieser Vorrang vor einem im download-Attribut spezifizierten Dateinamen.
    • Wenn der Header eine Disposition von inline angibt, priorisieren Chrome und Firefox das Attribut und behandeln es als Download. Alte Firefox-Versionen (vor 82) priorisieren den Header und zeigen den Inhalt inline an.
href

Die URL, auf die der Hyperlink verweist. Links sind nicht auf HTTP-basierte URLs beschränkt — sie können jedes URL-Schema verwenden, das von Browsern unterstützt wird:

  • Telefonnummern mit tel: URLs
  • E-Mail-Adressen mit mailto: URLs
  • SMS-Textnachrichten mit sms: URLs
  • Ausführbarer Code mit javascript: URLs
  • Während Webbrowser möglicherweise andere URL-Schemata nicht unterstützen, können Websites dies mit registerProtocolHandler()

Darüber hinaus können andere URL-Funktionen spezifische Teile der Ressource lokalisieren, einschließlich:

  • Abschnitten einer Seite mit Dokumentfragmenten
  • Spezifischen Textabschnitten mit Textfragmenten
  • Teilen von Mediendateien mit Medienfragmenten
hreflang

Hinweis auf die Sprache des verlinkten URL. Keine eingebauten Funktionen. Erlaubte Werte sind die gleichen wie das globale lang Attribut.

ping

Eine durch Leerzeichen getrennte Liste von URLs. Wenn der Link gefolgt wird, sendet der Browser POST-Anfragen mit dem Body PING an die URLs. Typischerweise für Tracking.

referrerpolicy

Wie viel des Referrers beim Folgen des Links gesendet werden soll.

  • no-referrer: Der Referer-Header wird nicht gesendet.
  • no-referrer-when-downgrade: Der Referer-Header wird nicht an Ursprünge ohne TLS (HTTPS) gesendet.
  • origin: Der gesendete Referrer wird auf den Ursprung der verweisenden Seite beschränkt: sein Schema, Host und Port.
  • origin-when-cross-origin: Der an andere Ursprünge gesendete Referrer wird auf das Schema, den Host und den Port beschränkt. Navigationen im selben Ursprung enthalten weiterhin den Pfad.
  • same-origin: Ein Referrer wird für den gleichen Ursprung gesendet, aber Anfragen über verschiedene Ursprünge enthalten keine Referrer-Informationen.
  • strict-origin: Sendet nur den Ursprung des Dokuments als Referrer, wenn das Sicherheitsniveau des Protokolls gleich bleibt (HTTPS→HTTPS), aber sendet ihn nicht an eine weniger sichere Zieladresse (HTTPS→HTTP).
  • strict-origin-when-cross-origin (Standard): Sendet eine vollständige URL bei der Durchführung einer Anfrage im gleichen Ursprung, sendet nur den Ursprung, wenn das Sicherheitsniveau des Protokolls gleich bleibt (HTTPS→HTTPS), und sendet keinen Header an eine weniger sichere Zieladresse (HTTPS→HTTP).
  • unsafe-url: Der Referrer wird den Ursprung und den Pfad enthalten (aber nicht das Fragment, das Passwort oder den Benutzernamen). Dieser Wert ist unsicher, da er Ursprünge und Pfade von TLS-geschützten Ressourcen an unsichere Ursprünge weitergibt.
rel

Die Beziehung der verlinkten URL als durch Leerzeichen getrennte Link-Typen.

target

Wo die verlinkte URL angezeigt werden soll, als der Name eines Navigationskontextes (ein Tab, Fenster oder <iframe>). Die folgenden Schlüsselwörter haben spezielle Bedeutungen dafür, wo die URL geladen werden soll:

  • _self: Der aktuelle Navigationskontext. (Standard)
  • _blank: Normalerweise ein neuer Tab, aber Benutzer können Browser so konfigurieren, dass sie stattdessen ein neues Fenster öffnen.
  • _parent: Der übergeordnete Navigationskontext des aktuellen. Falls kein übergeordneter vorhanden ist, verhält er sich wie _self.
  • _top: Der oberste Navigationskontext. Das heißt, der "höchste" Kontext, der ein Vorfahre des aktuellen ist. Falls keine Vorfahren vorhanden sind, verhält er sich wie _self.
  • _unfencedTop: Erlaubt eingebetteten umzäunten Frames, auf den Top-Level-Frame zu navigieren (d. h. über die Wurzel des umzäunten Frames hinaus zu traversieren, im Gegensatz zu anderen reservierten Zielen). Beachten Sie, dass die Navigation auch dann gelingt, wenn diese außerhalb eines umzäunten Frame-Kontextes verwendet wird, aber sie wird nicht wie ein reserviertes Schlüsselwort wirken.

Hinweis: Das Festlegen von target="_blank" auf <a>-Elementen impliziert dasselbe rel-Verhalten wie das Festlegen von rel="noopener", was window.opener nicht setzt.

type

Hinweis auf das Format der verlinkten URL mit einem MIME-Typ. Keine eingebauten Funktionen.

Veraltete Attribute

charset Veraltet

Hinweis auf die Zeichenkodierung der verlinkten URL.

Hinweis: Dieses Attribut ist veraltet und sollte nicht von Autoren verwendet werden. Benutzen Sie den HTTP-Content-Type-Header auf der verlinkten URL.

coords Veraltet

Wurde mit dem shape-Attribut verwendet. Eine durch Kommas getrennte Liste von Koordinaten.

name Veraltet

Wurde benötigt, um einen möglichen Zielort auf einer Seite zu definieren. In HTML 4.01 konnten id und name beide auf <a> verwendet werden, solange sie identische Werte hatten.

Hinweis: Verwenden Sie stattdessen das globale Attribut id.

rev Veraltet

Spezifizierte einen Rücklink; das Gegenteil von dem rel-Attribut. Veraltet, da sehr verwirrend.

shape Veraltet

Die Form des Hyperlinks-Bereichs in einer Image-Map.

Hinweis: Verwenden Sie stattdessen das <area>-Element für Image-Maps.

Barrierefreiheit

Der Inhalt innerhalb eines Links sollte angeben, wohin der Link führt, auch aus dem Kontext heraus.

Ein leider häufiger Fehler ist es, nur die Wörter "hier klicken" oder "hier" zu verlinken:

html
<p>Learn more about our products <a href="/products">here</a>.</p>
Ergebnis

Glücklicherweise ist dies leicht zu beheben, und es ist tatsächlich kürzer als die unzugängliche Version!

html
<p>Learn more <a href="/products">about our products</a>.</p>
Ergebnis

Hilfssoftware hat Abkürzungen, um alle Links auf einer Seite aufzulisten. Starker Link-Text kommt jedoch allen Benutzern zugute - die "alle Links auflisten"-Abkürzung ahmt nach, wie sehende Benutzer Seiten schnell durchsehen.

onclick-Ereignisse

Anchor-Elemente werden oft als falsche Schaltflächen missbraucht, indem ihr href auf # oder javascript:void(0) gesetzt wird, um zu verhindern, dass die Seite aktualisiert wird, und dann auf ihre click-Ereignisse gehört wird.

Diese falschen href-Werte verursachen unerwartetes Verhalten beim Kopieren/Ziehen von Links, Öffnen von Links in einem neuen Tab/Fenster, Setzen von Lesezeichen oder wenn JavaScript geladen, fehlerhaft oder deaktiviert ist. Sie vermitteln auch falsche Semantik an Hilfstechnologien, wie z. B. Bildschirmlesegeräte.

Verwenden Sie stattdessen ein <button>. Im Allgemeinen sollten Sie nur einen Hyperlink für die Navigation zu einer echten URL verwenden.

Links, die in einem neuen Tab/Fenster über target="_blank" geöffnet werden, oder Links, die auf eine Download-Datei verweisen, sollten angeben, was passiert, wenn der Link gefolgt wird.

Menschen, die unter Sehbehinderungen leiden, mit Hilfe von Bildschirmlesegeräten navigieren oder kognitive Bedenken haben, könnten verwirrt sein, wenn ein neuer Tab, ein neues Fenster oder eine Anwendung unerwartet geöffnet wird. Ältere Bildschirmlesesoftware gibt das Verhalten möglicherweise nicht einmal bekannt.

html
<a target="_blank" href="https://www.wikipedia.org">
  Wikipedia (opens in new tab)
</a>
Ergebnis

Wenn ein Icon verwendet wird, um das Linkverhalten anzuzeigen, stellen Sie sicher, dass es ein alt-Attribut hat, um seinen Zweck zu beschreiben. Falls das Icon fehlt, wird der Inhalt des alt-Attributs weiterhin das Verhalten des Links vermitteln.

html
<p>
  <a href="https://www.wikipedia.org/" target="_blank">
    Wikipedia
    <img src="new-tab.svg" width="14" alt="(Opens in new tab)" />
  </a>
  <br />
  <a href="2017-annual-report.ppt">
    2017 annual report
    <img src="powerpoint.svg" width="14" alt="(PowerPoint file)" />
  </a>
</p>
<p>
  <a href="https://www.wikipedia.org/" target="_blank">
    Wikipedia
    <img src="missing-icon.svg" width="14" alt="(Opens in new tab)" />
  </a>
  <br />
  <a href="2017-annual-report.ppt">
    2017 annual report
    <img src="missing-icon.svg" width="14" alt="(PowerPoint file)" />
  </a>
</p>
Ergebnis

Ein Skip-Link ist ein Link, der so früh wie möglich im <body>-Inhalt platziert wird und auf den Beginn des Hauptinhalts der Seite verweist. Üblicherweise wird ein Skip-Link mit CSS ausgeblendet, bis er fokussiert wird.

html
<body>
  <a href="#content" class="skip-link">Skip to main content</a>

  <header></header>

  <!-- The skip link jumps to here -->
  <main id="content"></main>
</body>
css
.skip-link {
  position: absolute;
  top: -3em;
  background: #fff;
}
.skip-link:focus {
  top: 0;
}

Ergebnis

Skip-Links ermöglichen Tastaturbenutzern, Inhalte zu umgehen, die sich über mehrere Seiten hinweg wiederholen, wie z. B. Kopfzeilennavigation.

Skip-Links sind besonders nützlich für Menschen, die mit Hilfe von Hilfstechnologien wie Schaltersteuerung, Sprachbefehlen oder Mundstöcken/Kopfstöcken navigieren, bei denen das Navigieren durch sich wiederholende Links mühsam sein kann.

Größe und Nähe

Größe

Interaktive Elemente, wie Links, sollten einen großen Bereich bieten, der einfach aktiviert werden kann. Dies hilft einer Vielzahl von Menschen, einschließlich jener mit motorischen Kontrollproblemen und solchen, die ungenaue Eingaben wie einen Touchscreen verwenden. Eine Mindestgröße von 44×44 [CSS-Pixel]((https://www.w3.org/TR/WCAG21/#dfn-css-pixels) wird empfohlen.

Text-only-Links im Fließtext sind von dieser Anforderung ausgenommen, aber es ist dennoch eine gute Idee sicherzustellen, dass genügend Text verlinkt ist, um leicht aktiviert zu werden.

Nähe

Interaktive Elemente, wie Links, die in enger visueller Nähe platziert werden, sollten Platz dazwischen haben. Der Abstand hilft Menschen mit motorischen Kontrollproblemen, die sonst versehentlich das falsche interaktive Element aktivieren könnten.

Abstände können mit CSS-Eigenschaften wie margin erzeugt werden.

Beispiele

Verlinkung zu einer absoluten URL

HTML

html
<a href="https://www.mozilla.com">Mozilla</a>

Ergebnis

Verlinkung zu relativen URLs

HTML

html
<a href="//example.com">Scheme-relative URL</a>
<a href="/en-US/docs/Web/HTML">Origin-relative URL</a>
<a href="p">Directory-relative URL</a>
<a href="./p">Directory-relative URL</a>
<a href="../p">Parent-directory-relative URL</a>

Ergebnis

Verlinkung zu einem Element auf derselben Seite

html
<!-- <a> element links to the section below -->
<p><a href="#Section_further_down">Jump to the heading below</a></p>

<!-- Heading to link to -->
<h2 id="Section_further_down">Section further down</h2>

Ergebnis

Hinweis: Sie können href="#top" oder das leere Fragment (href="#") verwenden, um zum oberen Ende der aktuellen Seite zu verlinken, wie in der HTML-Spezifikation definiert.

Verlinkung zu einer E-Mail-Adresse

Um Links zu erstellen, die im E-Mail-Programm des Benutzers öffnen und ihm erlauben, eine neue Nachricht zu senden, verwenden Sie das mailto:-Schema:

html
<a href="mailto:nowhere@mozilla.org">Send email to nowhere</a>

Ergebnis

Für Details zu mailto:-URLs, wie z. B. das Einschließen eines Betreffs oder Textkörpers, siehe E-Mail-Links oder RFC 6068.

Verlinkung zu Telefonnummern

html
<a href="tel:+49.157.0156">+49 157 0156</a>
<a href="tel:+1(800)555-0123">(800) 555-0123</a>

Ergebnis

tel:-Linkverhalten variiert je nach Gerätefunktionen:

  • Mobilgeräte wählen die Nummer automatisch.
  • Die meisten Betriebssysteme verfügen über Programme, die Anrufe tätigen können, wie Skype oder FaceTime.
  • Websites können Anrufe tätigen mit registerProtocolHandler, wie z. B. web.skype.com.
  • Weitere Verhaltensweisen umfassen das Speichern der Nummer in Kontakten oder das Senden der Nummer an ein anderes Gerät.

Siehe RFC 3966 für Syntax, zusätzliche Funktionen und weitere Details zum tel:-URL-Schema.

Verwenden des download-Attributs, um einen <canvas> als PNG zu speichern

Um den Inhalt eines <canvas>-Elements als Bild zu speichern, können Sie einen Link erstellen, bei dem das href die Canvas-Daten als data:-URL ist, die mit JavaScript erstellt wird, und das download-Attribut den Dateinamen für die heruntergeladene PNG-Datei angibt:

HTML
html
<p>
  Paint by holding down the mouse button and moving it.
  <a href="" download="my_painting.png">Download my painting</a>
</p>

<canvas width="300" height="300"></canvas>
CSS
css
html {
  font-family: sans-serif;
}
canvas {
  background: #fff;
  border: 1px dashed;
}
a {
  display: inline-block;
  background: #69c;
  color: #fff;
  padding: 5px 10px;
}
JavaScript
js
const canvas = document.querySelector("canvas");
const c = canvas.getContext("2d");
c.fillStyle = "hotpink";
let isDrawing;

function draw(x, y) {
  if (isDrawing) {
    c.beginPath();
    c.arc(x, y, 10, 0, Math.PI * 2);
    c.closePath();
    c.fill();
  }
}

canvas.addEventListener("mousemove", (event) =>
  draw(event.offsetX, event.offsetY),
);
canvas.addEventListener("mousedown", () => (isDrawing = true));
canvas.addEventListener("mouseup", () => (isDrawing = false));

document
  .querySelector("a")
  .addEventListener(
    "click",
    (event) => (event.target.href = canvas.toDataURL()),
  );
Ergebnis

Sicherheit und Datenschutz

<a>-Elemente können Auswirkungen auf die Sicherheit und den Datenschutz der Benutzer haben. Siehe Referer-Header: Datenschutz- und Sicherheitsbedenken für Informationen.

Die Verwendung von target="_blank" ohne rel="noreferrer" und rel="noopener" macht die Website anfällig für Angriffe durch Ausnutzung der window.opener-API, obwohl zu beachten ist, dass in neueren Browserversionen das Setzen von target="_blank" implizit denselben Schutz bietet wie das Setzen von rel="noopener". Siehe Browser-Kompatibilität für Details.

Technische Zusammenfassung

Inhaltskategorien Fließinhalt, Satzinhalt, interaktiver Inhalt, greifbarer Inhalt.
Erlaubter Inhalt Transparent, außer dass kein Nachkomme interaktiver Inhalt oder ein <a>-Element sein darf und kein Nachkomme ein tabindex-Attribut spezifiziert haben darf.
Tag-Auslassung Keine, sowohl das Start- als auch das End-Tag sind erforderlich.
Erlaubte Eltern Jedes Element, das Fließinhalt akzeptiert, jedoch keine anderen <a>-Elemente.
Implizite ARIA-Rolle link, wenn das href-Attribut vorhanden ist, andernfalls generic
Erlaubte ARIA-Rollen

Wenn das href-Attribut vorhanden ist:

Wenn das href-Attribut nicht vorhanden ist:

  • Alle
DOM-Schnittstelle [`HTMLAnchorElement`](/de/docs/Web/API/HTMLAnchorElement)

Spezifikationen

Specification
HTML
# the-a-element

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
a
attributionsourceid
Experimental
attributionsrc
Experimental
charset
Deprecated
coords
Deprecated
download
href
href = 'sms:'
href = '#top'
hreflang
hreftranslate
ExperimentalNon-standard
target="_blank" implies rel="noopener" behavior
name
Deprecated
ping
referrerpolicy
no-referrer-when-downgrade
origin-when-cross-origin
unsafe-url
rel
rel.noopener
rel.noreferrer
rev
Deprecated
shape
Deprecated
target
_unfencedTop value
Experimental
URL text fragments
type

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
No support
No support
Experimental. Expect behavior to change in the future.
Non-standard. Check cross-browser support before using.
Deprecated. Not for use in new websites.
See implementation notes.
Has more compatibility info.

Siehe auch

  • <link> ist ähnlich wie <a>, aber für Metadaten-Hyperlinks, die den Benutzern nicht sichtbar sind.
  • :link ist eine CSS-Pseudoklasse, die <a>-Elemente mit URL im href-Attribut abgleicht, die noch nicht vom Benutzer besucht wurde.
  • :visited ist eine CSS-Pseudoklasse, die <a>-Elemente mit URL im href-Attribut abgleicht, die in der Vergangenheit vom Benutzer besucht wurde.
  • :any-link ist eine CSS-Pseudoklasse, die <a>-Elemente mit dem href-Attribut abgleicht.
  • Textfragmente sind Benutzer-Agent-Instruktionen, die zu URLs hinzugefügt werden und es Inhaltsautoren ermöglichen, ohne benötigte IDs auf spezifischen Text einer Seite zu verlinken.