<a>: Das Anker-Element

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. Auf 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 verknüpft sind (wie im Attribution-Reporting-Register-Source-Antwortheader angegeben), wenn der Benutzer 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. Dies gibt an, dass Sie den Attribution-Reporting-Eligible-Header an denselben Server senden möchten, auf den das href-Attribut verweist. Dies ist in Ordnung, 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 von Ihnen kontrollierten Server liegt 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 Ressourcenanfrage erfolgt, wird der Attribution-Reporting-Eligible-Header zusätzlich zum Ursprungsort der Ressource an die in attributionsrc angegebenen URLs gesendet. Diese URLs können dann mit dem Attribution-Reporting-Register-Source antworten, um die Registrierung abzuschließen.

  Hinweis: Durch Angabe mehrerer URLs können mehrere Attributionsquellen an derselben Funktion registriert werden. Sie könnten zum Beispiel verschiedene Kampagnen haben, deren Erfolg Sie messen möchten, was das Erstellen verschiedener Berichte auf unterschiedlichen Daten beinhaltet.

<a>-Elemente können nicht als Attributionstrigger 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, die 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: definiert einen Wert als vorgeschlagenen Dateinamen. /- 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 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 hat, kann das resultierende Verhalten unterschiedlich sein:
  • Wenn der Header einen filename angibt, hat dieser Vorrang vor einem im download-Attribut angegebenen Dateinamen.
  • Wenn der Header eine Anordnung von inline spezifiziert, geben Chrome und Firefox dem Attribut Vorrang 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 möglicherweise andere URL-Schemata nicht unterstützen, können Websites dies mit registerProtocolHandler() tun.

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

• Abschnitte einer Seite mit Dokument-Fragmenten
• Bestimmte 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 für das Tracking.

referrerpolicy

Wie viel vom Referrer 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: ihr 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 im gleichen Ursprung enthalten dennoch den Pfad.
• same-origin: Ein Referrer wird für dasselbe Herkunft gesendet, aber Cross-Origin-Anfragen 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 Same-Origin-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 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 leerzeichengetrennte 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 besondere 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 statt eines neuen Tabs 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. Genauer gesagt bedeutet dies 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 eingezäunten Frames, das oberste Frame zu navigieren (d.h. jenseits der Wurzel des eingezäunten Frames zu navigieren, im Gegensatz zu anderen reservierten Zielen). Beachten Sie, dass die Navigation trotzdem erfolgreich ist, wenn dies außerhalb eines eingezäunten Frame-Kontextes verwendet wird, aber nicht wie ein reserviertes Schlüsselwort handelt.

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

type

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

charset Veraltet

Gab den Zeichensatz der verlinkten URL an.

Hinweis: Dieses Attribut ist veraltet und sollte nicht von Autoren verwendet werden. Verwenden Sie den HTTP Content-Type-Header auf der verlinkten 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 sowohl id als auch name auf <a> verwendet werden, sofern sie identische Werte hatten.

Hinweis: Verwenden Sie stattdessen das globale Attribut id.

rev Veraltet

Gab einen umgekehrten Link an; das Gegenteil von dem rel-Attribut. Veraltet, weil es sehr verwirrend ist.

shape Veraltet

Die Form des Hyperlink-Bereichs 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 aus dem Zusammenhang heraus.

Unzugä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 leicht zu beheben, und es ist tatsächlich kürzer als die unzugängliche Version!

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

Ergebnis

Assistive Software hat Abkürzungen, um alle Links auf einer Seite aufzulisten. Starker Link-Text kommt jedoch allen Benutzern zugute — die Abkürzung "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 zu hören.

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

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 herunterladbare Datei verweisen, sollten angeben, was passiert, wenn dem Link gefolgt wird.

Personen mit Sehbehinderungen, die sich mit der Hilfe von Bildschirmlesetechnologie fortbewegen, oder mit kognitiven Bedenken können verwirrt sein, wenn unerwartet ein neuer Tab, ein neues Fenster oder eine Anwendung geöffnet wird. Ältere Bildschirmlese-Software gibt 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 Symbol verwendet wird, um das Linkverhalten zu symbolisieren, stellen Sie sicher, dass es ein alt-Attribut hat, um seinen Zweck zu beschreiben. Falls das Symbol 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 / Verständnis von WCAG, Richtlinie 3.2
• G200: Nur dann neue Fenster und Tabs von einem Link öffnen, wenn es notwendig ist
• G201: Benutzer über neue Fenster informieren

Ein Skip-Link ist ein Link, der so früh wie möglich im Inhalt von <body> platziert wird und auf den Beginn des Hauptinhalts der Seite verweist. In der Regel wird ein Skip-Link mit CSS ausgeblendet, 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 erlauben es Tastaturnutzern, Inhalte zu überspringen, die sich auf mehreren Seiten wiederholen, wie z.B. die Header-Navigation.

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

• WebAIM: "Skip Navigation"-Links
• Anleitung: Skip Navigation-Links verwenden
• MDN / Verständnis von WCAG, Richtlinie 2.4-Erklärungen
• Erklärung des Erfolgskriteriums 2.4.1

Größe

Interaktive Elemente, wie Links, sollten eine Fläche bereitstellen, die groß genug ist, um sie leicht zu aktivieren. Dies hilft einer Vielzahl von Personen, einschließlich solcher mit motorischen Steuerproblemen und solchen, die ungenaue Eingaben verwenden, wie ein Touchscreen. Eine Mindestgröße von 44×44 [CSS-Pixel] ist empfohlen.

Textbasierte Links in Fließtext sind von dieser Anforderung ausgenommen, aber es ist dennoch eine gute Idee, sicherzustellen, dass genügend Text verlinkt ist, um leicht aktiviert werden zu können.

• Erklärung 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 Raum zwischen ihnen haben. Abstand hilft Personen mit motorischen Steuerproblemen, die ansonsten versehentlich das falsche interaktive Element aktivieren könnten.

Abstand kann mit CSS-Eigenschaften wie margin erstellt werden.

• Handzittern und das Problem der riesigen Tasten

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 sich im E-Mail-Programm des Benutzers öffnen, damit sie eine neue Nachricht senden können, 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 Einfügen eines Betreffs oder Körpers, 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 die Nummer automatisch.
• Die meisten Betriebssysteme haben Programme, die Anrufe tätigen können, wie Skype oder FaceTime.
• Websites können mit registerProtocolHandler Telefonanrufe 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 die Syntax, zusätzliche Funktionen 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 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 den Datenschutz von Benutzern 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 Ausnutzung der window.opener API durch Angriffe, obwohl zu beachten ist, dass in neueren Browser-Versionen das Setzen von target="_blank" implizit denselben Schutz wie das Setzen von rel="noopener" bietet. 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, die vom Benutzer noch nicht besucht wurden, übereinstimmt.
• :visited ist eine CSS-Pseudoklasse, die <a>-Elemente mit URL im href-Attribut, die vom Benutzer in der Vergangenheit besucht wurden, übereinstimmt.
• :any-link ist eine CSS-Pseudoklasse, die <a>-Elemente mit href-Attribut übereinstimmt.
• Textfragmente sind Anweisungen des Benutzeragents, die URLs hinzugefügt werden und es Inhaltsautoren ermöglichen, auf bestimmte Texte auf einer Seite zu verlinken, ohne dass IDs erforderlich sind.