<a>: Das Anker-Element

Die Attribute dieses Elements beinhalten die globalen Attribute.

attributionsrc Experimentell

Gibt an, dass Sie möchten, dass der Browser einen Attribution-Reporting-Eligible-Header sendet. Auf der Serverseite 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 (wie im Attribution-Reporting-Register-Source-Antwortheader bereitgestellt) verknüpft sind, 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 attributionsrc-Name. Dies gibt an, dass Sie möchten, dass der Attribution-Reporting-Eligible-Header an denselben Server gesendet wird, auf den das href-Attribut verweist. Das ist in Ordnung, wenn Sie die Registrierung der Attributionsquelle auf demselben Server handhaben.

• Wert, der eine oder mehrere URLs enthält, z.B.:

  htmlCopy to Clipboard

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

  Dies ist nützlich in Fällen, in denen die angeforderte Ressource sich nicht auf einem Server befindet, den Sie kontrollieren, 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 für attributionsrc angeben. Wenn die Ressource angefordert wird, wird der Attribution-Reporting-Eligible-Header zusätzlich zur Ursprungsressource an die in attributionsrc angegebenen URL(s) gesendet. Diese URLs können dann mit dem Attribution-Reporting-Register-Source antworten, um die Registrierung abzuschließen.

  Hinweis: Wenn mehrere URLs angegeben werden, können mehrere Attributionsquellen für dasselbe Feature registriert werden. Möglicherweise haben Sie beispielsweise verschiedene Kampagnen, deren Erfolg Sie messen möchten, was das Generieren verschiedener Berichte zu unterschiedlichen Daten umfasst.

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

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/erweiterung vor, der aus verschiedenen Quellen generiert wird:

  • 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: Wenn ein Wert definiert wird, wird er als Dateiname vorgeschlagen. /- und \-Zeichen werden in Unterstriche (_) umgewandelt. Dateisysteme können andere Zeichen in Dateinamen verbieten, sodass Browser den vorgeschlagenen Namen bei Bedarf anpassen.

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 vor dem Start eines Downloads aufgefordert werden, oder die Datei kann automatisch gespeichert oder direkt geöffnet werden, 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 abweichen:

  • Wenn der Header einen filename spezifiziert, hat er Vorrang gegenüber einem im download-Attribut angegebenen Dateinamen.
  • Wenn der Header eine Disposition von inline spezifiziert, 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 von Browsern unterstützte URL-Schema verwenden:

• Telefonnummern mit tel:-URLs
• E-Mail-Adressen mit mailto:-URLs
• SMS-Textnachrichten mit sms:-URLs
• Ausführbarer Code mit javascript:-URLs
• Während Webbrowser möglicherweise andere URL-Schemata nicht unterstützen, können Websites dies mit registerProtocolHandler().

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

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

hreflang

Hinweis auf die menschliche Sprache der verlinkten URL. Keine integrierte Funktionalität. Erlaubte Werte sind dieselben wie beim globalen lang-Attribut.

ping

Eine durch Leerzeichen getrennte Liste von URLs. Wenn der Link gefolgt wird, sendet der Browser POST-Anfragen mit dem Körper PING an die URLs. Typischerweise für das Tracking.

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 Origin ohne TLS (HTTPS) gesendet.
• origin: Der gesendete Referrer ist auf den Origin der verweisenden Seite beschränkt: sein Scheme, Host und Port.
• origin-when-cross-origin: Der gesendete Referrer an andere Origins ist auf das Scheme, den Host und den Port beschränkt. Navigationen auf demselben Origin enthalten weiterhin den Pfad.
• same-origin: Ein Referrer wird für same origin gesendet, aber Cross-Origin-Anfragen enthalten keine Referrer-Informationen.
• strict-origin: Sendet nur den Origin des Dokuments als Referrer, wenn das Protokollsicherheitsniveau gleich bleibt (HTTPS→HTTPS), aber nicht, wenn es zu einem weniger sicheren Ziel (HTTPS→HTTP) geht.
• strict-origin-when-cross-origin (Standard): Sendet eine vollständige URL, wenn eine Same-Origin-Anfrage durchgeführt wird, sendet nur den Origin, wenn das Protokollsicherheitsniveau gleich bleibt (HTTPS→HTTPS), und sendet keinen Header zu einem weniger sicheren Ziel (HTTPS→HTTP).
• unsafe-url: Der Referrer enthält den Origin und den Pfad (aber nicht das Fragment, Passwort oder Benutzername). Dieser Wert ist unsicher, da er Origins und Pfade von TLS-geschützten Ressourcen an unsichere Origins weitergibt.

rel

Die Beziehung der verlinkten URL als durch Leerzeichen getrennte Linktypen.

target

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

• _self: Der aktuelle Browsingkontext. (Standard)
• _blank: Normalerweise ein neuer Tab, aber Benutzer können Browser so konfigurieren, dass stattdessen ein neues Fenster geöffnet wird.
• _parent: Der übergeordnete Browsingkontext des aktuellen. Wenn kein übergeordneter, verhält sich wie _self.
• _top: Der oberste Browsingkontext. Das bedeutet der "höchste" Kontext, der ein Vorfahre des aktuellen ist. Wenn keine Vorfahren, verhält sich wie _self.
• _unfencedTop: Ermöglicht eingebetteten Fenced Frames, den Top-Level-Frame zu navigieren (d.h., über die Wurzel des Fenced Frames hinaus, im Gegensatz zu anderen reservierten Zielen). Beachten Sie, dass die Navigation auch dann erfolgreich ist, wenn dies außerhalb eines Fenced Frame-Kontexts verwendet wird, es jedoch nicht als reserviertes Schlüsselwort fungiert.

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

type

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

charset Veraltet

Hinweis auf die Zeichenkodierung der verlinkten URL.

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

coords Veraltet

Verwendet mit dem shape-Attribut. Eine durch Kommas getrennte Liste von Koordinaten.

name Veraltet

Wurde benötigt, um einen möglichen Zielbereich 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 Rücklink; das Gegenteil vom dem rel-Attribut. Veraltet, da sehr verwirrend.

shape Veraltet

Die Form des Linkbereichs in einer Bildkarte.

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

Der Inhalt innerhalb eines Links sollte anzeigen, wohin der Link führt, auch aus dem Kontext heraus.

Nicht zugänglicher, schwacher 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

Starker Linktext

Zum Glück ist dies einfach zu beheben und tatsächlich kürzer als die nicht zugängliche Version!

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

Ergebnis

Assistierende Software verfügt über Verknüpfungen, um alle Links auf einer Seite aufzulisten. Dennoch profitieren alle Benutzer von starkem Linktext – die Verknüpfung "alle Links auflisten" emuliert, wie sehende Benutzer schnell Seiten scannen.

Ankerelemente werden oft als gefälschte Schaltflächen missbraucht, indem ihr href auf # oder javascript:void(0) gesetzt wird, um zu verhindern, dass die Seite aktualisiert wird, und dann auf ihre click-Ereignisse gehört wird.

Diese falschen href-Werte führen zu unerwartetem Verhalten beim Kopieren/Ziehen von Links, Öffnen von Links in einem neuen Tab/Fenster, Lesezeichen setzen oder wenn JavaScript geladen wird, Fehler auftritt oder deaktiviert ist. Sie übermitteln auch falsche Semantik an unterstützende Technologien, wie Screenreader.

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

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

Personen mit Sehbehinderungen, die mit Hilfe von Screenreader-Technologie navigieren, oder mit kognitiven Beeinträchtigungen können verwirrt sein, wenn ein neuer Tab, ein Fenster oder eine Anwendung unerwartet geöffnet wird. Ältere Screenreader-Software könnte das Verhalten nicht einmal ankündigen.

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 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 übermitteln.

<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 von WCAG, Leitlinie 3.2
• G200: Öffnen neuer Fenster und Tabs aus einem Link nur bei Bedarf
• G201: Den Nutzern eine Vorwarnung geben, 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 wird ein Skip-Link durch CSS versteckt, 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 beispielsweise die Header-Navigation.

Skip-Links sind besonders nützlich für Personen, die mit Hilfe unterstützender Technologie wie Schaltersteuerung, Sprachbefehl oder Mundsticks/Kopfstäben navigieren, da das Bewegen durch sich wiederholende Links mühsam sein kann.

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

Größe

Interaktive Elemente, wie Links, sollten einen ausreichend großen Bereich bereitstellen, damit sie leicht aktiviert werden können. Dies hilft einer Vielzahl von Menschen, einschließlich derjenigen mit motorischen Steuerungsproblemen und derjenigen, die ungenaue Eingaben wie einen Touchscreen verwenden. Eine Mindestgröße von 44×44 [CSS-Pixel] (https://www.w3.org/TR/WCAG21/#dfn-css-pixels) wird empfohlen.

Texteingabe-Links in Prosa sind von dieser Anforderung ausgenommen, aber es ist trotzdem eine gute Idee sicherzustellen, dass genug Text verlinkt ist, um leicht aktiviert zu werden.

• 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 Platz dazwischen haben. Abstände helfen Menschen mit motorischen Steuerproblemen, die sonst möglicherweise versehentlich das falsche interaktive Element aktivieren.

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

• Handzittern und das große-Schaltfläche-Problem

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

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

Für Details zu mailto:-URLs, wie das Hinzufügen eines Betreffs oder einer Nachricht, 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 je nach Gerätefähigkeiten:

• Mobiltelefone wählen automatisch die Nummer.
• Die meisten Betriebssysteme verfügen über 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.

Um die Inhalte 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 für eine Mal-App 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: #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: Datenschutz- und Sicherheitsbedenken für Informationen.

Die Verwendung von target="_blank" ohne rel="noreferrer" und rel="noopener" macht die Website anfällig für Ausbeutungsangriffe der window.opener-API, obwohl in neueren Browserversionen das Einstellen von target="_blank" implizit denselben Schutz bietet wie das Einstellen von rel="noopener". Siehe Browser-Kompatibilität für Details.

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