<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 beinhalten 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 Quelldaten, die mit der navigationsbasierten Attributionsquelle verbunden sind (wie im Header der Attribution-Reporting-Register-Source-Antwort 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 einstellen 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 verweist. Dies ist in Ordnung, wenn Sie die Registrierung der Attributionsquelle auf demselben Server behandeln.

• 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 Attributionsquelle auf einem anderen Server behandeln 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 Ursprungsort der Ressource an die in attributionsrc angegebenen URLs 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 Attributionsquellen auf derselben Funktion registriert werden können. Sie könnten beispielsweise verschiedene Kampagnen haben, deren Erfolg Sie messen möchten und die das Generieren verschiedener Berichte zu unterschiedlichen Daten beinhalten.

<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 einen filename-Wert verwendet werden:

• Ohne Wert schlägt der Browser einen Dateinamen/Erweiterung vor, der 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: Wenn ein Wert definiert ist, wird dieser als Dateiname vorgeschlagen. / 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 same-origin-URLs oder die blob: und data: Schemes.
• Wie Browser Downloads behandeln, hängt vom Browser, den Benutzereinstellungen und anderen Faktoren ab. Der Benutzer könnte aufgefordert werden, bevor ein Download beginnt, oder die Datei könnte automatisch gespeichert oder automatisch geöffnet werden, entweder in einer externen Anwendung oder im Browser selbst.
• Wenn der Content-Disposition-Header unterschiedliche Informationen vom download-Attribut enthält, können die resultierenden Verhaltensweisen variieren:
  • 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. Alte Firefox-Versionen (vor Version 82) priorisieren den Header und zeigen den Inhalt inline an.

href

Die URL, auf die der Hyperlink verweist. Links sind nicht nur 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 keine anderen URL-Schemata unterstützen, können Websites dies mit registerProtocolHandler()

Zudem können andere URL-Funktionen bestimmte Teile der Ressource lokalisieren, einschließlich:

• Abschnitte einer Seite mit Dokumentfragmenten
• Bestimmte Textabschnitte mit Textfragmenten
• Stücke von Mediendateien mit Medienfragmenten

hreflang

Gibt einen Hinweis auf die menschliche 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 Körper PING an die URLs. Typischerweise für das Tracking.

referrerpolicy

Wie viel von der Referrer zu senden ist, 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, ist 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 gleichartigen Ursprung gesendet, aber bereichsübergreifende Anfragen enthalten keine Referrer-Informationen.
• strict-origin: Nur den Ursprung des Dokuments als Referrer senden, wenn die Sicherheit des Protokolls gleich bleibt (HTTPS→HTTPS), aber nicht an ein weniger sicheres Ziel senden (HTTPS→HTTP).
• strict-origin-when-cross-origin (standardmäßig): Senden einer vollständigen URL, wenn eine Anfrage innerhalb des gleichen Ursprungs durchgeführt wird, nur den Ursprung senden, wenn die Sicherheit des Protokolls gleich bleibt (HTTPS→HTTPS), und keinen Header an ein weniger sicheres Ziel senden (HTTPS→HTTP).
• unsafe-url: Der Referrer enthält den Ursprung und den Pfad (aber nicht das Fragment, das Passwort oder den Benutzernamen). Dieser Wert ist unsicher, da er Ursprünge und Pfade von TLS-geschützten Ressourcen an unsichere Ursprünge weiterleitet.

rel

Die Beziehung der verlinkten URL als durch Leerzeichen getrennte Linktypen.

target

Wo die verlinkte URL angezeigt werden soll, als der Name eines Surfkontextes (ein Tab, Fenster oder <iframe>). Die folgenden Schlüsselwörter haben spezielle Bedeutungen, wo die URL geladen werden soll:

• _self: Der aktuelle Surfkontext. (Standard)
• _blank: Normalerweise ein neuer Tab, aber Benutzer können Browser so konfigurieren, dass stattdessen ein neues Fenster geöffnet wird.
• _parent: Der übergeordnete Surfkontext des aktuellen. Wenn kein Elternteil vorhanden ist, verhält sich wie _self.
• _top: Der oberste Surfkontext. Genauer gesagt, dies bedeutet der "höchste" Kontext, der ein Vorfahr des aktuellen ist. Wenn keine Vorfahren vorhanden sind, verhält sich wie _self.
• _unfencedTop: Ermöglicht eingebetteten eingezäunten Frames, das Top-Level-Frame zu navigieren (d.h. über die Wurzel des eingezäunten Rahmens hinaus zu traversieren, im Gegensatz zu anderen reservierten Zielen). Beachten Sie, dass die Navigation immer noch erfolgreich sein wird, wenn dies außerhalb eines eingezäunten Frame-Kontexts verwendet wird, aber es wird nicht wie ein reserviertes Schlüsselwort handeln.

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

type

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

Veraltete Attribute

charset Veraltet

Gab einen 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

Wurde mit dem shape-Attribut verwendet. Eine kommagetrennte 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 von dem rel-Attribut. Veraltet, da sehr verwirrend.

shape Veraltet

Die Form des Hyperlink-Bereichs in einer Bildkarte.

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

Barrierefreiheit

Starker Link-Text

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

Nicht zugänglicher, schwacher Link-Text

Ein leider häufiger Fehler ist, 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 einfach 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

Assistierende Software bietet Abkürzungen, um alle Links auf einer Seite aufzulisten. Dennoch profitieren alle Nutzer von starkem Link-Text — die "Liste aller Links"-Abkürzung emuliert, wie sehende Nutzer Seiten schnell scannen.

onclick-Ereignisse

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 gefälschten href-Werte verursachen unerwartetes Verhalten beim Kopieren/Verschieben von Links, beim Öffnen von Links in einem neuen Tab/Fenster, beim Lesezeichen setzen oder wenn JavaScript geladen wird, Fehler auftreten oder deaktiviert ist. Sie vermitteln auch falsche Semantik an assistive Technologien, wie Screenreader.

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

Externe Links und Links zu Nicht-HTML-Ressourcen

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

Personen mit Sehbehinderungen, die mit Hilfe von Vorlesetechnologien navigieren, oder mit kognitiven Herausforderungen können verwirrt sein, wenn sich unerwartet ein neuer Tab, ein Fenster oder eine Anwendung öffnet. Ä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 besitzt, um seinen Zweck zu beschreiben. Sollte das Symbol fehlen, 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 / Das Verstehen von WCAG, Leitlinie 3.2
• G200: Öffnen neuer Fenster und Tabs von einem Link nur dann, wenn es notwendig ist
• G201: Einem Nutzer eine Vorwarnung geben, wenn ein neues Fenster geöffnet wird

Sprunglinks

Ein Sprunglink ist ein Link, der so früh wie möglich im Inhalt des <body> platziert wird und auf den Beginn des Hauptinhalts der Seite zeigt. Normalerweise wird ein Sprunglink mit CSS ausgeblendet, bis er fokussiert ist.

<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 Tastaturbenutzern das Überspringen von Inhalten, die auf mehreren Seiten wiederholt werden, wie z. B. die Kopfzeilennavigation.

Sprunglinks sind besonders nützlich für Menschen, die mit Hilfe von unterstützenden Technologien wie Schaltsteuerungen, Sprachbefehlen oder Mundstöcken/Kopfstiften navigieren, bei denen das Durchlaufen von sich wiederholenden Links mühsam sein kann.

• WebAIM: "Skip Navigation"-Links
• Anleitung: Verwenden von Sprunglinks
• MDN / Das Verstehen von WCAG, Leitlinie 2.4 Erklärungen
• Erklärung 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 Personen, einschließlich derer mit motorischen Problemen und derer, die ungenaue Eingaben wie Touchscreens verwenden. Eine Mindestgröße von 44×44 CSS-Pixeln wird empfohlen.

Text-only-Links in Prosa-Inhalten sind von dieser Anforderung ausgenommen, aber es ist dennoch eine gute Idee, sicherzustellen, dass genügend Text hyperverlinkt 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 Abstand zueinander haben. Der Abstand hilft Menschen mit motorischen Problemen, die andernfalls versehentlich das falsche interaktive Element aktivieren könnten.

Abstand kann mit CSS-Eigenschaften wie margin erstellt werden.

• Handzittern und das Problem großer Schaltflächen

Beispiele

Verlinken einer absoluten URL

HTML

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

Ergebnis

Verlinken relativer 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 sie eine neue Nachricht senden können, verwenden Sie das mailto:-Schema:

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

Ergebnis

Weitere Details zu mailto:-URLs, z.B. das Einschließen eines Betreffs oder eines Textkörpers, finden Sie in 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:

• Mobilfunkgeräte 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 Anrufe 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 Syntax, zusätzliche Merkmale und andere Details zum tel:-URL-Schema.

Verwendung 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 angibt:

Beispiel-Applikation zum Malen 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 Privatsphäre

<a>-Elemente können Konsequenzen für die Sicherheit und Privatsphäre 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 neuere Browserversionen durch Setzen von target="_blank" implizit denselben Schutz wie das Setzen von rel="noopener" bieten. Weitere Details finden Sie in der Browser-Kompatibilität.

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität

Siehe auch

• <link> ist ähnlich zu <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 matcht, das vom Benutzer noch nicht besucht wurde.
• :visited ist eine CSS-Pseudoklasse, die <a>-Elemente mit URL im href-Attribut matcht, die der Benutzer in der Vergangenheit besucht hat.
• :any-link ist eine CSS-Pseudoklasse, die <a>-Elemente mit href-Attribut matcht.
• Textfragmente sind Benutzeranweisungen, die URLs hinzugefügt werden, um Inhaltsautoren zu ermöglichen, auf spezifischen Text auf einer Seite zu verlinken, ohne dass IDs erforderlich sind.