<a> HTML-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

Gibt an, dass der Browser den Attribution-Reporting-Eligible-Header senden soll. 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 Quellendaten, die mit der navigationsbasierten Attributionsquelle verbunden sind (wie im Attribution-Reporting-Register-Source-Response-Header 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 einstellen 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 verweist. Dies ist in Ordnung, wenn Sie die Registrierung der Attributionsquelle 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 sich nicht auf einem von Ihnen kontrollierten Server befindet oder wenn Sie die Registrierung der Attributionsquelle auf einem anderen Server durchführen 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 Ursprungsort der Ressource 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 derselben Funktion registriert werden können. Beispielsweise könnten Sie unterschiedliche Kampagnen haben, deren Erfolg Sie messen möchten, indem Sie verschiedene Berichte über unterschiedliche Daten generieren.

<a>-Elemente können nicht als Attributionsauslöser, 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/Ziel vor, der aus verschiedenen Quellen generiert wird:

  • Der Content-Disposition-HTTP-Header
  • Das letzte Segment im URL-Pfad
  • Der Media-Typ (aus dem Content-Type-Header, dem Anfang einer data: URL oder Blob.type für eine blob: URL)

• filename: Ein definierter Wert schlägt ihn als Dateinamen vor. / und \-Zeichen werden in Unterstriche (_) umgewandelt. Dateisysteme können andere Zeichen in Dateinamen verbieten, daher passen Browser den vorgeschlagenen Namen gegebenenfalls an.

Hinweis:

• download funktioniert nur für gleichoriginelle URLs oder die blob:- und data:-Schemata.
• Die Behandlungsweise von Downloads durch Browser variiert je nach Browser, Benutzereinstellungen und anderen Faktoren. Der Benutzer kann aufgefordert werden, bevor ein Download beginnt, oder die Datei kann automatisch gespeichert oder automatisch 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 abweichen:
  • Wenn der Header einen filename angibt, hat dieser 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. Alte 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 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 möglicherweise andere URL-Schemata nicht unterstützen, können Websites dies mit registerProtocolHandler() tun

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

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

interestfor

Definiert das <a>-Element als Interessenauslöser. Sein Wert ist die id des Zielelements, das in irgendeiner Weise beeinflusst wird (normalerweise angezeigt oder verborgen), wenn Interesse am Auslöser-Element gezeigt oder verloren wird (zum Beispiel durch Hovern/Nicht-Hovern oder Fokussierung/Verwischen). Siehe Use interest invokers für weitere Details und Beispiele.

ping

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

referrerpolicy

Wie viel vom Referrer beim Folgen des Links gesendet wird.

• no-referrer: Der Referer-Header wird nicht gesendet.
• no-referrer-when-downgrade: Der Referer-Header wird nicht an Origins ohne TLS (HTTPS) gesendet.
• origin: Der gesendete Referrer wird auf den Origin der referenzierenden Seite begrenzt: Sein Schema, Host und Port.
• origin-when-cross-origin: Der Referrer, der an andere Origins gesendet wird, wird auf das Schema, den Host und den Port begrenzt. Navigationen im selben Origin enthalten weiterhin den Pfad.
• same-origin: Ein Referrer wird für gleichoriginelle Anfragen gesendet, aber plattformübergreifende Anfragen enthalten keine Referrer-Informationen.
• strict-origin: Sendet den Origin des Dokuments nur, wenn das Sicherheitsniveau des Protokolls gleich bleibt (HTTPS→HTTPS), sendet es jedoch nicht an ein weniger sicheres Ziel (HTTPS→HTTP).
• strict-origin-when-cross-origin (Standard): Sendet eine vollständige URL bei einer gleichoriginellen Anfrage, sendet nur den Origin, 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 Origin und den Pfad (aber nicht das Fragment, das Passwort oder den Benutzernamen). Dieser Wert ist unsicher, da er Origins und Pfade von TLS-geschützten Ressourcen an unsichere Origins weitergibt.

rel

Die Beziehung der verlinkten URL als durch Leerzeichen getrennte Link-Typen.

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 für das Laden der URL:

• _self: Der aktuelle Browsing-Kontext. (Standard)
• _blank: Normalerweise ein neuer Tab, aber Benutzer können Browser so konfigurieren, dass stattdessen ein neues Fenster geöffnet wird.
• _parent: Der übergeordnete Browsing-Kontext des aktuellen. Wenn kein übergeordnetes Element 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 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 dennoch erfolgreich ist, wenn dies außerhalb eines fenced frame-Kontexts verwendet wird, aber nicht wie ein reserviertes Schlüsselwort wirkt.

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

type

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

Veraltete Attribute

charset

Deutete auf die Zeichenkodierung der verlinkten URL hin.

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

Wurde mit dem shape-Attribut verwendet. Eine durch Kommas getrennte Liste von Koordinaten.

name

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

Spezifizierte einen umgekehrten Link, das Gegenteil des rel-Attributs. Wegen seiner Verwirrung als veraltet angesehen.

shape

Die Form des Hyperlinks in einem Image-Map.

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

Barrierefreiheit

Starker Linktext

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

Unzugä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

Zum Glück ist dies ein einfacher Fix, und es ist tatsächlich kürzer als die unzugängliche Version!

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

Ergebnis

Assistierende Software hat Abkürzungen, um alle Links auf einer Seite aufzulisten. Starker Linktext kommt jedoch allen Benutzern zugute – die "alle Links auflisten"-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 die Seite aktualisiert wird, und dann auf ihre click-Ereignisse hören.

Diese falschen href-Werte verursachen unerwartetes Verhalten beim Kopieren/Ziehen von Links, Öffnen von Links in einem neuen Tab/Fenster, beim Setzen von Lesezeichen oder wenn JavaScript lädt, Fehler auftreten oder deaktiviert ist. Sie vermitteln auch falsche Semantik an assistierende Technologien, wie Bildschirmleser.

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

Externe Links und Links zu nicht-HTML-Ressourcen

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

Menschen, die an Sehbehinderungen leiden, mit Hilfe von Bildschirmlesetechnologie navigieren oder kognitive Probleme haben, können verwirrt sein, wenn ein neuer Tab, ein neues Fenster oder eine Anwendung unerwartet geöffnet wird. Ältere Bildschirmlesesoftware gibt möglicherweise nicht einmal das Verhalten 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 Verhalten des Links zu signalisieren, stellen Sie sicher, dass es ein alt-Attribut hat, um dessen Zweck zu beschreiben. Für den Fall, dass das Symbol fehlt, wird der Inhalt des alt-Attributes 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 / Understanding WCAG, Guideline 3.2
• G200: Öffnen neuer Fenster und Tabs aus einem Link nur bei Bedarf
• G201: Den Benutzern vorwarnen, wenn ein neues Fenster geöffnet wird

Sprunglinks

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

Ergebnis

Sprunglinks ermöglichen es Tastaturbenutzern, Inhalte zu umgehen, die auf mehreren Seiten wiederholt erscheinen, wie zum Beispiel die Navigation im Header.

Sprunglinks sind besonders nützlich für Personen, die mit Hilfe von assistiver Technologie wie Schaltersteuerung, Sprachbefehl oder Mundstäben/ Kopfstäben navigieren, bei denen das Durchlaufen wiederholter Links mühsam sein kann.

• WebAIM: "Skip Navigation"-Links
• Anleitung: Verwenden von Skip-Navigation-Links
• MDN / Understanding WCAG, Guideline 2.4 explanations
• Understanding Success Criterion 2.4.1

Größe und Nähe

Größe

Interaktive Elemente wie Links sollten eine ausreichend große Fläche bieten, damit sie einfach zu aktivieren sind. Dies hilft einer Vielzahl von Menschen, einschließlich Menschen mit motorischen Problemen und solchen, die ungenaue Eingaben wie einen Touchscreen verwenden. Eine Mindestgröße von 44×44 [CSS-Pixel] (https://w3c.github.io/wcag/guidelines/22/#dfn-css-pixels) wird empfohlen.

Text-Only-Links in Prosa-Inhalt sind von dieser Anforderung ausgenommen, aber es ist trotzdem eine gute Idee, sicherzustellen, dass genug Text hyperlinked ist, damit er leicht aktiviert werden kann.

• Understanding Success Criterion 2.5.5: Target Size
• Target Size und 2.5.5
• Schnelltest: Große Berührungsziele

Nähe

Interaktive Elemente wie Links, die in enger visueller Nähe platziert sind, sollten durch Abstand getrennt werden. Der Abstand hilft Personen mit motorischen Problemen, die sonst möglicherweise das falsche interaktive Element aktivieren könnten.

Der Abstand kann durch CSS-Eigenschaften wie margin hergestellt werden.

• Handzittern und das große Tastenproblem

Beispiele

Verlinken einer absoluten URL

HTML

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

Ergebnis

Verlinken von 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

Link zu einem Element auf der gleichen 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 einer E-Mail-Adresse

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 Hinzufügen eines Betreffs oder Textkörpers, siehe E-Mail-Links oder RFC 6068.

Verlinken von 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 den Fähigkeiten des Geräts:

• 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 Anrufe mit registerProtocolHandler tätigen, wie web.skype.com.
• Andere Verhaltensweisen sind 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.

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 wurden, und das download-Attribut den Dateinamen für die heruntergeladene PNG-Datei liefert:

Beispielmal-App mit Speichern-Link

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: privacy and security concerns für Informationen.

Die Verwendung von target="_blank" ohne rel="noreferrer" und rel="noopener" macht die Website anfällig für Angriffe, die die window.opener API ausnutzen, obwohl neuere Browserversionen das Setzen von target="_blank" implizit denselben Schutz wie das Setzen von rel="noopener" bieten. 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 abgleicht, die noch nicht vom Benutzer besucht wurden.
• :visited ist eine CSS-Pseudoklasse, die <a>-Elemente mit URL im href-Attribut abgleicht, die der Benutzer in der Vergangenheit besucht hat.
• :any-link ist eine CSS-Pseudoklasse, die <a>-Elemente mit href-Attribut abgleicht.
• Textfragmente sind benutzeragenten-basierte Anweisungen, die URLs hinzugefügt werden und es ermöglichen, dass Inhaltsautoren auf spezifischen Text auf einer Seite verlinken, ohne dass zusätzliches Markup erforderlich ist.