<a>: Das Anchor-Element

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. 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 verknüpft sind (wie im Attribution-Reporting-Register-Source-Antwortheader angegeben), 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 spezifiziert, dass der Attribution-Reporting-Eligible-Header an denselben Server gesendet werden soll, auf den das href-Attribut verweist. Dies ist geeignet, wenn Sie die Registrierung der Attributionsquelle auf demselben Server handhaben.

• 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 Server liegt, den Sie kontrollieren, oder 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) zusätzlich zum Ressourcenursprung gesendet. Diese URLs können dann mit dem Attribution-Reporting-Register-Source-Header antworten, um die Registrierung abzuschließen.

  Hinweis: Das Angeben mehrerer URLs bedeutet, dass mehrere Attributionsquellen auf derselben Funktion registriert werden können. Möglicherweise haben Sie zum Beispiel unterschiedliche Kampagnen, deren Erfolg Sie messen möchten, was das Erstellen verschiedener Berichte zu unterschiedlichen Daten einschließt.

<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 filename-Wert verwendet werden:

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

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

• filename: Ein Wert, der als Dateiname vorgeschlagen wird. Die Zeichen / und \ 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 gleiche Ursprung-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 beginnt, oder die Datei kann automatisch gespeichert oder direkt im Browser selbst oder in einer externen Anwendung geöffnet werden.

• Wenn der Content-Disposition-Header andere Informationen als das download-Attribut enthält, kann das Verhalten unterschiedlich sein:

  • Wenn der Header einen filename-Wert angibt, hat dieser Vorrang vor einem im Attribut download angegebenen Dateinamen.
  • Wenn der Header eine Anordnung von inline angibt, geben Chrome und Firefox dem Attribut Vorrang und behandeln es als Download. Alte Firefox-Versionen (vor 82) geben dem Header Vorrang 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-Textnachrichten 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-Funktionen spezifische Teile der Ressource lokalisieren, einschließlich:

• Abschnitte einer Seite mit Dokumentfragmenten
• Bestimmte Textstellen mit Textfragmenten
• Teile 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.

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 Tracking.

referrerpolicy

Wie viel vom 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 verweisenden Seite beschränkt: Sein Schema, Host und Port.
• origin-when-cross-origin: Der an andere Ursprünge gesendete Referrer wird auf Schema, Host und Port beschränkt. Navigationen auf demselben Ursprung enthalten weiterhin den Pfad.
• same-origin: Ein Referrer wird für gleiche Ursprünge gesendet, aber bei verfremdeten Anfragen wird keine Referrer-Information enthalten sein.
• strict-origin: Senden Sie nur den Ursprung des Dokuments als Referrer, wenn das Sicherheitsniveau des Protokolls gleich bleibt (HTTPS→HTTPS), aber senden Sie ihn nicht an ein weniger sicheres Ziel (HTTPS→HTTP).
• strict-origin-when-cross-origin (Standard): Senden Sie eine vollständige URL bei einer Anfrage zum gleichen Ursprung, 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 das Fragment, Passwort oder Benutzername). Dieser Wert ist unsicher, da er Ursprünge und Pfade von TLS-geschützten Ressourcen zu unsicheren Ursprüngen leakt.

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 für den Ort des Ladens der URL:

• _self: Der aktuelle Browsing-Kontext. (Standard)

• _blank: In der Regel eine neue Registerkarte, aber Benutzer können Browser konfigurieren, um stattdessen ein neues Fenster zu öffnen.

• _parent: Der übergeordnete Browsing-Kontext des aktuellen. Wenn kein Elternteil, verhält sich wie _self.

• _top: Der oberste Browsing-Kontext. Genau genommen bedeutet das der "höchste" Kontext, der ein Vorfahre des aktuellen ist. Wenn keine Vorfahren, verhält sich wie _self.

• _unfencedTop: Erlaubt eingebetteten abgegrenzten Frames das Navigieren des obersten Frames (d.h. das Überwinden der Grenze des abgegrenzten Frames, im Gegensatz zu anderen reservierten Zielen). Beachten Sie, dass die Navigation auch dann erfolgreich ist, wenn dies außerhalb eines abgegrenzten Frame-Kontexts verwendet wird, es jedoch nicht wie ein reserviertes Schlüsselwort funktioniert.

Hinweis: Wenn target="_blank" auf <a>-Elementen gesetzt wird, wird implizit das gleiche rel-Verhalten bereitgestellt wie mit der Einstellung rel="noopener", das window.opener nicht setzt.

type

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

charset Veraltet

Gab einen 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 für die verlinkte URL.

coords Veraltet

Wurde mit dem shape-Attribut verwendet. Eine durch Kommas getrennte 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 sehr verwirrend.

shape Veraltet

Die Form der Region des Hyperlinks in einer Bildkarte.

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

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

Nicht barrierefreier, schwacher Linktext

Ein leider weit verbreiteter Fehler ist es, nur die Worte "hier klicken" oder "hier" zu verlinken:

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

Ergebnis

Starker Linktext

Glücklicherweise ist dies einfach zu beheben, und es ist tatsächlich kürzer als die nicht barrierefreie Version!

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

Ergebnis

Hilfssoftware hat Abkürzungen, um alle Links auf einer Seite aufzulisten. Starker Linktext ist jedoch für alle Benutzer von Vorteil — die Abkürzung "list all links" emuliert, wie sehende Benutzer Seiten schnell scannen.

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

Diese falschen href-Werte verursachen unerwartetes Verhalten beim Kopieren/Ziehen von Links, Öffnen von Links in einem neuen Tab/Fenster, beim Setzen von Lesezeichen oder wenn JavaScript geladen wird, Fehler auftritt oder deaktiviert ist. Sie vermitteln auch inkorrekte Semantik für unterstützende Technologien, wie Bildschirmleser.

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

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

Für Menschen mit Sehbehinderungen, die mithilfe von Screenreader-Technologie navigieren, oder für benutzer mit kognitiven Beeinträchtigungen kann es verwirrend sein, wenn sich unerwartet ein neuer Tab, ein neues Fenster oder eine Anwendung öffnet. Ältere Screenreader-Software kündigt möglicherweise das Verhalten nicht einmal an.

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

<a href="2017-annual-report.ppt">2017 Annual Report (PowerPoint)</a>

Wenn ein Symbol verwendet wird, um das Linkverhalten anzuzeigen, stellen Sie sicher, dass es einen alt-Text hat:

<a target="_blank" href="https://www.wikipedia.org">
  Wikipedia
  <img alt="(opens in new tab)" src="newtab.svg" />
</a>

<a href="2017-annual-report.ppt">
  2017 Annual Report
  <img alt="(PowerPoint file)" src="ppt-icon.svg" />
</a>

Ergebnis

• WebAIM: Links und Hypertext - Hypertext-Links
• MDN / Verständnis der WCAG, Leitlinie 3.2
• G200: Öffnen neuer Fenster und Tabs von einem Link nur, wenn notwendig
• G201: Den Benutzern vorab informieren, wenn sich ein neues Fenster öffnet

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

Ergebnis

Skip-Links ermöglichen es Tastaturbenutzern, Inhalte zu überspringen, die sich auf mehreren Seiten wiederholen, wie beispielsweise die Header-Navigation.

Skip-Links sind besonders nützlich für Personen, die mit unterstützenden Technologien wie Schaltsteuerung, Sprachbefehl oder Mundstöcken/Kopfstifte navigieren, bei denen es mühsam ist, sich durch sich wiederholende Links zu bewegen.

• WebAIM: "Navigation überspringen"-Links
• Anleitung: Verwendung von Skip-Navigation-Links
• MDN / Verständnis der WCAG, Erläuterungen zu Leitlinie 2.4
• Verständnis des Erfolgskriteriums 2.4.1

Größe

Interaktive Elemente wie Links sollten einen Bereich bieten, der groß genug ist, dass es einfach ist, sie zu aktivieren. Dies hilft einer Vielzahl von Menschen, einschließlich derjenigen mit motorischen Problemen 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.

Nur-Text-Links in Prosa-Inhalten sind von dieser Anforderung ausgenommen, aber es ist trotzdem eine gute Idee sicherzustellen, dass genügend 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 Touch-Ziele

Nähe

Interaktive Elemente wie Links, die in enger visueller Nähe platziert sind, sollten durch einen Raum getrennt werden. Der Abstand hilft Menschen mit motorischen Problemen, die möglicherweise versehentlich das falsche interaktive Element aktivieren.

Der Abstand kann mithilfe von CSS-Eigenschaften wie margin erstellt werden.

• Handzittern und das Problem der großen 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

Um Links zu erstellen, die im E-Mail-Programm des Benutzers geöffnet werden, um ihm das Senden einer neuen Nachricht zu ermöglichen, verwenden Sie das mailto:-Schema:

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

Ergebnis

Für Details zu mailto:-URLs, wie z.B. der Einbeziehung eines Betreffs oder Texts, 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:

• 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 z.B. 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 Merkmale und andere Details zum tel:-URL-Schema.

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 angibt:

Beispiel-Malprogramm 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 den Datenschutz der Benutzer haben. Siehe Referer header: privacy and security concerns für Informationen.

Die Verwendung von target="_blank" ohne rel="noreferrer" und rel="noopener" macht die Website anfällig für Angriffe bei der Ausnutzung der window.opener-API, obwohl bemerkt werden sollte, dass in neueren Browserversionen das Setzen von target="_blank" implizit den gleichen Schutz bietet wie das Setzen von rel="noopener". Siehe Browser-Kompatibilität für Details.

• <link> ist ähnlich wie <a>, jedoch für unsichtbare Metadaten-Hyperlinks für Benutzer.
• :link ist eine CSS-Pseudoklasse, die <a>-Elemente mit URL im href-Attribut übereinstimmt, die vom Benutzer noch nicht besucht wurden.
• :visited ist eine CSS-Pseudoklasse, die <a>-Elemente mit URL im href-Attribut übereinstimmt, die der Benutzer in der Vergangenheit besucht hat.
• :any-link ist eine CSS-Pseudoklasse, die <a>-Elemente mit href-Attribut übereinstimmt.
• Textfragmente sind Benutzer-Agent-Anweisungen, die URLs hinzugefügt werden, damit Inhaltsautoren auf spezifischen Text auf einer Seite verlinken können, ohne dass IDs erforderlich sind.