<a>: Das Ankerelement

Die Attribute dieses Elements beinhalten die globalen Attribute.

attributionsrc Experimentell

Gibt an, dass der Browser einen Attribution-Reporting-Eligible Header senden soll. 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 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 attributionsrc Name. Dies gibt an, dass der Attribution-Reporting-Eligible Header an denselben Server gesendet werden soll, auf den das href Attribut zeigt. Dies ist geeignet, wenn Sie die Registrierung der Attributionsquelle auf demselben Server durchführen.

• Wert, der eine oder mehrere URLs enthält, zum Beispiel:

  htmlCopy to Clipboard

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

  Dies ist nützlich, wenn die angeforderte Ressource nicht auf einem Server befindet, den Sie kontrollieren, oder Sie die Registrierung der Attributionsquelle auf einem anderen Server vornehmen 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 den Attribution-Reporting-Register-Source antworten, um die Registrierung abzuschließen.

  Hinweis: Mehrere URLs anzugeben bedeutet, dass mehrere Attributionsquellen auf demselben Merkmal registriert werden können. Zum Beispiel könnten Sie verschiedene Kampagnen messen wollen, deren Erfolg die Erstellung unterschiedlicher Berichte über unterschiedliche Daten umfasst.

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

download

Verursacht, dass der Browser die verlinkte URL als Download behandelt. Kann mit oder ohne filename Wert verwendet werden:

• Ohne Wert wird der Browser einen Dateinamen/Erweiterung vorschlagen, generiert aus verschiedenen Quellen:

  • Der Content-Disposition HTTP Header
  • Das finale 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 dieser als Dateiname vorgeschlagen. / und \ Zeichen werden in Unterstriche (_) umgewandelt. Dateisysteme können andere Zeichen in Dateinamen verbieten, daher werden 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 könnte vor Beginn eines Downloads aufgefordert werden, oder die Datei wird automatisch gespeichert, oder es öffnet sich automatisch in einer externen Anwendung oder im Browser selbst.

• Wenn der Content-Disposition Header unterschiedliche Informationen zum download Attribut enthält, können die Ergebnisse abweichen:

  • Wenn der Header einen filename angibt, hat dieser Vorrang vor 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. Alte Firefox-Versionen (vor 82) priorisierten den Header und zeigten die Inhalte 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 andere URL-Schemata möglicherweise nicht unterstützen, können Websites dies mit registerProtocolHandler()

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

• Bereichen einer Seite mit Dokumentfragmenten
• Bestimmten Textabschnitten mit Textfragmenten
• Teilen von Mediendateien mit Medienfragmenten

hreflang

Hinweis auf die menschliche Sprache der verlinkten URL. Keine eingebaute Funktionalität. Erlaubte Werte sind dieselben wie das globale lang Attribut.

ping

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

referrerpolicy

Wie viel des Referrer gesendet wird, wenn dem Link gefolgt wird.

• no-referrer: Der Referer Header wird nicht gesendet.
• no-referrer-when-downgrade: Der Referer Header wird nicht an Ursprungs 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 im selben Ursprung enthalten weiterhin den Pfad.
• same-origin: Ein Referrer wird für denselben Ursprung gesendet, aber Anfragen an Cross-Origin werden keine Referrer-Informationen enthalten.
• strict-origin: Sendet den Ursprung des Dokuments als Referrer nur, wenn die Protokollsicherheitsstufe 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 Anfrage im selben Ursprung, sendet nur den Ursprung, wenn die Protokollsicherheitsstufe 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 Benutzername). 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 der 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: Üblicherweise ein neuer Tab, aber Benutzer können ihre Browser so konfigurieren, dass sie stattdessen ein neues Fenster öffnen.
• _parent: Der übergeordnete Browsing-Kontext des aktuellen. Wenn kein übergeordneter Kontext vorhanden ist, verhält er sich wie _self.
• _top: Der oberste Browsing-Kontext. Konkret bedeutet dies den "höchsten" Kontext, der ein Vorfahre des aktuellen ist. Wenn keine Vorfahren vorhanden sind, verhält er sich wie _self.
• _unfencedTop: Ermöglicht eingebetteten fenced frames, den obersten Frame zu navigieren (d.h. über die Wurzel des fenced frame hinauszugehen, im Gegensatz zu anderen reservierten Zielen). Beachten Sie, dass die Navigation auch außerhalb eines fenced frame Kontextes erfolgreich sein wird, jedoch nicht wie ein reserviertes Schlüsselwort wirkt.

Hinweis: Wenn target="_blank" auf <a> Elementen gesetzt ist, stellt es implizit dasselbe rel Verhalten bereit wie das Setzen von rel="noopener", was window.opener nicht setzt.

type

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

charset Veraltet

Ein Hinweis auf die Zeichenkodierung der verlinkten URL.

Hinweis: Dieses Attribut ist veraltet und sollte von Autoren nicht verwendet werden. Verwenden Sie 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 des rel Attributs. Veraltet wegen sehr verwirrender Implementierung.

shape Veraltet

Die Form der Hyperlink-Region in einer Image-Map.

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

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

Glücklicherweise ist dies eine einfache Korrektur, und sie 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 Kurzbefehle, um alle Links auf einer Seite aufzulisten. Starker Linktext kommt jedoch allen Benutzern zugute — der "Alle Links auflisten" Kurzbefehl emuliert, wie sehende Benutzer Seiten schnell scannen.

Ankerelemente werden oft als gefälschte Buttons 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 gefälschten href Werte verursachen unerwartetes Verhalten beim Kopieren/Ziehen von Links, Öffnen von Links in einem neuen Tab/Fenster, Bookmarking oder wenn JavaScript geladen, fehlerhaft oder deaktiviert ist. Sie vermitteln auch falsche Semantik an unterstützende Technologien, wie Bildschirmleser.

Verwenden Sie stattdessen ein <button>. Generell sollten Sie einen Hyperlink nur zur Navigation zu einer realen URL verwenden.

Links, die in einem neuen Tab/Fenster öffnen via target="_blank", oder Links, die auf eine Download-Datei verweisen, sollten angeben, was passiert, wenn der Link verfolgt wird.

Menschen mit Sehbehinderungen, die mit Hilfe von Bildschirmlesetechnologien navigieren, oder mit kognitiven Problemen, könnten verwirrt sein, wenn sich ein neuer Tab, ein Fenster oder eine Anwendung unerwartet öffnet. Ältere Bildschirmlesesoftware kündigt dieses Verhalten möglicherweise nicht einmal an.

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 signalisieren, stellen Sie sicher, dass es ein alt Attribut hat, um seinen Zweck zu beschreiben. Falls das Symbol fehlt, wird der Inhalt des alt Attributs immer noch das Linkverhalten 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 der WCAG, Leitlinie 3.2
• G200: Neue Fenster und Tabs von einem Link nur öffnen, wenn notwendig
• G201: Den Benutzern 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, der zum Anfang des Hauptinhalts der Seite führt. Normalerweise wird ein Skip-Link durch CSS vom Bildschirm verborgen, bis er im Fokus steht.

<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 Menschen, die mit Hilfe assistiver Technologien wie Schaltersteuerung, Sprachbefehlen oder Saugrohr/Kopfstäben navigieren, wo das Durchlaufen sich wiederholender Links mühsam sein kann.

• WebAIM: "Skip Navigation" Links
• Anleitung: Skip Navigation Links verwenden
• MDN / Verständnis der 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, dass es einfach ist, sie zu aktivieren. Dies hilft einer Vielzahl von Personen, einschließlich Personen mit motorischen Steuerungsproblemen und solchen, die ungenaue Eingaben wie einen Touchscreen verwenden. Eine Mindestgröße von 44×44 CSS-Pixeln wird empfohlen.

Reine Textlinks in Proseinhalten sind von dieser Anforderung freigestellt, aber es ist dennoch eine gute Idee, sicherzustellen, dass genügend Text hyperlinked 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 sein. Das Einfügen von Abständen hilft Personen mit motorischen Steuerungsproblemen, die sonst möglicherweise versehentlich das falsche interaktive Element aktivieren.

Abstände können mittels CSS-Eigenschaften wie margin geschaffen werden.

• Handzittern und das Problem mit großen Buttons

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 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ätefähigkeit:

• 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 Telefonate mit registerProtocolHandler durchführen, 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 andere Details zum tel: URL-Schema.

Um den Inhalt eines <canvas> Elements als Bild zu speichern, können Sie einen Link erstellen, bei dem href die Canvas-Daten als eine vom JavaScript erstellte data: URL ist und das download Attribut den Dateinamen für die heruntergeladene PNG-Datei bereitstellt:

Beispiel einer Malanwendung 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 Benutzer-Sicherheit und den Datenschutz 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 Setzen von target="_blank" implizit denselben Schutz wie das Setzen von rel="noopener" bietet. Sehen Sie die 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 auf <a> Elemente mit URL im href Attribut zutrifft, die vom Benutzer noch nicht besucht wurden.
• :visited ist eine CSS-Pseudoklasse, die auf <a> Elemente mit URL im href Attribut zutrifft, die in der Vergangenheit vom Benutzer besucht wurden.
• :any-link ist eine CSS-Pseudoklasse, die auf <a> Elemente mit href Attribut zutrifft.
• Textfragmente sind Anweisungen des User-Agents, die URLs hinzugefügt werden und es Inhaltsautoren erlauben, zu spezifischem Text auf einer Seite zu verlinken, ohne dass IDs erforderlich sind.