<a>: Das Ankerelement

Probieren Sie es aus

<p>You can reach Michael at:</p>

<ul>
  <li><a href="https://example.com">Website</a></li>
  <li><a href="mailto:m.bluth@example.com">Email</a></li>
  <li><a href="tel:+123456789">Phone</a></li>
</ul>

li {
  margin-bottom: 0.5rem;
}

Attribute

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. 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 mit der navigationsbasierten Attributionsquelle verknüpften Quelldaten (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 Name attributionsrc. Dies gibt an, dass Sie möchten, dass der Attribution-Reporting-Eligible-Header an denselben Server gesendet wird, auf den das href-Attribut zeigt. Dies ist in Ordnung, wenn Sie die Registrierung der Attributionsquelle auf demselben Server handhaben.

• Einen oder mehrere URLs als Wert, 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 von Ihnen kontrollierten Server liegt 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 zusätzlich zum Ressourcenursprung an die im attributionsrc angegebenen URL(s) gesendet. Diese URLs können dann mit dem Attribution-Reporting-Register-Source-Header antworten, um die Registrierung abzuschließen.

  Hinweis: Die Angabe mehrerer URLs bedeutet, dass mehrere Attributionsquellen auf derselben Funktion registriert werden können. Sie könnten zum Beispiel verschiedene Kampagnen haben, deren Erfolg Sie messen möchten, was die Erstellung verschiedener Berichte über unterschiedliche Daten umfasst.

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

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: Bei Angabe eines Werts wird dieser als Dateiname vorgeschlagen. / 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 same-origin 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 startet, 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 als das download-Attribut enthält, 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 Disposition von inline angibt, 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 andere URL-Schemata möglicherweise nicht unterstützen, können Websites das über registerProtocolHandler()

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

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

hreflang

Hinweis auf die gesprochene 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 verfolgt wird, sendet der Browser POST-Anfragen mit dem Body PING an die URLs. Typischerweise für das Tracking.

referrerpolicy

Wie viel der Referrer 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 begrenzt: sein Schema, Host und Port.
• origin-when-cross-origin: Der Referrer, der an andere Ursprünge gesendet wird, ist auf das Schema, den Host und den Port begrenzt. Navigationen im gleichen Ursprung enthalten weiterhin den Pfad.
• same-origin: Ein Referrer wird für same-origin gesendet, aber Cross-Origin-Anfragen enthalten keine Referrer-Informationen.
• strict-origin: Senden Sie nur den Ursprung des Dokuments als Referrer, wenn die Sicherheitsstufe des Protokolls gleich bleibt (HTTPS→HTTPS), aber senden Sie den Referrer nicht an ein weniger sicheres Ziel (HTTPS→HTTP).
• strict-origin-when-cross-origin (Standard): Senden Sie die vollständige URL, wenn Sie eine same-origin-Anfrage durchführen, senden Sie nur den Ursprung, wenn die Sicherheitsstufe 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 (jedoch 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 weitergibt.

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 (eine Registerkarte, ein Fenster oder ein <iframe>). Die folgenden Schlüsselwörter haben spezielle Bedeutungen, um anzugeben, wo die URL geladen werden soll:

• _self: Der aktuelle Browsing-Kontext. (Standard)
• _blank: Normalerweise eine neue Registerkarte, aber Benutzer können 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 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: Erlaubt eingebetteten fenced frames, den obersten Rahmen zu navigieren (d.h. über die Wurzel des fenced frame hinaus, im Gegensatz zu anderen reservierten Zielen). Beachten Sie, dass die Navigation immer noch erfolgreich sein wird, wenn dies außerhalb eines fenced frame-Kontextes verwendet wird, aber nicht wie ein reserviertes Schlüsselwort fungiert.

Hinweis: Das Setzen von target="_blank" auf <a>-Elementen gibt implizit das gleiche rel-Verhalten 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.

Veraltete Attribute

charset Veraltet

Hinweis auf die Zeichenkodierung der verlinkten URL.

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

Verwendet mit dem shape-Attribut. Eine kommagetrennte Liste von Koordinaten.

name Veraltet

War erforderlich, um eine mögliche Zielposition 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

Angab einen Rückverweis; das Gegenteil von dem rel-Attribut. Wegen Verwirrung als sehr verwirrend eingestuft.

shape Veraltet

Die Form des Hyperlink-Bereichs in einer Image-Map.

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

Barrierefreiheit

Starker Linktext

Der Inhalt innerhalb eines Links sollte angeben, wohin der Link führt, selbst aus dem Kontext heraus.

Nicht zugänglicher, schwacher Linktext

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 Linktext

Glücklicherweise ist dies eine einfache Lösung, 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

Hilfssoftware hat Abkürzungen, um alle Links auf einer Seite aufzulisten. Starke Linktexte nützen jedoch allen Benutzern — die „Liste aller Links“-Abkürzung emuliert, wie sehende Benutzer Seiten schnell scannen.

onclick-Ereignisse

Ankerelemente werden oft als falsche Schaltflächen missbraucht, indem ihr href auf # oder javascript:void(0) gesetzt wird, um zu verhindern, dass sich die Seite aktualisiert, und dann ihre click-Ereignisse überwacht.

Diese falschen href-Werte verursachen unerwartetes Verhalten beim Kopieren/Draggen von Links, Öffnen von Links in einem neuen Tab/Fenster, Bookmarking oder wenn JavaScript lädt, Fehler auftreten oder deaktiviert ist. Sie vermitteln auch falsche Semantik an Hilfstechnologien wie Screenreader.

Verwenden Sie stattdessen ein <button>. Im Allgemeinen sollte ein Hyperlink nur zur Navigation zu einer echten URL verwendet werden.

Externe Links und Verlinkung zu Nicht-HTML-Ressourcen

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

Personen mit Sehbehinderungen, die mit Unterstützungstechnologie surfen, oder mit kognitiven Herausforderungen können verwirrt sein, wenn ein neuer Tab, ein neues Fenster oder eine neue Anwendung unerwartet geöffnet wird. Ältere Screenreader-Software kündigt das 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, übermittelt der Inhalt des alt-Attributs dennoch das Verhalten des Links.

<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 nur dann aus einem Link, wenn notwendig
• G201: Benutzern vorherige Warnung geben, wenn ein neues Fenster geöffnet wird

Überspringen-Links

Ein Überspringen-Link ist ein Link, der so früh wie möglich im <body>-Inhalt platziert wird und auf den Beginn des Hauptinhalts der Seite verweist. Normalerweise wird ein Überspringen-Link mittels 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: white;
}
.skip-link:focus {
  top: 0;
}

Ergebnis

Überspringen-Links ermöglichen Tastaturnutzern, Inhalte zu umgehen, die sich über mehrere Seiten wiederholen, wie beispielsweise Kopfzeilennavigation.

Überspringen-Links sind besonders nützlich für Personen, die mit Hilfssoftware navigieren, wie z.B. Schaltsteuerung, Sprachkommando oder Mundstäbe/Kopfstäbe, wo das Navigieren durch sich wiederholende 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 des Erfolgskriteriums 2.4.1

Größe und Nähe

Größe

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

Links, die nur aus Text bestehen und in Fließtext eingebettet sind, sind von dieser Anforderung ausgenommen, aber es ist dennoch eine gute Idee sicherzustellen, dass genug 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 werden, sollten durch genügend Abstand getrennt sein. Der Abstand hilft Menschen mit motorischen Problemen, die sonst möglicherweise versehentlich den falschen interaktiven Inhalt aktivieren.

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

• Handzittern und das Problem der riesigen Tasten

Beispiele

Verlinken zu einer absoluten URL

HTML

<a href="https://www.mozilla.com">Mozilla</a>

Ergebnis

Verlinken zu relativen URLs

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

Verlinken zu einem Element auf derselben Seite

<!-- <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

Verlinken zu einer E-Mail-Adresse

Um Links zu erstellen, die im E-Mail-Programm des Benutzers geöffnet werden, damit dieser eine neue Nachricht senden kann, verwenden Sie das mailto:-Schema:

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

Ergebnis

Für Details zu mailto:-URLs, wie beispielsweise das Einfügen eines Betreffs oder Textkörpers, siehe E-Mail-Links oder RFC 6068.

Verlinken zu Telefonnummern

<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ätekapazitäten:

• 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 Telefonanrufe 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 Funktionen und weitere Details zum tel:-URL-Schema.

Verwenden des Download-Attributs, um ein <canvas> als PNG zu speichern

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: white;
  border: 1px dashed;
}
a {
  display: inline-block;
  background: #6699cc;
  color: white;
  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

Sicherheit und Datenschutz

<a>-Elemente können Konsequenzen für die Sicherheit und den Datenschutz der Benutzer 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 in neueren Browserversionen das Setzen von target="_blank" implizit denselben Schutz bietet wie das Setzen von rel="noopener". Siehe Browser-Kompatibilität für Details.

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität

Siehe auch

• <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, auswählt.
• :visited ist eine CSS-Pseudoklasse, die <a>-Elemente mit URL im href-Attribut auswählt, die vom Benutzer in der Vergangenheit besucht wurden.
• :any-link ist eine CSS-Pseudoklasse, die <a>-Elemente mit href-Attribut auswählt.
• Textfragmente sind benutzeragenten Anweisungen, die URLs hinzugefügt werden, um Inhaltsverfassern zu ermöglichen, auf bestimmten Text auf einer Seite zu verlinken, ohne dass IDs erforderlich sind.