<a>: Das Ankerelement

Die Attribute dieses Elements schließen die globalen Attribute ein.

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 Quellendaten, die mit der navigationsbasierten Attributionsquelle verbunden sind (wie im Attribution-Reporting-Register-Source-Antwortheader angegeben), wenn der Nutzer auf den Link klickt. Siehe die Attribution Reporting API für weitere Details.

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

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

• 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 liegt, den Sie kontrollieren, oder wenn Sie die Registrierung der Attributionsquelle auf einem anderen Server verarbeiten möchten. In diesem Fall können Sie als Wert von attributionsrc eine oder mehrere URLs angeben. Wenn die Ressourcenanforderung auftritt, wird der Attribution-Reporting-Eligible-Header an die in attributionsrc angegebenen URL(s) zusätzlich zu der Ursprungsressource gesendet. Diese URLs können dann mit dem Attribution-Reporting-Register-Source antworten, um die Registrierung abzuschließen.

  Hinweis: Das Angeben mehrerer URLs bedeutet, dass mehrere Attributionsquellen auf demselben Merkmal registriert werden können. Sie könnten zum Beispiel verschiedene Kampagnen haben, deren Erfolg Sie messen möchten, was das Generieren verschiedener Berichte über verschiedene Daten erfordert.

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

download

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

• Ohne Wert schlägt der Browser einen Dateinamen/Extension vor, der aus verschiedenen Quellen generiert wird:

  • Der Content-Disposition HTTP-Header
  • Das letzte Segment im URL-Pfad
  • Der Medientyp (vom Content-Type-Header, vom 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, sodass Browser den vorgeschlagenen Namen bei Bedarf anpassen.

Hinweis:

• download funktioniert nur für gleiche-Ursprungs-URLs oder die blob:- und data:-Schemas.

• Wie Browser Downloads behandeln, variiert je nach Browser, Benutzereinstellungen und anderen Faktoren. Der Nutzer kann vor dem Start eines Downloads aufgefordert werden, oder die Datei kann automatisch gespeichert oder 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 sich das Verhalten unterscheiden:

  • Wenn der Header einen filename spezifiziert, hat er Vorrang gegenüber 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. Alte Firefox-Versionen (vor Version 82) priorisieren den Header und zeigen den Inhalt inline an.

href

Die URL, auf die der Hyperlink zeigt. 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 andere URL-Schemata möglicherweise nicht unterstützen, können Websites dies mit registerProtocolHandler()

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

• Abschnitte einer Seite mit Dokumentfragmenten
• Bestimmte Textpassagen mit Textfragmenten
• Teile von Mediendateien mit Medienfragmenten

hreflang

Gibt die menschliche Sprache der verlinkten URL an. Keine eingebaute Funktionalität. Erlaubte Werte sind dieselben wie für das globale lang-Attribut.

ping

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

referrerpolicy

Wie viel des Referrers beim Folgen des Links gesendet werden soll.

• 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 das Schema, den Host und den Port beschränkt. Navigationen auf demselben Ursprung enthalten weiterhin den Pfad.
• same-origin: Ein Referrer wird für gleichständigen Ursprung gesendet, aber bei Cross-Origin-Anfragen wird keine Referrer-Information gesendet.
• strict-origin: Nur der Ursprung des Dokuments wird als Referrer gesendet, wenn das Sicherheitsniveau des Protokolls dasselbe bleibt (HTTPS→HTTPS), aber nicht an eine weniger sichere Ziel (HTTPS→HTTP).
• strict-origin-when-cross-origin (Standard): Eine vollständige URL wird bei einer Navigation auf demselben Ursprung gesendet, nur der Ursprung wird gesendet, wenn das Sicherheitsniveau des Protokolls dasselbe bleibt (HTTPS→HTTPS), und kein Header wird an eine weniger sichere Ziel (HTTPS→HTTP) gesendet.
• unsafe-url: Der Referrer wird den Ursprung und den Pfad enthalten (aber nicht das Fragment, Passwort oder Benutzernamen). 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 Linktypen.

target

Wo die verlinkte URL angezeigt werden soll, 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 wird:

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

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

type

Gibt den Format des verlinkten URL mit einem MIME-Typ an. Keine eingebaute Funktionalität.

charset Veraltet

Hat auf die Zeichenkodierung der verlinkten URL hingewiesen.

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

coords Veraltet

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

name Veraltet

War erforderlich, um einen möglichen Zielort auf einer Seite zu definieren. In HTML 4.01 konnten 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 umgekehrten Link; das Gegenteil des rel-Attributs. Wegen Verwirrung veraltet.

shape Veraltet

Die Form der Hyperlink-Region in einer Imagemap.

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

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

Nicht barrierefreier, schwacher Linktext

Ein leider häufiger Fehler besteht darin, nur die Wörter "click here" oder "here" zu verlinken:

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

Ergebnis

Starker Linktext

Glücklicherweise lässt sich dies leicht beheben, 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

Hilfssoftware bietet Abkürzungen, um alle Links einer Seite aufzulisten. Starker Linktext kommt jedoch allen Nutzern zugute — die "alle Links auflisten"-Abkürzung emuliert, wie sehende Benutzer schnell Seiten scannen.

Ankerelemente werden oft als falsche 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 hören.

Diese falschen href-Werte verursachen unerwartetes Verhalten beim Kopieren/ziehen von Links, beim Öffnen von Links in einem neuen Tab/Fenster, beim Lesezeichen setzen oder wenn JavaScript geladen wird, Fehler auftreten oder deaktiviert ist. Sie vermitteln auch falsche Semantik an assistive Technologien, wie Bildschirmleser.

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

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

Menschen mit Sehschwächen, die mit Unterstützung von Bildschirmlesetechnologie navigieren, oder mit kognitiven Einschränkungen könnten verwirrt werden, wenn ein neuer Tab, ein neues Fenster oder eine Anwendung unerwartet geöffnet wird. Ältere Screenreader-Software kündigt das Verhalten möglicherweise 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

Wird ein Symbol verwendet, um das Linkverhalten zu signalisieren, stellen Sie sicher, dass es ein alt-Attribut hat, um seinen Zweck zu beschreiben. Falls das Symbol fehlt, wird der Inhalt des alt-Attributes trotzdem 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 / Verständnis von WCAG, Richtlinie 3.2
• G200: Öffnen neuer Fenster und Tabs von einem Link nur bei Bedarf
• G201: Benutzerwarnung vor dem Öffnen eines neuen Fensters

Ein Überspringen-Link ist ein Link, der so früh wie möglich in <body>-Inhalt platziert wird und auf den Beginn des Hauptinhalts der Seite zeigt. Üblicherweise versteckt CSS einen Überspringen-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

Überspringen-Links ermöglichen es Tastaturnutzern, Inhalte, die auf mehreren Seiten wiederholt werden, wie zum Beispiel Header-Navigation, zu überspringen.

Überspringen-Links sind besonders hilfreich für Menschen, die mit der Unterstützung von assistiver Technologie wie Schaltersteuerung, Sprachsteuerung oder Mundstäben/Kopfstäben navigieren, wo das Durchgehen von wiederholenden Links mühsam sein kann.

• WebAIM: "Skip Navigation" Links
• Anleitung: Verwendung von Skip Navigation Links
• MDN / Verständnis von WCAG, Richtlinie 2.4 Erklärungen
• Verständnis der Erfolgskriterien 2.4.1

Größe

Interaktive Elemente, wie Links, sollten eine ausreichend große Fläche bieten, damit sie leicht aktiviert werden können. Dies hilft verschiedenen Menschen, einschließlich denen mit motorischen Problemen und denen, die ungenaue Eingaben wie ein Touchscreen verwenden. Eine Mindestgröße von 44×44 CSS-Pixeln wird empfohlen.

Nur-Text-Links im Fließtext sind von dieser Anforderung ausgenommen, aber es ist dennoch eine gute Idee, sicherzustellen, dass genügend Text verlinkt ist, um leicht aktiviert zu werden.

• Verständnis der Erfolgskriterien 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 Raum voneinander getrennt sein. Abstand hilft Menschen mit motorischen Problemen, die andernfalls versehentlich den falschen interaktiven Inhalt aktivieren könnten.

Abstand kann durch CSS-Eigenschaften wie margin erstellt werden.

• Handzittern und das Riesenknopf-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 öffnen, 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 das Einschließen eines Betreffs oder Textes, 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ätefunktionen:

• 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 mit registerProtocolHandler Anrufe tätigen, wie web.skype.com.
• Andere Verhaltensweisen umfassen das Speichern der Nummer in Kontakten oder das Senden der Nummer zu einem anderen Gerät.

Siehe RFC 3966 für Syntax, zusätzliche Merkmale und andere Details über das 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 bereitstellt:

Beispiel-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 den Datenschutz der Nutzer 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 Angriffe durch Ausnutzung der window.opener-API, obwohl zu beachten ist, dass neuere Browserversionen bei der Einstellung von target="_blank" automatisch denselben Schutz bieten wie bei der Einstellung von rel="noopener". Siehe Browser-Kompatibilität für Details.

• <link> ist dem <a> ähnlich, aber für Metadaten-Hyperlinks, die für Benutzer unsichtbar sind.
• :link ist eine CSS-Pseudoklasse, die <a>-Elemente mit einer URL im href-Attribut, die noch nicht vom Benutzer besucht wurde, übereinstimmen lässt.
• :visited ist eine CSS-Pseudoklasse, die <a>-Elemente mit einer URL im href-Attribut, die vom Benutzer in der Vergangenheit besucht wurde, übereinstimmen lässt.
• :any-link ist eine CSS-Pseudoklasse, die <a>-Elemente mit href-Attribut übereinstimmen lässt.
• Textfragmente sind benutzeragenten-Guidelines, die zu URLs hinzugefügt wurden und es Inhaltsautoren ermöglichen, zu spezifischem Text auf einer Seite zu verlinken, ohne dass IDs erforderlich sind.