<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. Auf der Serverseite wird dies verwendet, um das Senden eines Attribution-Reporting-Register-Source-Headers in der Antwort auszulösen, um eine navigationsbasierte Zuordnungsquelle zu registrieren.

Der Browser speichert die Quelldaten, die der navigationsbasierten Zuordnungsquelle zugeordnet sind (wie im Attribution-Reporting-Register-Source-Antwortheader angegeben), wenn der Benutzer auf den Link klickt. Weitere Einzelheiten 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 hinweist. Dies ist in Ordnung, wenn Sie die Registrierung der Zuordnungsquelle auf demselben Server verwalten.

• 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 wenn Sie die Registrierung der Zuordnungsquelle auf einem anderen Server verwalten 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 zusätzlich zum Ursprung der Ressource an die in attributionsrc angegebenen URL(s) 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 Zuordnungsquellen auf derselben Funktion registriert werden können. Sie könnten zum Beispiel verschiedene Kampagnen haben, deren Erfolg Sie messen möchten, indem Sie unterschiedliche Berichte zu unterschiedlichen Daten erstellen.

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

download

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

• Ohne einen Wert schlägt der Browser einen Dateinamen / eine 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, der 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 (_) konvertiert. Dateisysteme können andere Zeichen in Dateinamen verbieten, sodass Browser den vorgeschlagenen Namen bei Bedarf anpassen.

Hinweis:

• download funktioniert nur für gleich-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 gefragt werden, oder die Datei wird automatisch gespeichert oder automatisch geöffnet, entweder in einer externen Anwendung oder im Browser selbst.

• Wenn der Content-Disposition-Header andere Informationen enthält als das download-Attribut, können sich die resultierenden Verhaltensweisen 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 zeigt. 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 mit registerProtocolHandler() unterstützen

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

• Abschnitte einer Seite mit Dokumentfragmenten
• 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 Text PING an die URLs. Typischerweise für das Tracking.

referrerpolicy

Wie viele der Referer gesendet werden sollen, wenn dem Link gefolgt wird.

• no-referrer: Der Referer-Header wird nicht gesendet.
• no-referrer-when-downgrade: Der Referer-Header wird nicht an Herkunft ohne TLS (HTTPS) gesendet.
• origin: Der gesendete Referrer wird auf die Herkunft der referenzierenden Seite beschränkt: ihr Schema, Host und Port.
• origin-when-cross-origin: Der gesendete Referrer an andere Herkünfte wird auf das Schema, den Host und den Port beschränkt. Navigationen in derselben Herkunft umfassen weiterhin den Pfad.
• same-origin: Ein Referrer wird für gleich-origine gesendet, aber länderübergreifende Anfragen enthalten keine Referrer-Informationen.
• strict-origin: Senden Sie nur die Herkunft 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): Senden Sie eine vollständige URL bei der Durchführung einer Herkunftsnavigation, senden Sie nur die Herkunft, 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 die Herkunft und den Pfad (aber nicht das Fragment, das Passwort oder den Benutzernamen). Dieser Wert ist unsicher, da er Herkünfte und Pfade von TLS-geschützten Ressourcen an unsichere Herkünfte 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 werden soll:

• _self: Der aktuelle Browsing-Kontext. (Standard)
• _blank: Normalerweise ein neuer Tab, aber Benutzer können Browser so konfigurieren, dass ein neues Fenster geöffnet wird.
• _parent: Der übergeordnete Browsing-Kontext des aktuellen. Wenn kein übergeordneter, verhält 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, verhält sich wie _self.
• _unfencedTop: Ermöglicht eingebetteten umzäunten Frames, den obersten Frame zu navigieren (d.h. über die Wurzel des umzäunten Frames hinausgehend, im Gegensatz zu anderen reservierten Zielen). Beachten Sie, dass die Navigation dennoch erfolgreich sein wird, wenn dies außerhalb eines umzäunten Frame-Kontexts verwendet wird, aber es wird nicht wie ein reserviertes Schlüsselwort agieren.

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

type

Gibt einen Hinweis auf das Format der verlinkten URL mit einem MIME-Typ. Keine eingebaute 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 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 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 des rel-Attributs. Veraltet, da es sehr verwirrend ist.

shape Veraltet

Die Form der Hyperlink-Region in einer Bildkarte.

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

Der Text innerhalb eines Links sollte anzeigen, wohin der Link geht, selbst 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

Ausdrückliche Linktexte

Glücklicherweise ist dies leicht zu 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

Assistive Software hat Abkürzungen, um alle Links auf einer Seite aufzulisten. Stark formulierte Linktexte sind jedoch für alle Nutzer von Vorteil — die Abkürzung "alle Links auflisten" emuliert, wie sehende Nutzer Seiten schnell überfliegen.

Anker-Elemente werden häufig als Fake-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 gelauscht wird.

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

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 öffnen via target="_blank", oder Links, die auf eine Download-Datei zeigen, sollten anzeigen, was passieren wird, wenn dem Link gefolgt wird.

Menschen mit Sehschwächen, die mit Hilfe von Bildschirmlesetechnologie navigieren oder kognitive Bedenken haben, könnten verwirrt sein, wenn ein neuer Tab, ein Fenster oder eine Anwendung unerwartet geöffnet wird. Ältere Bildschirmlesesoftware 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

Wenn ein Symbol verwendet wird, um das Verhalten des Links 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 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, Leitlinie 3.2
• G200: Öffnen von neuen Fenstern und Tabs von einem Link nur bei Notwendigkeit
• G201: Den Benutzern im Voraus 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 Beginn des Hauptinhalts der Seite zeigt. 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 Tastaturnutzern, Inhalte zu umgehen, die auf mehreren Seiten wiederholt werden, z. B. die Header-Navigation.

Skip-Links sind besonders hilfreich für Menschen, die mit Unterstützungstechnologie wie Schaltersteuerung, Sprachbefehlen oder Mundsticks/Kopfstäben navigieren, da das Durchgehen von sich wiederholenden Links mühsam sein kann.

• WebAIM: "Skip Navigation"-Links
• Anleitung: Verwendung von Skip-Navigation-Links
• MDN / Verständnis von WCAG, Leitlinie 2.4 Erklärungen
• Verständnis des Erfolgskriteriums 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 Menschen mit motorischen Problemen und solchen, die ungenaue Eingaben wie Touchscreens verwenden. Eine Mindestgröße von 44×44 CSS-Pixeln wird empfohlen.

Nur aus Text bestehende Links in Prosainhalt sind von dieser Anforderung ausgenommen, es ist jedoch dennoch 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 Abstand voneinander haben. Der Abstand erleichtert Menschen mit motorischen Problemen, die andernfalls versehentlich das falsche interaktive Element aktivieren könnten.

Der Abstand kann mit CSS-Eigenschaften wie margin erstellt werden.

• Handtremoren 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 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 Einfügen eines Betreffs oder Texts, siehe Email-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 verfügen über Programme, die Anrufe tätigen können, wie Skype oder FaceTime.
• Websites können Anrufe tätigen mit registerProtocolHandler, 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 Funktionen und weitere 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-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 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 Exploitation-Angriffe über die window.opener-API, obwohl in neueren Browserversionen 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>, jedoch 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 alle <a>-Elemente mit href-Attribut übereinstimmt.
• Textfragmente sind Benutzeranweisungen, die URLs hinzugefügt werden, um Inhaltsautoren das Verlinken zu bestimmten Textstellen auf einer Seite zu ermöglichen, ohne dass IDs erforderlich sind.