<a>: Das Ankerelement - HTML

Experiment: Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten.

In diesem Artikel

Starker Linktext Glücklicherweise lässt sich dies leicht beheben, und es ist tatsächlich kürzer als die nicht zugängliche Version! htmlLearn more about our products. Ergebnis Hilfssoftware bietet Abkürzungen, um alle Links einer Seite aufzulisten. Starker Linktext kommt jedoch allen Nutzern zugute — die "alle Links auflisten"-Abkürzung emuliert, wie sehende Benutzer schnell Seiten 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, 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 Bildschirmleser. Verwenden Sie stattdessen eine

`Externe Links und Verlinkung zu nicht-HTML-Ressourcen`

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

Menschen mit Sehschwächen, die mit Unterstützung von Bildschirmlesetechnologie navigieren, oder mit kognitiven Einschränkungen könnten verwirrt werden, wenn ein neuer Tab, ein neues Fenster oder eine Anwendung unerwartet geöffnet wird. Ältere Screenreader-Software kündigt das Verhalten möglicherweise nicht einmal an. Link, der ein neues Tab/Fenster öffnet html Wikipedia (opens in new tab) Ergebnis Link zu einer nicht-HTML-Ressource Wird ein Symbol verwendet, um das Linkverhalten zu signalisieren, stellen Sie sicher, dass es ein alt-Attribut hat, um seinen Zweck zu beschreiben. Falls das Symbol fehlt, wird der Inhalt des alt-Attributes trotzdem das Verhalten des Links vermitteln. html Wikipedia 2017 annual report Wikipedia 2017 annual report Ergebnis WebAIM: Links und Hypertext - Hypertext Links MDN / Verständnis von WCAG, Richtlinie 3.2 G200: Öffnen neuer Fenster und Tabs von einem Link nur bei Bedarf G201: Benutzerwarnung vor dem Öffnen eines neuen Fensters

`Überspringen von Links`

Ein Überspringen-Link ist ein Link, der so früh wie möglich in -Inhalt platziert wird und auf den Beginn des Hauptinhalts der Seite zeigt. Üblicherweise versteckt CSS einen Überspringen-Link außerhalb des Bildschirms, bis er fokussiert wird.

html Skip to main content … css .skip-link { position: absolute; top: -3em; background: #fff; } .skip-link:focus { top: 0; } Ergebnis Überspringen-Links ermöglichen es Tastaturnutzern, Inhalte, die auf mehreren Seiten wiederholt werden, wie zum Beispiel Header-Navigation, zu überspringen. Überspringen-Links sind besonders hilfreich für Menschen, die mit der Unterstützung von assistiver Technologie wie Schaltersteuerung, Sprachsteuerung oder Mundstäben/Kopfstäben navigieren, wo das Durchgehen von wiederholenden Links mühsam sein kann. WebAIM: "Skip Navigation" Links Anleitung: Verwendung von Skip Navigation Links MDN / Verständnis von WCAG, Richtlinie 2.4 Erklärungen Verständnis der Erfolgskriterien 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 verschiedenen Menschen, einschließlich denen mit motorischen Problemen und denen, die ungenaue Eingaben wie ein Touchscreen verwenden. Eine Mindestgröße von 44×44 CSS-Pixeln wird empfohlen. Nur-Text-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 der Erfolgskriterien 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 durch Raum voneinander getrennt sein. Abstand hilft Menschen mit motorischen Problemen, die andernfalls versehentlich den falschen interaktiven Inhalt aktivieren könnten. Abstand kann durch CSS-Eigenschaften wie margin erstellt werden. Handzittern und das Riesenknopf-Problem

`Beispiele`

`Verlinkung zu einer absoluten URL`

`HTML`

html Mozilla Ergebnis

`Verlinkung zu relativen URLs`

`HTML`

html Scheme-relative URL Origin-relative URL Directory-relative URL Directory-relative URL Parent-directory-relative URL a { display: block; margin-bottom: 0.5em; } Ergebnis

`Verlinkung zu einem Element auf derselben Seite`

html


Jump to the heading below


Section further down

Ergebnis Hinweis: Sie können href="#top" oder das leere Fragment (href="#") verwenden, um zum 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 öffnen, um eine neue Nachricht zu senden, verwenden Sie das mailto:-Schema:

html Send email to nowhere Ergebnis Für Details zu mailto:-URLs, wie das Einschließen eines Betreffs oder Textes, siehe E-Mail-Links oder RFC 6068.

`Verlinkung zu Telefonnummern`

html

+49 157 0156
(800) 555-0123

Ergebnis Das Verhalten von tel:-Links variiert je nach Gerätefunktionen: 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 mit registerProtocolHandler Anrufe tätigen, wie web.skype.com. Andere Verhaltensweisen umfassen das Speichern der Nummer in Kontakten oder das Senden der Nummer zu einem anderen Gerät. Siehe RFC 3966 für Syntax, zusätzliche Merkmale und andere Details über das tel:-URL-Schema.

`Verwendung des Download-Attributs, um ein als PNG zu speichern`

Um den Inhalt eines -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 bereitstellt:

Beispiel-Mal-App mit Speicherlink HTML html Paint by holding down the mouse button and moving it. Download my painting CSS css html { font-family: sans-serif; } canvas { background: #fff; border: 1px dashed; } a { display: inline-block; background: #69c; color: #fff; padding: 5px 10px; } JavaScript js 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`

-Elemente können Konsequenzen für die Sicherheit und den Datenschutz der Nutzer 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 neuere Browserversionen bei der Einstellung von target="_blank" automatisch denselben Schutz bieten wie bei der Einstellung von rel="noopener". Siehe Browser-Kompatibilität für Details.

`Technische Zusammenfassung`

Inhaltskategorien	Flussinhalt, phrasierender Inhalt, interaktiver Inhalt, palpabler Inhalt.
Erlaubter Inhalt	Transparent, außer dass kein Nachfolger interaktiver Inhalt oder ein -Element sein darf, und kein Nachfolger darf ein spezifiziertes tabindex-Attribut haben.
Tag-Auslassung	Keine, sowohl das Start- als auch das End-Tag sind obligatorisch.
Erlaubte Eltern	Jedes Element, das Flussinhalt akzeptiert, aber keine anderen -Elemente.
Implizierte ARIA-Rolle	`link` wenn das `href`-Attribut vorhanden ist, andernfalls `generic`
Erlaubte ARIA-Rollen	Wenn das `href`-Attribut vorhanden ist: `button` `checkbox` `menuitem` `menuitemcheckbox` `menuitemradio` `option` `radio` `switch` `tab` `treeitem` Wenn das `href`-Attribut nicht vorhanden ist: beliebig
DOM-Schnittstelle	[`HTMLAnchorElement`](/de/docs/Web/API/HTMLAnchorElement)

`Spezifikationen`

Specification
HTML # the-a-element

`Browser-Kompatibilität`

Siehe auch ist dem ähnlich, aber für Metadaten-Hyperlinks, die für Benutzer unsichtbar sind. :link ist eine CSS-Pseudoklasse, die -Elemente mit einer URL im href-Attribut, die noch nicht vom Benutzer besucht wurde, übereinstimmen lässt. :visited ist eine CSS-Pseudoklasse, die -Elemente mit einer URL im href-Attribut, die vom Benutzer in der Vergangenheit besucht wurde, übereinstimmen lässt. :any-link ist eine CSS-Pseudoklasse, die -Elemente mit href-Attribut übereinstimmen lässt. Textfragmente sind benutzeragenten-Guidelines, die zu URLs hinzugefügt wurden und es Inhaltsautoren ermöglichen, zu spezifischem Text auf einer Seite zu verlinken, ohne dass IDs erforderlich sind. MDN-Feedback-Box War diese Übersetzung hilfreich? Diese Seite wurde automatisch aus dem Englischen übersetzt. Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden