<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

Diese Attribute des Elements umfassen die globalen Attribute.

attributionsrc Experimentell

Gibt an, dass Sie möchten, dass der Browser einen Attribution-Reporting-Eligible-Header sendet. Serverseitig 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 quellbezogenen Daten, die mit der navigationsbasierten Attributionsquelle verbunden sind (wie im Attribution-Reporting-Register-Source-Antwortheader bereitgestellt), wenn der Benutzer auf den Link klickt. Siehe die Attribution Reporting API für weitere Details.

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 verweist. Das 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 nicht auf einem Server liegt, den Sie kontrollieren, oder Sie möchten die Registrierung der Attributionsquelle auf einem anderen Server verwalten. 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 URLs zusätzlich zum Ursprungsserver 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 für dasselbe Feature registriert werden können. Sie könnten zum Beispiel verschiedene Kampagnen messen wollen, die das Erstellen unterschiedlicher Berichte über verschiedene Daten beinhalten.

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

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 werden:

  • 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: Definiert man einen Wert, 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 gleich-originierte URLs oder die blob:- und data:-Schemas.
• Wie Browser Downloads behandeln, variiert je nach Browser, Benutzereinstellungen und anderen Faktoren. Möglicherweise wird der Benutzer vor Beginn eines Downloads aufgefordert, oder die Datei wird automatisch gespeichert oder sie wird automatisch geöffnet, 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 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, bevorzugen Chrome und Firefox das Attribut und behandeln es als Download. Ältere Firefox-Versionen (vor 82) bevorzugen 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 möglicherweise andere URL-Schemas nicht unterstützen, können Websites dies mit registerProtocolHandler()

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

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

hreflang

Gibt die menschliche Sprache der verlinkten URL an. Keine eingebaute Funktionalität. Erlaubte Werte sind die gleichen wie das globale lang-Attribut.

interestfor Experimentell Nicht standardisiert

Definiert das <a>-Element als einen Interessenbearbeiter. Sein Wert ist die id des Zielelements, das auf irgendeine Weise betroffen sein wird (normalerweise angezeigt oder verborgen), wenn Interesse am Bearbeitungselement gezeigt oder verloren geht (zum Beispiel durch Überfahren/Verlassen oder Fokussieren/Entfokussieren). Siehe Using interest invokers für weitere Details und Beispiele.

ping

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

referrerpolicy

Wie viel des Referrers 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 beschränkt: ihr Schema, Host und Port.
• origin-when-cross-origin: Der Referrer, der an andere Ursprünge gesendet wird, wird auf das Schema, den Host und den Port beschränkt. Navigationen auf demselben Ursprung enthalten weiterhin den Pfad.
• same-origin: Ein Referrer wird für gleich-originierte Anfragen gesendet, aber datenübergreifende Anfragen enthalten keine Referrer-Informationen.
• strict-origin: Sendet nur den Ursprung des Dokuments als Referrer, wenn das Sicherheitsniveau des Protokolls gleich bleibt (HTTPS→HTTPS), sendet ihn jedoch nicht an ein weniger sicheres Ziel (HTTPS→HTTP).
• strict-origin-when-cross-origin (Standard): Sendet eine vollständige URL, wenn eine gleich-originierte Anfrage durchgeführt wird, sendet nur den Ursprung, wenn das Sicherheitsniveau des Protokolls gleich bleibt (HTTPS→HTTPS), und sendet keinen Header an ein weniger sicheres Ziel (HTTPS→HTTP).
• unsafe-url: Der Referrer umfasst 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 auf unsichere Ursprünge leakt.

rel

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

target

Wo die verlinkte URL angezeigt wird, als der Name für ein Browsing-Context (ein Tab, Fenster oder <iframe>). Die folgenden Schlüsselwörter haben besondere Bedeutungen dafür, wo die URL geladen werden soll:

• _self: Der aktuelle Browsing-Context. (Standard)
• _blank: Normalerweise ein neuer Tab, aber Benutzer können Browser konfigurieren, um stattdessen ein neues Fenster zu öffnen.
• _parent: Der übergeordnete Browsing-Context des aktuellen. Wenn kein übergeordneter Kontext vorhanden ist, verhält er sich wie _self.
• _top: Der oberste Browsing-Context. Genauer gesagt, der "höchste" Kontext, der ein Vorfahre des aktuellen ist. Wenn keine Vorfahren vorhanden sind, verhält er sich wie _self.
• _unfencedTop: Ermöglicht eingebetteten abgetrennten Frames, das oberste Frame zu navigieren (d.h. jenseits der Wurzel des abgetrennten Frames zu wechseln, im Gegensatz zu anderen reservierten Zielen). Beachten Sie, dass die Navigation immer noch erfolgreich sein wird, wenn dies außerhalb eines abgetrennten Frame-Kontexts verwendet wird, aber nicht als reserviertes Schlüsselwort handelt.

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

type

Gibt das Format der verlinkten URL mit einem MIME-Typ an. 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 den HTTP-Content-Type-Header auf der verlinkten URL.

coords Veraltet

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

name Veraltet

Wurde benötigt, 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 sehr verwirrend.

shape Veraltet

Die Form des Hyperlink-Bereichs in einer Bildkarte.

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

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

Hilfssoftware verfügt über Abkürzungen, um alle Links auf einer Seite aufzulisten. Starker Linktext nützt jedoch allen Benutzern — die Abkürzung "alle Links auflisten" ahmt nach, wie sehende Benutzer 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 gewartet 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 auftritt oder deaktiviert ist. Sie vermitteln auch falsche Semantik für unterstützende Technologien wie Bildschirmleseprogramme.

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

Externe Links und Verlinkung zu nicht-HTML-Ressourcen

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

Personen, die unter Sehschwächen leiden, mit Bildschirmlesetechnologie navigieren oder kognitive Bedenken haben, können verwirrt sein, wenn ein neues Tab, Fenster oder eine Anwendung unerwartet geöffnet wird. Ältere Bildschirmlese-Software 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

Verknüpfung zu einer nicht-HTML-Ressource

Wenn ein Symbol verwendet wird, um das Linkverhalten 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 das Verhalten des Links weiterhin 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, Richtlinie 3.2
• G200: Öffnen neuer Fenster und Tabs über einen Link nur bei Notwendigkeit
• G201: Benutzern im Voraus zu warnen, wenn ein neues Fenster geöffnet wird

Sprungmarken

Eine Sprungmarke ist ein Link, der so früh wie möglich im Inhalt des <body> platziert wird und auf den Beginn des Hauptinhalts der Seite verweist. Üblicherweise wird eine Sprungmarke per CSS vom Bildschirm verborgen, bis sie 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

Sprungmarken lassen Tastaturnutzer Inhalte umgehen, die auf mehreren Seiten wiederholt werden, wie zum Beispiel die Navigation im Kopfbereich.

Sprungmarken sind besonders nützlich für Personen, die mit Hilfe von unterstützender Technologie navigieren, wie z.B. Schaltersteuerung, Sprachbefehlen oder Mundstäbchen/Kopfstöcken, bei denen das Durchqueren von wiederholten Links mühselig sein kann.

• WebAIM: "Skip Navigation"-Links
• Anleitung: Verwendunge von Navigation-Skip-Links
• MDN / Verständnis von WCAG, Richtlinie 2.4 Erklärungen
• Verständnis des Erfolgs-Kriteriums 2.4.1

Größe und Nähe

Größe

Interaktive Elemente, wie Links, sollten einen ausreichend großen Bereich bereitstellen, damit sie leicht aktiviert werden können. Dies hilft einer Vielzahl von Menschen, einschließlich solcher mit motorischen Schwierigkeiten und denen, die unpräzise Eingabegeräte wie einen Touchscreen verwenden. Eine Mindestgröße von 44×44 CSS-Pixeln wird empfohlen.

Text-Links in Prosa-Inhalten sind von dieser Anforderung ausgenommen, aber es ist dennoch eine gute Idee sicherzustellen, dass ausreichend Text verlinkt ist, um leicht aktiviert werden zu können.

• Verständnis des Erfolgs-Kriteriums 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. Abstand hilft Menschen mit motorischen Schwierigkeiten, die sonst versehentlich den falschen interaktiven Inhalt aktivieren könnten.

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

• Handzittern und das Riesenknöpfe-Problem

Beispiele

Verlinkung zu einer absoluten URL

HTML

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

Ergebnis

Verlinkung 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

Verlinkung 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

Verlinkung zu 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 beispielsweise Einschluss von Betreff oder Nachrichtentext, siehe E-Mail-Links oder RFC 6068.

Verlinkung zu Telefonnummern

<a href="tel:+49.157.0156">+49 157 0156</a>
<a href="tel:+1(800)555-0123">(800) 555-0123</a>

Ergebnis

tel:-Linkverhalten variiert je nach Gerätefähigkeit:

• Mobilgeräte wählen die Nummer automatisch.
• Die meisten Betriebssysteme haben Programme, die Anrufe machen können, wie Skype oder FaceTime.
• Websites können Telefonanrufe mit registerProtocolHandler tätigen, wie web.skype.com.
• Andere Verhaltensweisen umfassen das Speichern der Nummer als Kontakt oder das Senden der Nummer an ein anderes Gerät.

Siehe RFC 3966 für Syntax, zusätzliche Funktionen und weitere Details über das 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 eine 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 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: Privatsphäre 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 die window.opener API-Ausnutzung, obwohl neuere Browserversionen, die target="_blank" verwenden, implizit denselben Schutz wie das Festlegen 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 vom Benutzer noch nicht besucht wurden.
• :visited ist eine CSS-Pseudoklasse, die <a>-Elemente mit URL im href-Attribut abgleicht, die vom Benutzer in der Vergangenheit besucht wurden.
• :any-link ist eine CSS-Pseudoklasse, die <a>-Elemente mit href-Attribut abgleicht.
• Textfragmente sind Anweisungen des Benutzeragenten, die URLs hinzugefügt werden, damit Inhaltsautoren auf bestimmten Text auf einer Seite verlinken können, ohne dass IDs erforderlich sind.