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.

Der Browser speichert die mit der navigationsbasierten Attributionsquelle verknüpften Quelldaten (die im Attribution-Reporting-Register-Source-Antwortheader bereitgestellt werden), wenn der Benutzer auf den Link klickt. 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. Damit geben Sie an, dass der Attribution-Reporting-Eligible-Header an denselben Server gesendet werden soll, auf den das Attribut href verweist. Das ist geeignet, wenn Sie die Registrierung der Attributionsquelle auf demselben Server verarbeiten.

• 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 nicht auf einem Server befindet, den Sie kontrollieren, oder wenn Sie die Registrierung der Attributionsquelle auf einem anderen Server verarbeiten möchten. In diesem Fall können Sie eine oder mehrere URLs als Wert von attributionsrc 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 Grundlage unterschiedlicher Daten erstellt werden.

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

download

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

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

  • 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 durch Unterstriche (_) ersetzt. Dateisysteme können weitere Zeichen in Dateinamen verbieten; Browser passen den vorgeschlagenen Namen daher bei Bedarf an. Diese Anpassung erfolgt beim Auslösen des Downloads und ist über die Eigenschaft HTMLAnchorElement.download nicht sichtbar.

Hinweis:

• download funktioniert nur bei URLs desselben Ursprungs sowie bei blob:-URLs desselben Ursprungs und data:-URLs. Bei anderen URLs wird das Attribut download ignoriert und eine normale Navigation durchgeführt. Die Zielseite kann jedoch weiterhin mit Content-Disposition einen Download veranlassen.
• Wie Browser Downloads behandeln, hängt vom Browser, den Benutzereinstellungen und weiteren Faktoren ab. Möglicherweise wird vor Beginn eines Downloads eine Bestätigung angefordert, die Datei automatisch gespeichert oder automatisch in einer externen Anwendung oder im Browser selbst geöffnet.
• Wenn das Attribut download berücksichtigt wird, hat es Vorrang vor dem Verhalten von Content-Disposition: inline. Der Parameter filename von Content-Disposition hat jedoch Vorrang vor dem Namen im Attribut download.

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
• Auch wenn Webbrowser andere URL-Schemata möglicherweise nicht unterstützen, können Websites dies mithilfe von registerProtocolHandler() tun.

Darüber hinaus lassen sich mit weiteren URL-Funktionen bestimmte Teile einer Ressource ansteuern, darunter:

• Abschnitte einer Seite mit Dokumentfragmenten
• Bestimmte Textstellen mit Textfragmenten
• Ausschnitte aus Mediendateien mit Medienfragmenten

hreflang

Gibt einen Hinweis auf die natürliche Sprache des verlinkten Ziels. Hat keine integrierte Funktionalität. Zulässige Werte entsprechen denen des globalen Attributs lang.

interestfor

Definiert das <a>-Element als Interest Invoker. Sein Wert ist die id des Zielelements. Dieses wird auf bestimmte Weise beeinflusst (normalerweise ein- oder ausgeblendet), wenn Interesse am Invoker-Element entsteht oder endet, beispielsweise durch Bewegen des Mauszeigers darüber oder weg davon oder durch Fokussieren beziehungsweise Aufheben 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 für Tracking verwendet.

referrerpolicy

Legt fest, wie viele Informationen des Referrers beim Abrufen der verlinkten Ressource 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 wird weiterhin der Pfad übermittelt.
• same-origin: Bei Anfragen innerhalb desselben Ursprungs wird ein Referrer gesendet; Anfragen an andere Ursprünge enthalten keine Referrer-Informationen.
• strict-origin: Der Ursprung des Dokuments wird nur dann als Referrer gesendet, wenn das Sicherheitsniveau des Protokolls gleich bleibt (HTTPS→HTTPS), nicht jedoch bei einem weniger sicheren Ziel (HTTPS→HTTP).
• strict-origin-when-cross-origin (Standard): Bei einer Anfrage innerhalb desselben Ursprungs wird die vollständige URL gesendet. Bei Anfragen an andere Ursprünge wird nur dann der Ursprung gesendet, wenn das Sicherheitsniveau des Protokolls gleich bleibt (HTTPS→HTTPS). An weniger sichere Ziele (HTTPS→HTTP) wird kein Header gesendet.
• unsafe-url: Der Referrer enthält den Ursprung und den Pfad (aber weder das Fragment noch das Passwort oder den Benutzernamen). Dieser Wert ist unsicher, da er Ursprünge und Pfade TLS-geschützter Ressourcen an unsichere Ursprünge weitergibt.

rel

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

target

Gibt als Name eines Browsing Context (eines Tabs, Fensters oder <iframe>-Elements) an, wo die verlinkte URL angezeigt werden soll. Die folgenden Schlüsselwörter haben eine besondere Bedeutung für das Laden der URL:

• _self: Der aktuelle Browsing Context. (Standard)
• _blank: Üblicherweise ein neuer Tab. Benutzer können Browser jedoch so konfigurieren, dass stattdessen ein neues Fenster geöffnet wird.
• _parent: Der übergeordnete Browsing Context des aktuellen Kontexts. Ist keiner vorhanden, verhält sich der Wert wie _self.
• _top: Der oberste Browsing Context. Genauer gesagt ist dies der „höchste“ Kontext, der ein Vorfahre des aktuellen Kontexts ist. Sind keine Vorfahren vorhanden, verhält sich der Wert wie _self.
• _unfencedTop: Ermöglicht eingebetteten Fenced Frames, den obersten Frame zu navigieren (also anders als andere reservierte Ziele über die Wurzel des Fenced Frame hinaus). Beachten Sie, dass die Navigation auch außerhalb eines Fenced-Frame-Kontexts funktioniert, der Wert dort aber nicht als reserviertes Schlüsselwort behandelt wird.

Hinweis: Das Setzen von target="_blank" auf <a>-Elementen bewirkt implizit dasselbe rel-Verhalten wie das Setzen von rel="noopener": window.opener wird nicht gesetzt.

type

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

Veraltete Attribute

charset

Gab einen Hinweis auf die Zeichenkodierung der verlinkten URL.

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

coords

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

name

War erforderlich, um eine mögliche Zielposition auf einer Seite festzulegen. 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

Legte eine umgekehrte Linkbeziehung fest, also das Gegenteil des Attributs rel. Wurde als veraltet eingestuft, da es leicht zu Verwechslungen führt.

shape

Die Form des Hyperlink-Bereichs in einer Image Map.

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

Barrierefreiheit

Aussagekräftiger Linktext

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

Nicht barrierefreier, wenig aussagekräftiger Linktext

Ein leider häufiger Fehler besteht darin, 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 dies leicht beheben, und die barrierefreie Fassung ist sogar kürzer!

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

Ergebnis

Unterstützende Software bietet Kurzbefehle, um alle Links einer Seite aufzulisten. Aussagekräftige Linktexte helfen jedoch allen Benutzern: Der Kurzbefehl zum Auflisten aller Links entspricht der Art, 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, um ein erneutes Laden der Seite zu verhindern, und anschließend wird auf ihre click-Ereignisse reagiert.

Diese ungültigen href-Werte führen zu unerwartetem Verhalten beim Kopieren oder Ziehen von Links, beim Öffnen in einem neuen Tab oder Fenster, beim Setzen von Lesezeichen sowie während JavaScript geladen wird, Fehler aufweist oder deaktiviert ist. Zudem vermitteln sie unterstützenden Technologien wie Screenreadern eine falsche Semantik.

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

Externe Links und Links zu Nicht-HTML-Ressourcen

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

Menschen mit eingeschränktem Sehvermögen, Menschen, die Screenreader verwenden, oder Menschen mit kognitiven Einschränkungen können irritiert sein, wenn sich unerwartet ein neuer Tab, ein 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 das Verhalten eines Links kennzeichnet, stellen Sie sicher, dass es ein alt-Attribut hat, das seinen Zweck beschreibt. Falls das Symbol fehlt, vermittelt der Inhalt des Attributs alt weiterhin das Verhalten des Links.

<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 vorab über das Öffnen eines neuen Fensters informieren

Sprunglinks

Ein Sprunglink ist ein Link, der möglichst früh im Inhalt von <body> platziert wird und zum Anfang 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, Sprachsteuerung oder Mund- beziehungsweise Kopfstäben navigieren. Für sie kann es mühsam sein, sich durch wiederholt auftretende Links zu bewegen.

• WebAIM: „Skip Navigation“-Links
• Anleitung: Sprunglinks für die Navigation 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 sich leicht aktivieren lassen. Dies hilft unterschiedlichen Menschen, darunter Personen mit eingeschränkter motorischer Kontrolle und Personen, die unpräzise Eingabemethoden wie einen Touchscreen verwenden. Empfohlen wird eine Mindestgröße von 44 × 44 CSS-Pixeln.

Reine Textlinks in Fließtext sind von dieser Anforderung ausgenommen. Dennoch ist es sinnvoll, genügend Text zu verlinken, damit der Link leicht aktiviert werden kann.

• Erfolgskriterium 2.5.5 verstehen: Zielgröße
• Zielgröße und 2.5.5
• Schnelltest: Große Touch-Ziele

Abstand

Interaktive Elemente wie Links, die optisch dicht beieinanderliegen, sollten durch Abstand voneinander getrennt sein. Das hilft Menschen mit eingeschränkter motorischer Kontrolle, die sonst versehentlich das falsche interaktive Element aktivieren könnten.

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

• Händezittern 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 im E-Mail-Programm des Benutzers eine neue Nachricht öffnen, verwenden Sie das Schema mailto::

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

Ergebnis

Einzelheiten zu mailto:-URLs, beispielsweise 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, mit denen Anrufe möglich sind, etwa Skype oder FaceTime.
• Websites können mit registerProtocolHandler Anrufe ermöglichen, beispielsweise web.skype.com.
• Zu weiteren möglichen Verhaltensweisen gehören das Speichern der Nummer in 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.

Das Attribut download verwenden, um ein <canvas> als PNG zu 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 Attribut download gibt dabei den Dateinamen für die heruntergeladene PNG-Datei an:

Beispiel einer 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 von Benutzern haben. Weitere Informationen finden Sie unter Referer-Header: Bedenken hinsichtlich Datenschutz und Sicherheit.

Die Verwendung von target="_blank" ohne rel="noreferrer" und rel="noopener" macht eine Website anfällig für Angriffe, 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 aber für Metadaten-Hyperlinks, die für Benutzer nicht sichtbar sind.
• :link ist eine CSS-Pseudoklasse, die auf <a>-Elemente mit einer URL im Attribut href zutrifft, die der Benutzer noch nicht besucht hat.
• :visited ist eine CSS-Pseudoklasse, die auf <a>-Elemente mit einer URL im Attribut href zutrifft, die der Benutzer bereits besucht hat.
• :any-link ist eine CSS-Pseudoklasse, die auf <a>-Elemente mit einem Attribut href zutrifft.
• Textfragmente sind Anweisungen an den User Agent, die URLs hinzugefügt werden und es ermöglichen, auf bestimmte Textstellen einer Seite zu verlinken, ohne dass IDs erforderlich sind.