<a>: Das Ankerelement

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

attributionsrc Experimentell

Gibt an, dass Sie möchten, dass der Browser einen Attribution-Reporting-Eligible-Header sendet. Serverseitig 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 Quelldaten, die mit der navigationsbasierten Attributionsquelle verbunden sind (wie im Attribution-Reporting-Register-Source-Antwortheader 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:

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

• 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 nicht auf einem von Ihnen kontrollierten Server liegt oder Sie die Registrierung der Attributionsquelle auf einem anderen Server abwickeln möchten. In diesem Fall können Sie eine oder mehrere URLs als Wert von attributionsrc angeben. Wenn die Ressourcenanfrage erfolgt, wird der Attribution-Reporting-Eligible-Header an die(s) in attributionsrc angegebene(n) URL(s) zusätzlich zum Ursprung der Ressource gesendet. Diese URLs können dann mit dem Attribution-Reporting-Register-Source antworten, um die Registrierung abzuschließen.

  Hinweis: Wenn Sie mehrere URLs angeben, können mehrere Attributionsquellen für dieselbe Funktion registriert werden. Möglicherweise versuchen Sie beispielsweise, den Erfolg verschiedener Kampagnen zu messen, was die Erstellung verschiedener Berichte auf unterschiedlichen Daten erfordert.

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

download

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

• Ohne einen Wert schlägt der Browser einen Dateinamen/Erweiterung vor, erstellt aus verschiedenen Quellen:

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

• filename: Das Definieren 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 same-origin 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 ö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 sich das Verhalten unterscheiden:
  • Wenn der Header einen filename angibt, hat er Vorrang vor einem im download-Attribut angegebenen Dateinamen.
  • Wenn der Header eine Disposition von inline angibt, priorisieren Chrome und Firefox das Attribut und behandeln es als Download. Ältere 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 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
• Während Webbrowser andere URL-Schemata möglicherweise nicht unterstützen, können Websites dies mit registerProtocolHandler()

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

• Abschnitte einer Seite mit Dokumentfragmenten
• Spezifische Textabschnitte mit Textfragmenten
• Teile von Mediendateien mit Medienfragmenten

hreflang

Weist auf die menschliche Sprache der verlinkten URL hin. Keine integrierte Funktionalität. 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 zum Tracking.

referrerpolicy

Wie viel Referrer beim Folgen des Links gesendet 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 referenzierenden 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 den Ursprung hinaus enthalten keine Referenzinformationen.
• strict-origin: Senden Sie den Ursprung des Dokuments nur als Referrer, wenn das Sicherheitsniveau des Protokolls gleich bleibt (HTTPS→HTTPS), senden Sie ihn jedoch nicht an ein weniger sicheres Ziel (HTTPS→HTTP).
• strict-origin-when-cross-origin (Standard): Senden Sie eine vollständige URL bei einer gleichursprünglichen Anfrage, senden Sie nur den Ursprung, wenn das Sicherheitsniveau des Protokolls gleich bleibt (HTTPS→HTTPS), und senden Sie keinen Header an ein weniger sicheres Ziel (HTTPS→HTTP).
• unsafe-url: Der Referrer enthält den Ursprung und den Pfad (aber nicht den Fragment, Passwort oder Benutzername). 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 Linktypen.

target

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

• _self: Der aktuelle Browsing-Kontext. (Standard)
• _blank: Üblicherweise ein neuer Tab, Benutzer können Browser jedoch so konfigurieren, dass sie stattdessen ein neues Fenster öffnen.
• _parent: Der übergeordnete Browsing-Kontext des aktuellen. Wenn kein übergeordneter Kontext vorhanden ist, verhält es sich wie _self.
• _top: Der oberste Browsing-Kontext. Genauer gesagt bedeutet dies der "höchste" Kontext, der ein Vorfahre des aktuellen ist. Wenn keine Vorfahren vorhanden sind, verhält es sich wie _self.
• _unfencedTop: Erlaubt eingebetteten eingezäunten Frames, das oberste Frame zu navigieren (d.h. weiter als die Wurzel des eingezäunten Frames zu traversieren, im Gegensatz zu anderen reservierten Zielen). Beachten Sie, dass die Navigation dennoch erfolgreich ist, wenn sie außerhalb eines eingezäunten Frame-Kontexts verwendet wird, aber nicht wie ein reserviertes Schlüsselwort wirkt.

Hinweis: Durch das Festlegen von target="_blank" auf <a>-Elementen wird implizit dasselbe rel-Verhalten bereitgestellt wie beim Festlegen von rel="noopener", wodurch window.opener nicht gesetzt wird.

type

Weist auf das Format der verlinkten URL mit einem MIME-Typ hin. Keine integrierte Funktionalität.

charset Veraltet

Wies auf die Zeichenkodierung der verlinkten URL hin.

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

coords Veraltet

Wurde mit dem shape-Attribut verwendet. Eine kommaseparierte Liste von Koordinaten.

name Veraltet

War erforderlich, 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 umgekehrten Link; das Gegenteil von dem rel-Attribut. Veraltet, da es sehr verwirrend ist.

shape Veraltet

Die Form des hyperverlinkten Bereichs in einer Bildkarte.

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

Der Inhalt in einem Link sollte anzeigen, wohin der Link führt, auch außerhalb des Kontexts.

Unzugänglicher, schwacher Linktext

Ein leider häufiger Fehler ist, 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 Linktext

Glücklicherweise ist dies eine einfache Lösung und tatsächlich kürzer als die unzugängliche Version!

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

Ergebnis

Assistenzsoftware hat Abkürzungen, um alle Links auf einer Seite aufzulisten. Starker Linktext nützt jedoch allen Benutzern — die "alle Links auflisten"-Abkürzung emuliert, wie sehende Benutzer schnell Seiten scannen.

Ankerelemente werden oft als Fake-Buttons missbraucht, indem ihr href auf # oder javascript:void(0) gesetzt wird, um das Neuladen der Seite zu verhindern, und dann auf ihre click-Ereignisse hören.

Diese betrügerischen href-Werte verursachen unerwartetes Verhalten beim Kopieren/Ziehen von Links, Öffnen von Links in neuen Tabs/Fenstern, Lesezeichen oder wenn JavaScript geladen wird, fehlerhaft ist oder deaktiviert ist. Sie vermitteln auch falsche Semantik an Hilfstechnologien wie Screenreader.

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

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

Personen mit Sehbehinderungen, die sich mit Hilfe von Screenreading-Technologie, oder mit kognitiven Bedenken navigieren, können verwirrt sein, wenn sich plötzlich ein neuer Tab, ein neues Fenster oder eine neue Anwendung öffnet. Ältere Screenreader-Software gibt das Verhalten möglicherweise nicht einmal wieder.

Link, der ein neues Tab/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 verwendet wird, um das Linkverhalten anzuzeigen, stellen Sie sicher, dass es ein alt-Attribut hat, um seinen Zweck zu beschreiben. Falls das Symbol fehlt, wird der Inhalt des alt-Attributs weiterhin das Linkverhalten 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 / Verständnis WCAG, Leitfaden 3.2
• G200: Öffnen neuer Fenster und Tabs von einem Link aus nur wenn nötig
• G201: Benutzern vorab warnen, wenn ein neues Fenster geöffnet wird

Ein Skip Link ist ein Link, der so früh wie möglich im <body>-Inhalt platziert wird und auf den Anfang des Hauptinhalts der Seite verweist. Normalerweise verbirgt CSS einen Skip Link außerhalb des Bildschirms, 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: #fff;
}
.skip-link:focus {
  top: 0;
}

Ergebnis

Skip Links ermöglichen es Tastaturnutzern, Inhalte zu überspringen, die auf mehreren Seiten wiederholt werden, wie z. B. die Kopfzeilennavigation.

Skip Links sind besonders nützlich für Menschen, die mit Hilfe von Hilfstechnologien wie Schaltersteuerung, Sprachsteuerung oder Mundstöcke/Kopfstäbe navigieren, da das Durchlaufen sich wiederholender Links sehr mühsam sein kann.

• WebAIM: "Skip Navigation"-Links
• Anleitung: Verwenden der Skip Navigation Links
• MDN / Verständnis WCAG, Leitfaden 2.4 Erklärungen
• Verständnis des Erfolgskriteriums 2.4.1

Größe

Interaktive Elemente, wie Links, sollten einen ausreichend großen Bereich bieten, um diese leicht zu aktivieren. Dies hilft einer Vielzahl von Menschen, einschließlich solcher mit motorischen Kontrollproblemen und solchen, die ungenaue Eingabemethoden wie Touchscreens verwenden. Eine Mindestgröße von 44×44 CSS-Pixeln wird empfohlen.

Text-only-Links in Fließtext 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.

• Verständnis des Erfolgskriteriums 2.5.5: Zielgröße
• Zielgröße und 2.5.5
• Schnelltest: Große Berührungsziele

Nähe

Interaktive Elemente, wie Links, die in enger visueller Nähe platziert sind, sollten durch Abstände getrennt werden. Abstände helfen Menschen mit motorischen Kontrollproblemen, die andernfalls versehentlich das falsche interaktive Element aktivieren könnten.

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

• Handzittern und das Problem der riesigen Schaltflächen

HTML

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

Ergebnis

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

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

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

<a href="mailto:[email protected]">Send email to nowhere</a>

Ergebnis

Für Details zu mailto:-URLs, wie z.B. das Hinzufügen eines Betreffs oder Inhalts, siehe E-Mail-Links oder RFC 6068.

<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 variiert mit den Gerätefähigkeiten:

• Mobiltelefone 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, wie web.skype.com, durchführen.
• Andere Verhaltensweisen umfassen das Speichern der Nummer in Kontakten oder das Senden der Nummer an ein anderes Gerät.

Siehe RFC 3966, um Syntax, zusätzliche Funktionen und Details zum tel:-URL-Schema zu erfahren.

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 wurde und das download-Attribut den Dateinamen für die heruntergeladene PNG-Datei bereitstellt:

Beispiel-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: #fff;
  border: 1px dashed;
}
a {
  display: inline-block;
  background: #69c;
  color: #fff;
  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

<a>-Elemente können Konsequenzen für die Sicherheit und Privatsphäre der Benutzer haben. Siehe Referer-Header: Privatsphäre- 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 in neueren Browserversionen das Festlegen von target="_blank" implizit denselben Schutz wie das Festlegen von rel="noopener" bietet. Siehe Browser-Kompatibilität für Details.

• <link> ist ähnlich wie <a>, jedoch für Metadaten-Hyperlinks, die für Benutzer unsichtbar sind.
• :link ist eine CSS-Pseudoklasse, die zu <a>-Elementen mit einer im href-Attribut angegebenen URL passt, die vom Benutzer noch nicht besucht wurde.
• :visited ist eine CSS-Pseudoklasse, die zu <a>-Elementen mit einer im href-Attribut angegebenen URL passt, die der Benutzer in der Vergangenheit besucht hat.
• :any-link ist eine CSS-Pseudoklasse, die zu <a>-Elementen mit href-Attribut passt.
• Textfragmente sind benutzeragentenbasierte Anweisungen, die URLs hinzugefügt werden, die es Inhaltsautoren ermöglichen, auf spezifischen Text auf einer Seite zu verlinken, ohne dass IDs erforderlich sind.