<a>: Das Anchor-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 Anchor-Element), mit seinem href
-Attribut, erstellt einen Hyperlink zu Webseiten, Dateien, E-Mail-Adressen, Positionen in derselben Seite oder allem anderen, was eine URL adressieren kann.
Der Inhalt innerhalb jedes <a>
sollte das Ziel des Links angeben. Wenn das href
-Attribut vorhanden ist, wird das Drücken der Eingabetaste, während das <a>
-Element fokussiert ist, es aktivieren.
Probieren Sie es aus
Attribute
Attribute dieses Elements umfassen die globalen Attribute.
attributionsrc
Experimentell-
Bestimmt, dass der Browser einen
Attribution-Reporting-Eligible
-Header senden soll. Auf der Serverseite 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 Quellendaten, die mit der navigationsbasierten Attributionsquelle verbunden sind (wie im
Attribution-Reporting-Register-Source
-Antwort-Header bereitgestellt), wenn der Benutzer auf den Link klickt. Weitere Details finden Sie in der Attribution Reporting API.Es gibt zwei Versionen dieses Attributs, die Sie festlegen können:
-
Boolesch, d. h. nur der Name
attributionsrc
. Dies gibt an, dass Sie denAttribution-Reporting-Eligible
-Header an denselben Server senden möchten, auf den dashref
-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:
htmlattributionsrc="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 Sie einfach 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 imattributionsrc
angegebenen URL(s) zusätzlich zur Ursprungsressource gesendet. Diese URLs können dann mit demAttribution-Reporting-Register-Source
antworten, um die Registrierung abzuschließen.Hinweis: Das Angeben mehrerer URLs bedeutet, dass mehrere Attributionsquellen bei derselben Funktion registriert werden können. Sie könnten beispielsweise verschiedene Kampagnen haben, deren Erfolg Sie messen möchten, die das Generieren unterschiedlicher Berichte über unterschiedliche Daten beinhalten.
<a>
-Elemente können nicht als Attributionstrigger, 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 wird der Browser einen Dateinamen/-erweiterung vorschlagen, 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 Beginn einerdata:
-URL oderBlob.type
für eineblob:
-URL)
- Der
-
filename
: das Definieren eines Werts 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 bei Bedarf an.
Hinweis:
-
download
funktioniert nur für gleiche-Ursprung-URLs oder dieblob:
- unddata:
-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 sie kann automatisch geöffnet werden, entweder in einer externen Anwendung oder im Browser selbst.
-
Wenn der
Content-Disposition
-Header andere Informationen als dasdownload
-Attribut enthält, kann sich das resultierende Verhalten unterscheiden:- Wenn der Header einen
filename
angibt, hat dieser Vorrang vor einem imdownload
-Attribut spezifizierten 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.
- Wenn der Header einen
-
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-Textnachrichten 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()
Darüber hinaus können andere URL-Funktionen spezifische Teile der Ressource lokalisieren, einschließlich:
- Abschnitten einer Seite mit Dokumentfragmenten
- Spezifischen Textabschnitten mit Textfragmenten
- Teilen von Mediendateien mit Medienfragmenten
- Telefonnummern mit
hreflang
-
Hinweis auf die Sprache des verlinkten URL. Keine eingebauten Funktionen. Erlaubte Werte sind die gleichen wie das globale
lang
Attribut. ping
-
Eine durch Leerzeichen getrennte Liste von URLs. Wenn der Link gefolgt wird, sendet der Browser
POST
-Anfragen mit dem BodyPING
an die URLs. Typischerweise für Tracking. referrerpolicy
-
Wie viel des Referrers beim Folgen des Links gesendet werden soll.
no-referrer
: DerReferer
-Header wird nicht gesendet.no-referrer-when-downgrade
: DerReferer
-Header wird nicht an Ursprünge ohne TLS (HTTPS) gesendet.origin
: Der gesendete Referrer wird auf den Ursprung der verweisenden Seite beschränkt: sein Schema, Host und Port.origin-when-cross-origin
: Der an andere Ursprünge gesendete Referrer wird 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 den gleichen Ursprung gesendet, aber Anfragen über verschiedene Ursprünge enthalten keine Referrer-Informationen.strict-origin
: Sendet nur den Ursprung des Dokuments als Referrer, wenn das Sicherheitsniveau des Protokolls gleich bleibt (HTTPS→HTTPS), aber sendet ihn nicht an eine weniger sichere Zieladresse (HTTPS→HTTP).strict-origin-when-cross-origin
(Standard): Sendet eine vollständige URL bei der Durchführung einer Anfrage im gleichen Ursprung, sendet nur den Ursprung, wenn das Sicherheitsniveau des Protokolls gleich bleibt (HTTPS→HTTPS), und sendet keinen Header an eine weniger sichere Zieladresse (HTTPS→HTTP).unsafe-url
: Der Referrer wird den Ursprung und den Pfad enthalten (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 weitergibt.
rel
-
Die Beziehung der verlinkten URL als durch Leerzeichen getrennte Link-Typen.
target
-
Wo die verlinkte URL angezeigt werden soll, als der Name eines Navigationskontextes (ein Tab, Fenster oder
<iframe>
). Die folgenden Schlüsselwörter haben spezielle Bedeutungen dafür, wo die URL geladen werden soll:_self
: Der aktuelle Navigationskontext. (Standard)_blank
: Normalerweise ein neuer Tab, aber Benutzer können Browser so konfigurieren, dass sie stattdessen ein neues Fenster öffnen._parent
: Der übergeordnete Navigationskontext des aktuellen. Falls kein übergeordneter vorhanden ist, verhält er sich wie_self
._top
: Der oberste Navigationskontext. Das heißt, der "höchste" Kontext, der ein Vorfahre des aktuellen ist. Falls keine Vorfahren vorhanden sind, verhält er sich wie_self
._unfencedTop
: Erlaubt eingebetteten umzäunten Frames, auf den Top-Level-Frame zu navigieren (d. h. über die Wurzel des umzäunten Frames hinaus zu traversieren, im Gegensatz zu anderen reservierten Zielen). Beachten Sie, dass die Navigation auch dann gelingt, wenn diese außerhalb eines umzäunten Frame-Kontextes verwendet wird, aber sie wird nicht wie ein reserviertes Schlüsselwort wirken.
Hinweis: Das Festlegen von
target="_blank"
auf<a>
-Elementen impliziert dasselberel
-Verhalten wie das Festlegen vonrel="noopener"
, waswindow.opener
nicht setzt. type
-
Hinweis auf das Format der verlinkten URL mit einem MIME-Typ. Keine eingebauten Funktionen.
Veraltete Attribute
charset
Veraltet-
Hinweis auf die Zeichenkodierung der verlinkten URL.
Hinweis: Dieses Attribut ist veraltet und sollte nicht von Autoren verwendet werden. Benutzen Sie den HTTP-
Content-Type
-Header auf der verlinkten URL. coords
Veraltet-
Wurde 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
undname
beide auf<a>
verwendet werden, solange sie identische Werte hatten.Hinweis: Verwenden Sie stattdessen das globale Attribut
id
. rev
Veraltet-
Spezifizierte einen Rücklink; das Gegenteil von dem
rel
-Attribut. Veraltet, da sehr verwirrend. shape
Veraltet-
Die Form des Hyperlinks-Bereichs in einer Image-Map.
Hinweis: Verwenden Sie stattdessen das
<area>
-Element für Image-Maps.
Barrierefreiheit
Starker Link-Text
Der Inhalt innerhalb eines Links sollte angeben, wohin der Link führt, auch aus dem Kontext heraus.
Unzugänglicher, schwacher Link-Text
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 Link-Text
Glücklicherweise ist dies leicht zu beheben, und es ist tatsächlich kürzer als die unzugä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 Link-Text kommt jedoch allen Benutzern zugute - die "alle Links auflisten"-Abkürzung ahmt nach, wie sehende Benutzer Seiten schnell durchsehen.
onclick-Ereignisse
Anchor-Elemente 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 gehört wird.
Diese falschen href
-Werte verursachen unerwartetes Verhalten beim Kopieren/Ziehen von Links, Öffnen von Links in einem neuen Tab/Fenster, Setzen von Lesezeichen oder wenn JavaScript geladen, fehlerhaft oder deaktiviert ist. Sie vermitteln auch falsche Semantik an Hilfstechnologien, wie z. B. Bildschirmlesegeräte.
Verwenden Sie stattdessen ein <button>
. Im Allgemeinen sollten Sie nur einen Hyperlink für die Navigation zu einer echten URL verwenden.
Externe Links und Verlinken 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 angeben, was passiert, wenn der Link gefolgt wird.
Menschen, die unter Sehbehinderungen leiden, mit Hilfe von Bildschirmlesegeräten navigieren oder kognitive Bedenken haben, könnten verwirrt sein, wenn ein neuer Tab, ein neues Fenster oder eine Anwendung unerwartet geöffnet wird. Ältere Bildschirmlesesoftware gibt das Verhalten möglicherweise nicht einmal bekannt.
Link, der einen neuen Tab/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 Icon verwendet wird, um das Linkverhalten anzuzeigen, stellen Sie sicher, dass es ein alt
-Attribut hat, um seinen Zweck zu beschreiben. Falls das Icon fehlt, wird der Inhalt des alt
-Attributs weiterhin 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
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 verweist. Üblicherweise wird ein Skip-Link mit 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: #fff;
}
.skip-link:focus {
top: 0;
}
Ergebnis
Skip-Links ermöglichen Tastaturbenutzern, Inhalte zu umgehen, die sich über mehrere Seiten hinweg wiederholen, wie z. B. Kopfzeilennavigation.
Skip-Links sind besonders nützlich für Menschen, die mit Hilfe von Hilfstechnologien wie Schaltersteuerung, Sprachbefehlen oder Mundstöcken/Kopfstöcken navigieren, bei denen das Navigieren durch sich wiederholende Links mühsam sein kann.
Größe und Nähe
Größe
Interaktive Elemente, wie Links, sollten einen großen Bereich bieten, der einfach aktiviert werden kann. Dies hilft einer Vielzahl von Menschen, einschließlich jener mit motorischen Kontrollproblemen und solchen, die ungenaue Eingaben wie einen Touchscreen verwenden. Eine Mindestgröße von 44×44 [CSS-Pixel]((https://www.w3.org/TR/WCAG21/#dfn-css-pixels) wird empfohlen.
Text-only-Links im Fließtext sind von dieser Anforderung ausgenommen, aber es ist dennoch eine gute Idee sicherzustellen, dass genügend Text verlinkt ist, um leicht aktiviert zu werden.
- Verständnis des Erfolgskriteriums 2.5.5: Zielgröße
- Zielgröße und 2.5.5
- Schnelltest: Große Berührungsziele
Nähe
Interaktive Elemente, wie Links, die in enger visueller Nähe platziert werden, sollten Platz dazwischen haben. Der Abstand hilft Menschen mit motorischen Kontrollproblemen, die sonst versehentlich das falsche interaktive Element aktivieren könnten.
Abstände können mit CSS-Eigenschaften wie margin
erzeugt 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 zum oberen Ende 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 öffnen und ihm erlauben, 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 z. B. das Einschließen eines Betreffs oder 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
tel:
-Linkverhalten variiert je nach Gerätefunktionen:
- 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 Anrufe tätigen mit
registerProtocolHandler
, wie z. B.web.skype.com
. - Weitere 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 einen <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-Anwendung mit Malfunktion und 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 Datenschutz
<a>
-Elemente können Auswirkungen auf 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 zu beachten ist, dass 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
Inhaltskategorien | Fließinhalt, Satzinhalt, interaktiver Inhalt, greifbarer Inhalt. |
---|---|
Erlaubter Inhalt |
Transparent, außer dass kein Nachkomme
interaktiver Inhalt oder ein
<a> -Element sein darf und kein Nachkomme ein
tabindex-Attribut spezifiziert haben darf.
|
Tag-Auslassung | Keine, sowohl das Start- als auch das End-Tag sind erforderlich. |
Erlaubte Eltern |
Jedes Element, das
Fließ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
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
a | ||||||||||||
attributionsourceid | ||||||||||||
attributionsrc | ||||||||||||
charset | ||||||||||||
coords | ||||||||||||
download | ||||||||||||
href | ||||||||||||
href = 'sms:' | ||||||||||||
href = '#top' | ||||||||||||
hreflang | ||||||||||||
hreftranslate | ||||||||||||
target="_blank" implies rel="noopener" behavior | ||||||||||||
name | ||||||||||||
ping | ||||||||||||
referrerpolicy | ||||||||||||
no-referrer-when-downgrade | ||||||||||||
origin-when-cross-origin | ||||||||||||
unsafe-url | ||||||||||||
rel | ||||||||||||
rel.noopener | ||||||||||||
rel.noreferrer | ||||||||||||
rev | ||||||||||||
shape | ||||||||||||
target | ||||||||||||
_unfencedTop value | ||||||||||||
URL text fragments | ||||||||||||
type |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- Partial support
- Partial support
- No support
- No support
- Experimental. Expect behavior to change in the future.
- Non-standard. Check cross-browser support before using.
- Deprecated. Not for use in new websites.
- See implementation notes.
- Has more compatibility info.
Siehe auch
<link>
ist ähnlich wie<a>
, aber für Metadaten-Hyperlinks, die den Benutzern nicht sichtbar sind.:link
ist eine CSS-Pseudoklasse, die<a>
-Elemente mit URL imhref
-Attribut abgleicht, die noch nicht vom Benutzer besucht wurde.:visited
ist eine CSS-Pseudoklasse, die<a>
-Elemente mit URL imhref
-Attribut abgleicht, die in der Vergangenheit vom Benutzer besucht wurde.:any-link
ist eine CSS-Pseudoklasse, die<a>
-Elemente mit demhref
-Attribut abgleicht.- Textfragmente sind Benutzer-Agent-Instruktionen, die zu URLs hinzugefügt werden und es Inhaltsautoren ermöglichen, ohne benötigte IDs auf spezifischen Text einer Seite zu verlinken.