HTML-Ankerelement <a>

Probieren Sie es aus

<p>You can reach Michael at:</p>

<ul>
  <li><a href="https://example.com">Website</a></li>
  <li><a href="mailto:m.bluth@example.com">Email</a></li>
  <li><a href="tel:+123456789">Phone</a></li>
</ul>

li {
  margin-bottom: 0.5rem;
}

Attribute

Zu den Attributen dieses Elements gehören die globalen Attribute.

attributionsrc

Gibt an, dass der Browser einen Attribution-Reporting-Eligible-Header senden soll. Serverseitig wird damit ausgelöst, dass die Antwort einen Attribution-Reporting-Register-Source-Header enthält, um eine navigationsbasierte Attributionsquelle zu registrieren.

Wenn ein Benutzer auf den Link klickt, speichert der Browser die mit der navigationsbasierten Attributionsquelle verknüpften Quelldaten, die im Attribution-Reporting-Register-Source-Antwortheader angegeben sind. Weitere Informationen finden Sie unter Attribution Reporting API.

Dieses Attribut kann auf zwei Arten gesetzt werden:

• Als boolesches Attribut, also nur mit dem Namen attributionsrc. Dadurch wird der Attribution-Reporting-Eligible-Header an denselben Server gesendet, auf den das href-Attribut verweist. Das eignet sich, wenn die Registrierung der Attributionsquelle auf demselben Server erfolgt.

• Mit einem 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, wenn sich die angeforderte Ressource auf einem Server befindet, den Sie nicht kontrollieren, oder wenn Sie die Attributionsquelle auf einem anderen Server registrieren möchten. In diesem Fall können Sie als Wert von attributionsrc eine oder mehrere URLs angeben. Bei der Ressourcenanfrage wird der Attribution-Reporting-Eligible-Header zusätzlich zum Ursprung der Ressource an die in attributionsrc angegebenen URLs gesendet. Diese URLs können dann mit dem Attribution-Reporting-Register-Source-Header antworten, um die Registrierung abzuschließen.

  Hinweis: Wenn Sie mehrere URLs angeben, können für dieselbe Funktion mehrere Attributionsquellen registriert werden. Beispielsweise könnten Sie verschiedene Kampagnen haben, deren Erfolg Sie messen möchten und für die unterschiedliche Berichte auf Basis unterschiedlicher Daten erstellt werden.

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

download

Bewirkt, dass der Browser die verlinkte URL als Download behandelt. Das Attribut kann mit oder ohne filename-Wert verwendet werden:

• Ohne Wert schlägt der Browser einen Dateinamen und eine Erweiterung vor, die er aus verschiedenen Quellen ableitet:

  • dem HTTP-Header Content-Disposition
  • dem letzten Segment des URL-Pfads
  • dem Medientyp (aus dem Content-Type-Header, dem Anfang einer data:-URL oder Blob.type bei einer blob:-URL)

• filename: Ein angegebener Wert wird als Dateiname vorgeschlagen. Die Zeichen / und \ werden in Unterstriche (_) umgewandelt. Da Dateisysteme weitere Zeichen in Dateinamen verbieten können, passen Browser den vorgeschlagenen Namen bei Bedarf an.

Hinweis:

• download funktioniert nur für Same-Origin-URLs sowie für die Schemas blob: und data:.
• Wie Browser Downloads behandeln, hängt vom Browser, den Benutzereinstellungen und weiteren Faktoren ab. Benutzer werden möglicherweise vor Beginn eines Downloads gefragt; die Datei kann aber auch automatisch gespeichert oder in einer externen Anwendung beziehungsweise im Browser selbst geöffnet werden.
• Wenn der Content-Disposition-Header andere Angaben enthält als das download-Attribut, kann sich das Verhalten unterscheiden:
  • Gibt der Header einen filename an, hat dieser Vorrang vor einem im download-Attribut angegebenen Dateinamen.
  • Gibt der Header inline an, geben Chrome und Firefox dem Attribut Vorrang und behandeln die Datei als Download. Ältere Firefox-Versionen (vor Version 82) geben dem Header Vorrang und zeigen den Inhalt direkt an.

href

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

• Telefonnummern mit tel:-URLs
• E-Mail-Adressen mit mailto:-URLs
• SMS-Nachrichten mit sms:-URLs
• Ausführbaren Code mit javascript:-URLs
• Websites können mit registerProtocolHandler() weitere URL-Schemas unterstützen, auch wenn Webbrowser diese möglicherweise nicht selbst unterstützen.

Weitere URL-Funktionen ermöglichen es außerdem, bestimmte Teile einer Ressource anzusteuern:

• Abschnitte einer Seite mit Dokumentfragmenten
• Bestimmte Textstellen mit Textfragmenten
• Teile von Mediendateien mit Medienfragmenten

hreflang

Gibt einen Hinweis auf die menschliche Sprache der verlinkten URL. Hat keine integrierte Funktion. Zulässig sind dieselben Werte wie beim globalen lang-Attribut.

interestfor

Definiert das <a>-Element als Interest Invoker. Sein Wert ist die id des Zielelements. Dieses wird auf bestimmte Weise beeinflusst – üblicherweise ein- oder ausgeblendet –, wenn Interesse am Invoker-Element gezeigt wird oder verloren geht, beispielsweise durch Bewegen des Mauszeigers darüber beziehungsweise weg davon oder durch Fokussieren beziehungsweise Verlassen des Fokus. Weitere Informationen und Beispiele finden Sie unter Interest Invoker verwenden.

ping

Eine durch Leerzeichen getrennte Liste von URLs. Wenn dem Link gefolgt wird, sendet der Browser POST-Anfragen mit dem Body PING an diese URLs. Dies wird üblicherweise zur Nachverfolgung verwendet.

referrerpolicy

Legt fest, wie viele Informationen über den Referrer beim Folgen des Links gesendet werden.

• 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: ihr Schema, ihren Host und ihren Port.
• origin-when-cross-origin: Bei Anfragen an andere Ursprünge wird der gesendete Referrer auf Schema, Host und Port beschränkt. Bei Navigationen innerhalb desselben Ursprungs ist der Pfad weiterhin enthalten.
• same-origin: Bei Anfragen an denselben Ursprung wird ein Referrer gesendet; ursprungsübergreifende Anfragen enthalten dagegen keine Referrer-Informationen.
• strict-origin: Der Ursprung des Dokuments wird nur dann als Referrer gesendet, wenn die Sicherheitsstufe des Protokolls gleich bleibt (HTTPS→HTTPS), nicht aber an ein weniger sicheres Ziel (HTTPS→HTTP).
• strict-origin-when-cross-origin (Standard): Bei einer Anfrage an denselben Ursprung wird die vollständige URL gesendet. Wenn die Sicherheitsstufe des Protokolls gleich bleibt (HTTPS→HTTPS), wird bei einer Anfrage an einen anderen Ursprung nur der Ursprung gesendet. An ein weniger sicheres Ziel (HTTPS→HTTP) wird kein Header gesendet.
• unsafe-url: Der Referrer enthält den Ursprung und den Pfad (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 preisgibt.

rel

Die Beziehung der verlinkten URL, angegeben durch durch Leerzeichen getrennte Linktypen.

target

Gibt als Name eines Browsing Context (eines Tabs, Fensters oder <iframe>) an, wo die verlinkte URL angezeigt wird. Die folgenden Schlüsselwörter haben eine besondere Bedeutung für den Ort, an dem die URL geladen wird:

• _self: Der aktuelle Browsing Context. (Standard)
• _blank: Üblicherweise ein neuer Tab; Benutzer können ihren Browser jedoch so konfigurieren, dass stattdessen ein neues Fenster geöffnet wird.
• _parent: Der übergeordnete Browsing Context des aktuellen Kontexts. Gibt es keinen übergeordneten Kontext, verhält sich der Wert wie _self.
• _top: Der oberste Browsing Context, also der höchste Kontext, der ein Vorfahr des aktuellen Kontexts ist. Gibt es keinen solchen Vorfahren, verhält sich der Wert wie _self.
• _unfencedTop: Ermöglicht eingebetteten Fenced Frames, den obersten Frame zu navigieren – anders als bei anderen reservierten Zielen also über die Wurzel des Fenced Frames hinaus. Auch außerhalb eines Fenced-Frame-Kontexts gelingt die Navigation mit diesem Wert, er wirkt dort jedoch nicht als reserviertes Schlüsselwort.

Hinweis: Wenn target="_blank" für ein <a>-Element gesetzt wird, hat dies implizit dieselbe rel-Wirkung wie rel="noopener": window.opener wird nicht gesetzt.

type

Gibt mit einem MIME-Typ einen Hinweis auf das Format der verlinkten URL. Hat keine integrierte Funktion.

Veraltete Attribute

charset

Gab einen Hinweis auf die Zeichenkodierung der verlinkten URL.

Hinweis: Dieses Attribut ist veraltet und sollte nicht verwendet werden. Verwenden Sie stattdessen den HTTP-Header Content-Type für die verlinkte URL.

coords

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

name

War erforderlich, um eine mögliche Zielposition auf einer Seite zu definieren. In HTML 4.01 konnten sowohl id als auch name für <a> verwendet werden, sofern ihre Werte identisch waren.

Hinweis: Verwenden Sie stattdessen das globale Attribut id.

rev

Gab eine umgekehrte Linkbeziehung an, also das Gegenstück zum rel-Attribut. Es wurde als veraltet eingestuft, weil es sehr verwirrend war.

shape

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

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

Barrierefreiheit

Aussagekräftiger Linktext

Der Inhalt eines Links sollte auch ohne Kontext erkennen lassen, wohin er führt.

Nicht barrierefreier, wenig aussagekräftiger Linktext

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

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

Ergebnis

Barrierefreier, aussagekräftiger Linktext

Glücklicherweise lässt sich das leicht beheben – und die barrierefreie Variante ist sogar kürzer!

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

Ergebnis

Unterstützende Software bietet Tastenkombinationen, um alle Links einer Seite aufzulisten. Aussagekräftiger Linktext hilft jedoch allen Benutzern: Die Funktion „Alle Links auflisten“ entspricht der Art und Weise, wie sehende Benutzer Seiten schnell überfliegen.

onclick-Ereignisse

Ankerelemente werden häufig als unechte Schaltflächen missbraucht: Ihr href wird auf # oder javascript:void(0) gesetzt, damit die Seite nicht neu geladen wird, und anschließend werden ihre click-Ereignisse verarbeitet.

Solche unechten href-Werte führen zu unerwartetem Verhalten, wenn Links kopiert oder gezogen, in einem neuen Tab oder Fenster geöffnet oder als Lesezeichen gespeichert werden – ebenso, wenn JavaScript noch geladen wird, Fehler auftreten oder JavaScript deaktiviert ist. Außerdem vermitteln sie unterstützenden Technologien wie Screenreadern eine falsche Semantik.

Verwenden Sie stattdessen ein <button>-Element. Grundsätzlich sollten Sie Hyperlinks nur für die Navigation zu einer echten URL verwenden.

Externe Links und Links zu Nicht-HTML-Ressourcen

Links, die über target="_blank" in einem neuen Tab oder Fenster geöffnet werden, und Links zu herunterladbaren Dateien sollten erkennen lassen, was beim Folgen des Links geschieht.

Menschen mit eingeschränktem Sehvermögen, Benutzer von Screenreadern oder Menschen mit kognitiven Einschränkungen können verwirrt werden, wenn sich unerwartet ein neuer Tab, ein neues Fenster oder eine Anwendung öffnet. Ältere Screenreader kündigen dieses Verhalten möglicherweise nicht einmal an.

Link, der einen neuen Tab oder ein neues Fenster öffnet

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

Ergebnis

Link zu einer Nicht-HTML-Ressource

Wenn ein Symbol auf das Verhalten eines Links hinweist, stellen Sie sicher, dass es ein alt-Attribut besitzt, das seinen Zweck beschreibt. Falls das Symbol nicht angezeigt wird, vermittelt der Inhalt des alt-Attributs weiterhin, was beim Folgen des Links geschieht.

<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

• WebAIM: Links und Hypertext – Hypertext-Links
• MDN / WCAG verstehen, Richtlinie 3.2
• G200: Neue Fenster und Tabs über einen Link nur bei Bedarf öffnen
• G201: Benutzer vor dem Öffnen eines neuen Fensters vorab informieren

Sprunglinks

Ein Sprunglink ist ein Link, der möglichst weit am Anfang des Inhalts von <body> steht und zum Beginn des Hauptinhalts der Seite führt. Üblicherweise blendet CSS den Sprunglink außerhalb des sichtbaren Bereichs aus, bis er den Fokus erhält.

<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>

.skip-link {
  position: absolute;
  top: -3em;
  background: white;
}
.skip-link:focus {
  top: 0;
}

Ergebnis

Sprunglinks ermöglichen es Benutzern, die mit der Tastatur navigieren, Inhalte zu überspringen, die auf mehreren Seiten wiederholt werden, etwa die Navigation im Seitenkopf.

Sprunglinks sind besonders hilfreich für Menschen, die mit unterstützenden Technologien wie Schaltern oder Sprachsteuerung oder mit einem Mundstab oder Kopfstab navigieren. Für sie kann es mühsam sein, sich durch wiederkehrende Links zu bewegen.

• WebAIM: „Skip Navigation“-Links
• Anleitung: Sprunglinks verwenden
• MDN / WCAG verstehen, Erläuterungen zu Richtlinie 2.4
• Erfolgskriterium 2.4.1 verstehen

Größe und Abstand

Größe

Interaktive Elemente wie Links sollten eine ausreichend große Fläche bieten, damit sie leicht aktiviert werden können. Das hilft vielen Menschen, darunter Personen mit motorischen Einschränkungen und Personen, die unpräzise Eingabemethoden wie einen Touchscreen verwenden. Empfohlen wird eine Mindestgröße von 44 × 44 CSS-Pixeln.

Reine Textlinks im Fließtext sind von dieser Anforderung ausgenommen. Dennoch ist es sinnvoll, ausreichend Text zu verlinken, damit sich der Link leicht aktivieren lässt.

• Erfolgskriterium 2.5.5 verstehen: Zielgröße
• Zielgröße und 2.5.5
• Schnelltest: Große Berührungsflächen

Abstand

Interaktive Elemente wie Links, die optisch nahe beieinanderliegen, sollten durch Zwischenräume voneinander getrennt sein. Das hilft Menschen mit motorischen Einschränkungen, die sonst versehentlich das falsche interaktive Element aktivieren könnten.

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

• Zitternde Hände und das Problem riesiger Schaltflächen

Beispiele

Link zu einer absoluten URL

HTML

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

Ergebnis

Links zu relativen URLs

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>

a {
  display: block;
  margin-bottom: 0.5em;
}

Ergebnis

Link zu einem Element auf derselben Seite

<!-- <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

Link zu einer E-Mail-Adresse

Um Links zu erstellen, die das E-Mail-Programm des Benutzers zum Verfassen einer neuen Nachricht öffnen, verwenden Sie das Schema mailto::

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

Ergebnis

Einzelheiten zu mailto:-URLs, etwa zum Einfügen eines Betreffs oder Nachrichtentexts, finden Sie unter E-Mail-Links oder in RFC 6068.

Links zu Telefonnummern

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

Ergebnis

Das Verhalten von tel:-Links hängt von den Fähigkeiten des Geräts ab:

• Mobilgeräte wählen die Nummer automatisch.
• Die meisten Betriebssysteme verfügen über Programme wie Skype oder FaceTime, mit denen Anrufe getätigt werden können.
• Websites können mit registerProtocolHandler Anrufe ermöglichen, beispielsweise über web.skype.com.
• Weitere mögliche Aktionen sind das Speichern der Nummer in den Kontakten oder das Senden der Nummer an ein anderes Gerät.

Syntax, zusätzliche Funktionen und weitere Einzelheiten zum URL-Schema tel: finden Sie in RFC 3966.

Mit dem download-Attribut ein <canvas> als PNG speichern

Um den Inhalt eines <canvas>-Elements als Bild zu speichern, können Sie einen Link erstellen, dessen href die mit JavaScript als data:-URL erzeugten Canvas-Daten enthält. Das download-Attribut gibt dabei den Dateinamen der heruntergeladenen PNG-Datei an:

Beispiel: Zeichenanwendung mit Speicherlink

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

html {
  font-family: sans-serif;
}
canvas {
  background: white;
  border: 1px dashed;
}
a {
  display: inline-block;
  background: #6699cc;
  color: white;
  padding: 5px 10px;
}

JavaScript

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. Weitere Informationen finden Sie unter Referer-Header: Datenschutz- und Sicherheitsbedenken.

Wird target="_blank" ohne rel="noreferrer" und rel="noopener" verwendet, kann die Website für Angriffe anfällig sein, die die API window.opener ausnutzen. Beachten Sie jedoch, dass target="_blank" in neueren Browserversionen implizit denselben Schutz bietet wie rel="noopener". Einzelheiten finden Sie unter Browser-Kompatibilität.

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität

Siehe auch

• <link> ähnelt <a>, dient jedoch für Metadaten-Hyperlinks, die für Benutzer nicht sichtbar sind.
• :link ist eine CSS-Pseudoklasse, die auf <a>-Elemente mit einer URL im href-Attribut zutrifft, die der Benutzer noch nicht besucht hat.
• :visited ist eine CSS-Pseudoklasse, die auf <a>-Elemente mit einer URL im href-Attribut zutrifft, die der Benutzer bereits besucht hat.
• :any-link ist eine CSS-Pseudoklasse, die auf <a>-Elemente mit einem href-Attribut zutrifft.
• Textfragmente sind Anweisungen an den User Agent, die URLs hinzugefügt werden. Sie ermöglichen es, ohne IDs auf bestimmte Textstellen einer Seite zu verlinken.