<a>: Das Anker-Element

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

Die Attribute dieses Elements umfassen die globalen Attribute.

attributionsrc Experimentell

Gibt an, dass Sie möchten, dass der Browser einen Attribution-Reporting-Eligible-Header sendet. Auf der Serverseite wird dieser 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 Quelldaten, die mit der navigationsbasierten Attributionsquelle verbunden sind (wie im Attribution-Reporting-Register-Source-Antwort-Header bereitgestellt), wenn der Benutzer auf den Link klickt. Einzelheiten finden Sie in der Attribution Reporting API.

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

• Boolean, also nur der Name des attributionsrc. Dies spezifiziert, dass der Attribution-Reporting-Eligible-Header an denselben Server gesendet werden soll, auf den das href-Attribut verweist. Dies ist in Ordnung, wenn Sie die Registrierung der Attributionsquelle auf demselben Server vornehmen.

• Wert mit einer oder mehreren URLs, zum Beispiel:

  html

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

  Dies ist nützlich, wenn die angeforderte Ressource nicht auf einem Server ist, den Sie steuern, oder wenn Sie die Registrierung der Attributionsquelle auf einem anderen Server handhaben möchten. In diesem Fall können Sie eine oder mehrere URLs als Wert von attributionsrc angeben. Wenn die Ressourcenanforderung erfolgt, wird der Attribution-Reporting-Eligible-Header an die in attributionsrc angegebenen URL(s) gesendet, zusätzlich zum Ursprungsort der Ressource. Diese URLs können dann mit dem Attribution-Reporting-Register-Source antworten, um die Registrierung abzuschließen.

  Hinweis: Die Angabe mehrerer URLs bedeutet, dass mehrere Attributionsquellen für dasselbe Feature registriert werden können. Sie könnten beispielsweise verschiedene Kampagnen haben, deren Erfolg Sie messen möchten, was das Erstellen verschiedener Berichte zu verschiedenen Daten beinhaltet.

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

download

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

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

  • Der Content-Disposition-HTTP-Header
  • Der letzte Abschnitt im URL-Pfad
  • Der Medientyp (aus dem Content-Type-Header, dem Beginn einer data:-URL oder Blob.type für eine blob:-URL)

• filename: Die Definition eines Wertes schlägt diesen 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 gleichherkunftsbasierte URLs, oder für die blob:- und data:-Schemata.
• Wie Browser Downloads behandeln, variiert je nach Browser, Benutzereinstellungen und anderen Faktoren. Dem Benutzer kann eine Aufforderung angezeigt werden, bevor das Herunterladen gestartet wird, oder die Datei wird automatisch gespeichert oder sie öffnet sich automatisch entweder in einer externen Anwendung oder im Browser selbst.
• Wenn der Content-Disposition-Header andere Informationen als das download-Attribut enthält, kann das resultierende Verhalten unterschiedlich sein:
  • Wenn der Header einen filename angibt, hat er Vorrang vor einem Dateinamen, der im download-Attribut angegeben ist.
  • Wenn der Header eine Anordnung von inline angibt, priorisieren Chrome und Firefox das Attribut und behandeln es als Download. Ältere Firefox-Versionen (vor Version 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-Nachrichten mit sms:-URLs
• Ausführbarer Code mit javascript:-URLs
• Während Webbrowser möglicherweise keine anderen URL-Schemata unterstützen, können Websites dies mit registerProtocolHandler().

Außerdem können andere URL-Funktionen spezifische Teile der Ressource lokalisieren, einschließlich:

• Abschnitten einer Seite mit Dokumentfragmenten
• Bestimmten Textteilen mit Textfragmenten
• Teilen von Mediendateien mit Medienfragmenten

hreflang

Gibt einen Hinweis auf die menschliche Sprache der verlinkten URL. Keine eingebaute Funktionalität. Erlaubte Werte sind die gleichen wie das globale lang-Attribut.

interestfor Experimentell

Definiert das <a>-Element als Interest Invoker. Sein Wert ist die id des Zielelements, das in irgendeiner Weise beeinflusst wird (normalerweise gezeigt oder verborgen), wenn Interesse am Invoker-Element gezeigt oder verloren wird (z. B. durch Überfahren/Entfernen des Zeigers oder Fokussieren/Entfokussieren). Weitere Details und Beispiele finden Sie unter Using interest invokers.

ping

Eine durch Leerzeichen getrennte Liste von URLs. Wenn der Link gefolgt wird, wird der Browser POST-Anforderungen mit dem Body PING an die URLs senden. Typischerweise zum Verfolgen.

referrerpolicy

Wie viel des Referrers gesendet werden soll, wenn dem Link gefolgt wird.

• 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 Referrer, der an andere Ursprünge gesendet wird, wird auf das Schema, den Host und den Port beschränkt. Navigationen am selben Ursprung enthalten weiterhin den Pfad.
• same-origin: Ein Referrer wird für gleichherkunftsbasierte Anfragen gesendet, aber Anfragen an andere 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 nicht an ein weniger sicheres Ziel (HTTPS→HTTP).
• strict-origin-when-cross-origin (Standard): Sendet eine vollständige URL bei einer gleichherkunftsbasierten Anfrage, sendet nur den Ursprung, wenn das Sicherheitsniveau des Protokolls gleich bleibt (HTTPS→HTTPS), und sendet keinen Header an ein weniger sicheres Ziel (HTTPS→HTTP).
• unsafe-url: Der Referrer enthält den Ursprung und den Pfad (aber nicht das Fragment, Passwort oder Benutzername). Dieser Wert ist unsicher, da er Ursprünge und Pfade von TLS-geschützten Ressourcen an unsichere Ursprünge leakt.

rel

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

target

Gibt an, wo die verlinkte URL angezeigt werden soll, als Name für einen Browsing-Kontext (einen Tab, ein Fenster oder ein <iframe>). Die folgenden Schlüsselwörter haben spezielle Bedeutungen dafür, wo die URL geladen werden soll:

• _self: Der aktuelle Browsing-Kontext. (Standard)
• _blank: Normalerweise ein neuer Tab, aber Benutzer können Browser so konfigurieren, dass ein neues Fenster geöffnet wird.
• _parent: Der übergeordnete Browsing-Kontext des aktuellen. Wenn kein Elternteil vorhanden ist, verhält es sich wie _self.
• _top: Der oberste Browsing-Kontext. Konkret bedeutet dies den "höchsten" Kontext, der ein Vorfahr des aktuellen ist. Wenn keine Vorfahren vorhanden sind, verhält es sich wie _self.
• _unfencedTop: Ermöglicht es eingebetteten fenced frames, das oberste Frame zu navigieren (d.h. über das Wurzel-Frame des fenced frame hinauszugehen, im Gegensatz zu anderen reservierten Zielen). Beachten Sie, dass die Navigation dennoch erfolgreich sein wird, wenn dies außerhalb eines fenced frame-Kontexts verwendet wird, aber es wird nicht wie ein reserviertes Schlüsselwort fungieren.

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

type

Gibt einen Hinweis auf das Format der verlinkten URL mit einem MIME-Typ. Keine eingebaute Funktionalität.

Veraltete Attribute

charset Veraltet

Gab einen Hinweis auf die Zeichenkodierung der verlinkten URL.

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

coords Veraltet

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

name Veraltet

War erforderlich, um einen möglichen Zielort auf einer Seite zu definieren. In HTML 4.01 könnten sowohl id als auch name auf <a> verwendet werden, solange sie identische Werte hatten.

Hinweis: Verwenden Sie stattdessen das globale Attribut id.

rev Veraltet

Spezifizierte einen reverse Link; das Gegenteil des rel-Attributs. Veraltet, da es sehr verwirrend ist.

shape Veraltet

Die Form der Hyperlink-Region in einer Image-Map.

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

Barrierefreiheit

Starker Link-Text

Der Inhalt innerhalb eines Links sollte angeben, wohin der Link führt, auch außerhalb des Kontexts.

Nicht zugänglicher, schwacher Link-Text

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

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

Ergebnis

Zugänglicher, starker Link-Text

Glücklicherweise ist dies ein einfacher Fix, und es ist tatsächlich kürzer als die nicht zugängliche Version!

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

Ergebnis

Hilftechnologien haben Abkürzungen, um alle Links auf einer Seite aufzulisten. Starker Link-Text kommt jedoch allen Nutzern zugute — die Abkürzung "alle Links auflisten" emuliert, wie sehende Benutzer Seiten schnell scannen.

onclick-Ereignisse

Anker-Elemente werden oft als falsche Schaltflächen missbraucht, indem ihr href auf # oder javascript:void(0) gesetzt wird, um ein Aktualisieren der Seite zu verhindern, und dann auf ihre click-Ereignisse zu hören.

Diese falschen href-Werte führen zu unerwartetem Verhalten beim Kopieren/Draggen von Links, Öffnen von Links in einem neuen Tab/Fenster, Setzen von Lesezeichen oder wenn JavaScript lädt, Fehler verursacht oder deaktiviert ist. Sie vermitteln auch falsche Semantik an Hilfstechnologien wie Bildschirmleseprogrammen.

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

Externe Links und Links zu Nicht-HTML-Ressourcen

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

Personen, die unter Sehbehinderungen leiden, mit Bildschirmlesetechnologie navigieren oder kognitive Probleme haben, können verwirrt sein, wenn unerwartet ein neuer Tab, ein Fenster oder eine Anwendung geöffnet wird. Ältere Bildschirmleseprogramme geben das Verhalten möglicherweise nicht einmal bekannt.

Link, der einen neuen Tab/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 Icon verwendet wird, um das Linkverhalten anzuzeigen, stellen Sie sicher, dass es ein alt-Attribut hat, das seinen Zweck beschreibt. Falls das Icon fehlt, wird der Inhalt des alt-Attributs dennoch das Verhalten des Links vermitteln.

<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 von einem Link öffnen, nur wenn nötig
• G201: Benutzer im Voraus warnen, wenn ein neues Fenster geöffnet wird

Skip-Links

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 zeigt. In der Regel wird ein Skip-Link mit CSS aus dem Sichtfeld verborgen, 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

Skip-Links ermöglichen es Tastaturbenutzern, Inhalte zu umgehen, die sich über mehrere Seiten wiederholen, wie z. B. Navigationsleisten im Header.

Skip-Links sind besonders nützlich für Personen, die mit der Hilfe von Hilfstechnologien wie Switch-Control, Sprachsteuerung oder Maussticks/Kopfstäben navigieren, bei denen das Bewegen durch wiederholte Links mühsam sein kann.

• WebAIM: "Navigation überspringen"-Links
• Anleitung: Verwenden von Skip-Links
• MDN / WCAG verstehen, Richtlinie 2.4 Erklärungen
• Erfolgskriterium 2.4.1 verstehen

Größe und Nähe

Größe

Interaktive Elemente wie Links sollten eine ausreichend große Fläche bieten, damit sie leicht aktiviert werden können. Dies hilft einer Vielzahl von Menschen, einschließlich derjenigen mit motorischen Kontrollproblemen und derjenigen, die ungenaue Eingaben wie Touchscreens verwenden. Eine Mindestgröße von 44×44 CSS-Pixel wird empfohlen.

Nur aus Text bestehende Links in fließendem Inhalt sind von dieser Anforderung ausgenommen, aber es ist dennoch eine gute Idee, sicherzustellen, dass genug Text verlinkt ist, um leicht aktiviert werden zu können.

• Erfolgskriterium 2.5.5: Zielgröße verstehen
• Zielgröße und 2.5.5
• Schnelltest: Große Berührungsziele

Nähe

Interaktive Elemente, wie z. B. Links, die in enger visueller Nähe platziert werden, sollten durch Abstände getrennt sein. Abstände helfen Personen mit motorischen Kontrollproblemen, die andernfalls möglicherweise versehentlich das falsche interaktive Element aktivieren.

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

• Handtremor und das Riesenknopf-Problem

Beispiele

Verlinkung zu einer absoluten URL

HTML

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

Ergebnis

Verlinkung 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

Verlinkung 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

Verlinkung zu einer E-Mail-Adresse

Um Links zu erstellen, die im E-Mail-Programm des Benutzers geöffnet werden, um eine neue Nachricht zu senden, verwenden Sie das mailto:-Schema:

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

Ergebnis

Einzelheiten zu mailto:-URLs, wie z. B. das Hinzufügen eines Betreffs oder Inhalts, finden Sie unter E-Mail-Links oder RFC 6068.

Verlinkung 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 tel:-Link-Verhalten variiert je nach Geräteleistung:

• Mobilgeräte wählen die Nummer automatisch.
• Die meisten Betriebssysteme haben Programme, die Anrufe tätigen können, wie Skype oder FaceTime.
• Websites können Anrufe mit registerProtocolHandler tätigen, wie web.skype.com.
• Andere 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.

Verwendung des Download-Attributs zum Speichern eines <canvas> als PNG

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

Beispiel einer Mal-App mit Speichern-Link

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 Konsequenzen für die Sicherheit und den Datenschutz der Benutzer haben. Informationen finden Sie in den Datenschutz- und Sicherheitsbedenken des Referer-Headers.

Die Verwendung von target="_blank" ohne rel="noreferrer" und rel="noopener" macht die Website anfällig für Exploit-Angriffe durch die window.opener API, obwohl in neueren Browserversionen das Setzen von target="_blank" implizit denselben Schutz wie das Setzen von rel="noopener" bietet. Einzelheiten finden Sie unter Browser-Kompatibilität.

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität

Siehe auch

• <link> ist ähnlich wie <a>, aber für Metadaten-Hyperlinks, die für Benutzer unsichtbar sind.
• :link ist ein CSS-Pseudoklasse, das -Elemente mit URL im href-Attribut anspricht, die noch nicht vom Benutzer besucht wurden.
• :visited ist ein CSS-Pseudoklasse, das -Elemente mit URL im href-Attribut anspricht, die vom Benutzer in der Vergangenheit besucht wurden.
• :any-link ist ein CSS-Pseudoklasse, das -Elemente mit href-Attribut anspricht.
• Textfragmente sind Anweisungen des Benutzeragenten, die URLs hinzugefügt werden, um es den Inhaltsautoren zu ermöglichen, spezifische Texte auf einer Seite zu verlinken, ohne dass IDs erforderlich sind.