<a>: Das Anker-Element
Baseline Widely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
* Some parts of this feature may have varying levels of support.
Das <a>
HTML Element (oder Anker-Element) erstellt mit seinem href
Attribut einen Hyperlink zu Webseiten, Dateien, E-Mail-Adressen, Positionen auf derselben Seite oder alles andere, was eine URL adressieren kann.
Der Inhalt innerhalb jedes <a>
sollte das Ziel des Links angeben. Wenn das href
Attribut vorhanden ist, aktiviert das Drücken der Eingabetaste, während der Fokus auf dem <a>
Element liegt, dieses.
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. Serverseitig wird dies verwendet, um das Senden einesAttribution-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
Attribution-Reporting-Register-Source
Antwort-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 festlegen können:
-
Boolean, d.h. nur der
attributionsrc
Name. Dies gibt an, dass Sie möchten, dass derAttribution-Reporting-Eligible
Header an denselben Server gesendet wird, auf den dashref
Attribut zeigt. Dies ist in Ordnung, wenn Sie die Registrierung der Attributionsquelle auf demselben Server verwalten. -
Wert, der eine oder mehrere URLs enthält, zum Beispiel:
htmlattributionsrc="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 ist, den Sie kontrollieren, oder Sie die Registrierung der Attributionsquelle auf einem anderen Server verwalten möchten. In diesem Fall können Sie eine oder mehrere URLs als Wert von
attributionsrc
angeben. Wenn die Ressourcenanforderung auftritt, wird derAttribution-Reporting-Eligible
Header an die inattributionsrc
angegebene(n) URL(s) neben dem Ursprungsserver gesendet. Diese URLs können dann mit derAttribution-Reporting-Register-Source
antworten, um die Registrierung abzuschließen.Hinweis: Das Spezifizieren 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, indem sie unterschiedliche Berichte zu verschiedenen Daten generieren.
<a>
Elemente können nicht als Attributionstrigger verwendet werden, sondern nur als Quellen. -
download
-
Veranlasst den Browser, die verlinkte URL als Download zu behandeln. Kann mit oder ohne einen
filename
Wert verwendet werden:-
Ohne einen Wert schlägt der Browser einen Dateinamen/Dateierweiterung 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 einerdata:
URL, oderBlob.type
für eineblob:
URL)
- Der
-
filename
: Das Festlegen eines Wertes schlägt diesen als Dateinamen vor./
und\
Zeichen werden in Unterstriche (_
) konvertiert. Dateisysteme können andere Zeichen in Dateinamen verbieten, daher passen Browser den vorgeschlagenen Namen bei Bedarf an.
Hinweis:
-
download
funktioniert nur für same-origin URLs, oder dieblob:
unddata:
Schemata. -
Wie Browser Downloads behandeln, variiert je nach Browser, Benutzereinstellungen und anderen Faktoren. Der Benutzer kann dazu aufgefordert werden, bevor ein Download startet, oder die Datei wird automatisch gespeichert oder direkt geöffnet, entweder in einer externen Anwendung oder im Browser selbst.
-
Wenn der
Content-Disposition
Header andere Informationen als dasdownload
Attribut enthält, kann das resultierende Verhalten sich unterscheiden:- Wenn der Header einen
filename
angibt, hat er Vorrang vor einem imdownload
Attribut angegebenen Dateinamen. - Wenn der Header eine Wertung 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.
- Wenn der Header einen
-
href
-
Die URL, auf die der Hyperlink zeigt. 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ührbaren Code mit
javascript:
URLs - Während Webbrowser möglicherweise andere URL-Schemata nicht unterstützen, können Websites mithilfe von
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 Mediafragmenten
- Telefonnummern mit
hreflang
-
Dient als Hinweis auf die Sprache der verlinkten URL. Keine eingebaute Funktionalität. Erlaubte Werte entsprechen dem globalen
lang
Attribut. ping
-
Eine durch Leerzeichen getrennte Liste von URLs. Beim Folgen des Links sendet der Browser
POST
Anfragen mit dem BodyPING
an die URLs. Typischerweise für Tracking. referrerpolicy
-
Bestimmt, wie viel vom Referrer gesendet wird, wenn dem Link gefolgt wird.
no-referrer
: DerReferer
Header wird nicht gesendet.no-referrer-when-downgrade
: DerReferer
Header wird nicht an Origins ohne TLS (HTTPS) gesendet.origin
: Der gesendete Referrer wird auf die Herkunft der verweisenden Seite beschränkt: ihr Schema, Host, und Port.origin-when-cross-origin
: Der an andere Origins gesendete Referrer wird auf das Schema, den Host und den Port beschränkt. Navigationen im selben Origin enthalten weiterhin den Pfad.same-origin
: Ein Referrer wird für den gleichen Origin gesendet, aber Anfragen für unterschiedliche Origins enthalten keine Referrer-Informationen.strict-origin
: Sendet nur die Herkunft des Dokuments als Referrer, wenn das Protokollsicherheitsniveau gleich bleibt (HTTPS→HTTPS), jedoch nicht an ein weniger sicheres Ziel (HTTPS→HTTP).strict-origin-when-cross-origin
(Standard): Sendet eine vollständige URL, wenn eine Anfrage im selben Origin durchgeführt wird, sendet nur die Herkunft, wenn das Protokollsicherheitsniveau gleich bleibt (HTTPS→HTTPS), und sendet keinen Header an ein weniger sicheres Ziel (HTTPS→HTTP).unsafe-url
: Der Referrer wird die Herkunft und den Pfad enthalten (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 weiterleitet.
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 (einen Tab, ein Fenster oder ein
<iframe>
). Die folgenden Schlüsselwörter haben spezielle Bedeutungen dafür, wo die URL geladen werden soll:_self
: Der aktuelle Browsing-Kontext. (Standard)_blank
: Üblicherweise ein neuer Tab, Benutzer können jedoch in Browsern konfigurieren, ein neues Fenster zu öffnen._parent
: Der übergeordnete Browsing-Kontext des aktuellen. Wenn kein übergeordneter vorhanden ist, verhält sich wie_self
._top
: Der oberste Browsing-Kontext. Genauer gesagt bedeutet dies der "höchste" Kontext, der ein Vorfahre des aktuellen ist. Wenn keine Vorfahren vorhanden sind, verhält sich wie_self
._unfencedTop
: Ermöglicht eingebetteten fenced frames, das Top-Level-Frame zu navigieren (also über die Wurzel des Fenced Frame hinausgehend zu navigieren, im Gegensatz zu anderen reservierten Zielen). Beachten Sie, dass die Navigation immer noch erfolgreich ist, wenn dies außerhalb eines Fenced-Frame-Kontextes verwendet wird, aber es wird nicht wie ein reserviertes Schlüsselwort wirken.
Hinweis: Das Setzen von
target="_blank"
auf<a>
Elementen bietet implizit dasselberel
Verhalten, wie das Setzen vonrel="noopener"
, welcheswindow.opener
nicht setzt. type
-
Ein Hinweis auf das Format der verlinkten URL als 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 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-
War erforderlich, um einen möglichen Zielort auf einer Seite zu definieren. In HTML 4.01 konnten sowohl
id
als auchname
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 es sehr verwirrend war. shape
Veraltet-
Die Form der Linkregion in einer Image Map.
Hinweis: Verwenden Sie das
<area>
Element für Image Maps.
Barrierefreiheit
Starker Linktext
Der Inhalt innerhalb eines Links sollte angeben, wohin der Link führt, auch außerhalb des Kontexts.
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
Zum Glück ist dies eine einfache Lösung, 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 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 schnell Seiten durchsehen.
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 hören.
Diese gefälschten href
Werte verursachen unerwartetes Verhalten beim Kopieren/Ziehen von Links, Öffnen von Links in einem neuen Tab/Fenster, Lesezeichen setzen oder wenn JavaScript lädt, Fehler auftreten oder deaktiviert ist. Sie vermitteln auch Hilfstechnologien wie Bildschirmlesegeräten falsche Semantik.
Verwenden Sie stattdessen ein <button>
. Im Allgemeinen sollten Sie ein Hyperlink nur zur Navigation zu einer echten URL verwenden.
Externe Links und Verlinken von Nicht-HTML-Ressourcen
Links, die über target="_blank"
in einem neuen Tab/Fenster geöffnet werden oder Links, die auf eine Download-Datei zeigen, sollten angeben, was passiert, wenn dem Link gefolgt wird.
Personen mit Sehbehinderungen, die mit der Hilfe von Bildschirmlesetechnologie navigieren, oder mit kognitiven Bedenken können verwirrt sein, wenn unerwartet ein neuer Tab, ein Fenster oder eine Anwendung geöffnet wird. Ältere Bildschirmleseprogramme kündigen möglicherweise nicht einmal das Verhalten 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 kennzeichnen, stellen Sie sicher, dass es ein alt
Attribut hat, um seinen Zweck zu beschreiben. Falls das Symbol fehlt, vermittelt der Inhalt des alt
Attributs immer noch 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
Skip-Links
Ein Skip-Link ist ein Link, der so früh wie möglich im <body>
Inhalt platziert wird und auf den Beginn des Hauptinhalts der Seite zeigt. Gewöhnlich wird ein Skip-Link über CSS außerhalb des Bildschirms verborgen, 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: #fff;
}
.skip-link:focus {
top: 0;
}
Ergebnis
Skip-Links ermöglichen es Tastaturnutzern, Inhalte zu überspringen, die sich auf mehreren Seiten wiederholen, wie zum Beispiel die Header-Navigation.
Skip-Links sind besonders nützlich für Menschen, die mit der Hilfe von assistiven Technologien wie Schaltsteuerung, Sprachbefehlen oder Mundstäben/Kopfstiften navigieren, da das Durchlaufen von wiederholten Links mühsam sein kann.
Größe und Nähe
Größe
Interaktive Elemente, wie Links, sollten eine ausreichend große Fläche bieten, sodass sie leicht aktiviert werden können. Dies hilft einer Vielzahl von Menschen, einschließlich solcher mit motorischen Kontrollproblemen und Personen, die ungenaue Eingaben wie Touchscreens verwenden. Eine Mindestgröße von 44×44 CSS-Pixeln wird empfohlen.
Text-Links in Prosa-Inhalten sind von dieser Anforderung ausgenommen, aber es ist immer noch eine gute Idee, sicherzustellen, dass genug Text verlinkt ist, um leicht aktiviert zu werden.
Nähe
Interaktive Elemente, wie Links, die in enger visueller Nähe platziert sind, sollten durch eine Trennfläche voneinander getrennt sein. Eine Trennung hilft Menschen mit motorischen Kontrollproblemen, die sonst möglicherweise versehentlich das falsche interaktive Element aktivieren.
Die Trennung kann mit CSS-Eigenschaften wie margin
erstellt werden.
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>
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
Hinweis:
Sie können href="#top"
oder das leere Fragment (href="#"
) verwenden, um an den Anfang der aktuellen Seite zu verlinken, wie in der HTML-Spezifikation definiert.
Verlinkung zu einer E-Mail-Adresse
Um Links zu erstellen, die im E-Mail-Programm des Benutzers eine neue Nachricht öffnen, verwenden Sie das mailto:
Schema:
<a href="mailto:nowhere@mozilla.org">Send email to nowhere</a>
Ergebnis
Für Details über mailto:
URLs, wie z. B. das Einschließen eines Betreffs oder eines Textkörpers, 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
Das Verhalten bei tel:
Links variiert mit Gerätefunktionen:
- Mobilgeräte wählen automatisch die Nummer.
- Die meisten Betriebssysteme verfügen über Programme, mit denen Anrufe getätigt werden können, wie Skype oder FaceTime.
- Websites können mit
registerProtocolHandler
Anrufe tätigen, z.B.web.skype.com
. - Andere Verhaltensweisen umfassen das Speichern der Nummer in Kontakte oder das Senden der Nummer an ein anderes Gerät.
Siehe RFC 3966, um Details zur Syntax, zusätzliche Funktionen und weitere Details zum tel:
URL-Schema zu erhalten.
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 wird, und das download
Attribut den Dateinamen für die heruntergeladene PNG-Datei angibt:
Beispiel einer Malanwendung 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: #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
Sicherheit und Privatsphäre
<a>
Elemente können Auswirkungen auf die Sicherheit und Privatsphäre der Benutzer haben. Informationen finden Sie unter Referer
Header: Datenschutz- und Sicherheitsbedenken.
Das Verwenden von target="_blank"
ohne rel="noreferrer"
und rel="noopener"
macht die Website anfällig für Angriffe durch Ausnutzung der window.opener
API, obwohl zu beachten ist, dass neuere Browserversionen durch das Setzen von target="_blank"
implizit denselben Schutz wie das Setzen von rel="noopener"
bieten. Siehe Browser-Kompatibilität für Details.
Technische Zusammenfassung
Inhaltskategorien | Flow-Inhalt, Satz-Inhalt, interaktiver Inhalt, fühlbarer Inhalt. |
---|---|
Erlaubter Inhalt |
Transparent, außer dass kein Nachkomme
interaktiven Inhalt oder ein
<a> Element sein darf, und kein Nachkomme darf ein
angegebenes
tabindex Attribut haben.
|
Tag-Auslassung | Keine, sowohl das öffnende als auch das schließende Tag sind erforderlich. |
Erlaubte Eltern |
Jedes Element, das
Flow-Inhalt akzeptiert, jedoch keine anderen <a> Elemente.
|
Implizite ARIA-Rolle |
link wenn das href Attribut
vorhanden ist, andernfalls
generic
|
Erlaubte ARIA-Rollen |
Wenn das Wenn das
|
DOM-Schnittstelle | [`HTMLAnchorElement`](/de/docs/Web/API/HTMLAnchorElement) |
Spezifikationen
Specification |
---|
HTML # the-a-element |
Browser-Kompatibilität
BCD tables only load in the browser
Siehe auch
<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 imhref
Attribut passt, die noch nicht vom Benutzer besucht wurde.:visited
ist eine CSS-Pseudoklasse, die auf<a>
Elemente mit URL imhref
Attribut passt, die vom Benutzer in der Vergangenheit besucht wurde.:any-link
ist eine CSS-Pseudoklasse, die auf<a>
Elemente mithref
Attribut passt.- Textfragmente sind Benutzeragenten-Instruktionen, die URLs hinzugefügt werden und es Inhaltserstellern ermöglichen, auf bestimmten Text auf einer Seite zu verlinken, ohne dass IDs erforderlich sind.