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 in der Antwort ein Attribution-Reporting-Register-Source-Header gesendet wird, um eine navigationsbasierte Attributionsquelle zu registrieren.

Wenn ein Benutzer auf den Link klickt, speichert der Browser die Quelldaten der navigationsbasierten Attributionsquelle, die im Attribution-Reporting-Register-Source-Antwortheader bereitgestellt werden. Weitere Einzelheiten 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 Sie die Registrierung der Attributionsquelle auf demselben Server abwickeln.

• 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 von Ihnen kontrollierten Server befindet oder Sie die Attributionsquelle auf einem anderen Server registrieren möchten. In diesem Fall können Sie eine oder mehrere URLs als Wert von attributionsrc angeben. Beim Anfordern der Ressource wird der Attribution-Reporting-Eligible-Header zusätzlich zum Ursprungsserver der Ressource an die in attributionsrc angegebenen URLs gesendet. Diese URLs können 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. So könnten Sie beispielsweise den Erfolg verschiedener Kampagnen messen und dafür unterschiedliche Berichte auf Grundlage unterschiedlicher Daten erstellen.

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

download

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

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

  • Dem HTTP-Header Content-Disposition
  • Dem letzten Abschnitt 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. Diese Anpassung erfolgt beim Auslösen des Downloads und ist über die Eigenschaft HTMLAnchorElement.download nicht erkennbar.

Hinweis:

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

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ührbarer 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 adressieren, darunter:

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

hreflang

Gibt einen Hinweis auf die natürliche Sprache der verlinkten URL. Hat keine integrierte Funktion. Zulässige Werte entsprechen denen des globalen lang-Attributs.

interestfor

Definiert das <a>-Element als Interest Invoker. Sein Wert ist die id des Zielelements. Dieses wird auf bestimmte Weise beeinflusst (normalerweise angezeigt oder ausgeblendet), wenn am auslösenden Element Interesse entsteht oder verloren geht, etwa durch Bewegen des Mauszeigers darüber beziehungsweise weg davon oder durch Fokussieren beziehungsweise Aufheben des Fokus. Weitere Einzelheiten 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 Referrer-Informationen 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 anderen Ursprüngen wird der gesendete Referrer auf Schema, Host und Port beschränkt. Bei Navigationen innerhalb desselben Ursprungs ist weiterhin der Pfad enthalten.
• same-origin: Bei Anfragen innerhalb desselben Ursprungs wird ein Referrer gesendet; bei ursprungsübergreifenden Anfragen werden keine Referrer-Informationen gesendet.
• strict-origin: Der Ursprung des Dokuments wird nur dann als Referrer gesendet, wenn das Sicherheitsniveau des Protokolls gleich bleibt (HTTPS→HTTPS), nicht aber an ein weniger sicheres Ziel (HTTPS→HTTP).
• strict-origin-when-cross-origin (Standard): Bei Anfragen innerhalb desselben Ursprungs wird die vollständige URL gesendet. Bleibt das Sicherheitsniveau des Protokolls gleich (HTTPS→HTTPS), wird 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, jedoch nicht das Fragment, 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

Beschreibt die Beziehung zur verlinkten URL durch eine durch Leerzeichen getrennte Liste von Linktypen.

target

Legt fest, wo die verlinkte URL angezeigt wird, indem ein Browsing Context (ein Tab, ein Fenster oder ein <iframe>) benannt wird. Die folgenden Schlüsselwörter legen fest, wo die URL geladen wird:

• _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 der „höchste“ übergeordnete Kontext des aktuellen Kontexts. Ist keiner vorhanden, verhält sich der Wert wie _self.
• _unfencedTop: Ermöglicht eingebetteten Fenced Frames, den Frame auf oberster Ebene zu navigieren, also über die Wurzel des Fenced Frames hinaus – anders als bei den anderen reservierten Zielangaben. Eine Navigation ist auch dann möglich, wenn dieser Wert außerhalb eines Fenced Frames verwendet wird; dort wirkt er jedoch nicht als reserviertes Schlüsselwort.

Hinweis: Wenn Sie target="_blank" für <a>-Elemente setzen, ergibt sich implizit dasselbe rel-Verhalten wie bei 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 mehr 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 innerhalb einer Seite zu definieren. In HTML 4.01 konnten sowohl id als auch name auf <a> verwendet werden, sofern ihre Werte identisch waren.

Hinweis: Verwenden Sie stattdessen das globale Attribut id.

rev

Gab eine umgekehrte Linkbeziehung an, also das Gegenteil des rel-Attributs. Das Attribut ist veraltet, weil es leicht missverstanden werden kann.

shape

Die Form des Hyperlink-Bereichs in einer Imagemap.

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

Barrierefreiheit

Aussagekräftiger Linktext

Der Inhalt eines Links sollte sein Ziel erkennen lassen, auch wenn er ohne Kontext betrachtet wird.

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 das leicht beheben – und die barrierefreie Version ist sogar kürzer!

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

Ergebnis

Unterstützende Software bietet Funktionen, mit denen sich alle Links einer Seite auflisten lassen. Aussagekräftige Linktexte helfen jedoch allen Benutzern: Eine solche Linkliste entspricht ungefähr der Art, wie sehende Benutzer eine Seite rasch überfliegen.

onclick-Ereignisse

Ankerelemente werden häufig als vorgetäuschte Buttons missbraucht: Ihr href wird auf # oder javascript:void(0) gesetzt, um ein erneutes Laden der Seite zu verhindern, 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. Probleme entstehen auch, während JavaScript lädt, wenn Fehler auftreten oder wenn JavaScript deaktiviert ist. Außerdem vermitteln diese Werte unterstützenden Technologien wie Screenreadern eine falsche Semantik.

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

Externe Links und Links zu Nicht-HTML-Ressourcen

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

Menschen mit eingeschränktem Sehvermögen, Benutzer von Screenreadern und Menschen mit kognitiven Einschränkungen können irritiert sein, 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 das Verhalten eines Links kennzeichnet, 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 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 warnen, wenn ein neues Fenster geöffnet wird

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 fokussiert wird.

<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

Mit Sprunglinks können Benutzer, die per Tastatur navigieren, Inhalte überspringen, die auf mehreren Seiten wiederholt werden, etwa die Navigation im Seitenkopf.

Sprunglinks sind besonders hilfreich für Menschen, die mithilfe unterstützender Technologien wie Schaltern oder Sprachsteuerung oder mit einem Mundstab beziehungsweise Kopfstab navigieren. Für sie kann das Durchlaufen wiederholter Links mühsam sein.

• WebAIM: „Skip Navigation“-Links
• Anleitung: Links zum Überspringen der 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. Das hilft unter anderem Menschen mit Einschränkungen der motorischen Kontrolle und Benutzern unpräziser Eingabemethoden wie Touchscreens. Empfohlen wird eine Mindestgröße von 44 × 44 CSS-Pixeln.

Reine Textlinks im 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: Größe des Ziels
• Zielgröße und 2.5.5
• Schnelltest: Große Touch-Ziele

Abstand

Interaktive Elemente wie Links, die optisch nah beieinanderliegen, sollten durch einen Abstand voneinander getrennt sein. Das hilft Menschen mit Einschränkungen der motorischen Kontrolle, die sonst versehentlich den falschen interaktiven Inhalt aktivieren könnten.

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

• Handzittern und das Problem riesiger Buttons

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 mailto:-Schema:

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

Ergebnis

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

Link zu Telefonnummern

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

Ergebnis

Wie sich tel:-Links verhalten, hängt von den Fähigkeiten des Geräts ab:

• Mobilgeräte wählen die Nummer automatisch.
• Für die meisten Betriebssysteme gibt es Programme, mit denen sich Anrufe tätigen lassen, etwa Skype oder FaceTime.
• Websites können mit registerProtocolHandler Telefonanrufe ermöglichen, beispielsweise web.skype.com.
• Zu den weiteren möglichen Verhaltensweisen gehören das Speichern der Nummer in den Kontakten und 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 download-Attribut 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 download-Attribut gibt dabei den Dateinamen der heruntergeladenen PNG-Datei an:

Beispiel einer Malanwendung 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: Datenschutz- und Sicherheitsbedenken.

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

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität

Siehe auch

• <link> ähnelt <a>, wird aber für Metadaten-Hyperlinks verwendet, 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 Autoren, auf bestimmte Textstellen einer Seite zu verlinken, ohne dass dafür IDs erforderlich sind.