Links

In der Einführung zu Attributen haben wir ein Beispiel dafür gegeben, wie Attribute dem Starttag hinzugefügt werden. Im Beispiel wurde das <a>-Tag verwendet, aber weder das Element noch die in diesem Beispiel eingeführten Attribute wurden erläutert.

Mit dem Anker-Tag <a> und dem Attribut href wird ein Hyperlink erstellt. Links sind das Rückgrat des Internets. Die erste Webseite enthielt 25 Links mit dem Text „Alles, was online über W3 verfügbar ist, ist direkt oder indirekt mit diesem Dokument verknüpft.“ Höchstwahrscheinlich ist alles, was online über W3 verfügbar ist, direkt oder indirekt mit diesem Dokument verknüpft.

Die Leistungsfähigkeit des Webs und des <a>-Tags haben sich seit der ersten Erklärung von Tim Berners-Lee im August 1991 enorm weiterentwickelt. Links stellen eine Verbindung zwischen zwei Ressourcen dar, von denen eine das aktuelle Dokument ist. Links können von <a>, <area>, <form>> und <link> erstellt werden. Sie haben <link> kennengelernt und finden Formulare in einem separaten Abschnitt. Außerdem gibt es einen eigenen Bereich für das Lernen mit Formularen. In dieser Sitzung erfahren Sie mehr über das einbuchstabige, aber nicht so einfache <a>-Tag.

Das Attribut href

Das Attribut href ist zwar nicht erforderlich, kommt aber in fast allen <a>-Tags vor. Durch die Angabe der Adresse des Hyperlinks wird aus <a> ein Link. Mit dem Attribut href werden Hyperlinks zu Positionen auf der aktuellen Seite, zu anderen Seiten auf einer Website oder zu anderen Websites erstellt. Es kann auch so programmiert werden, dass Dateien heruntergeladen oder E‑Mails an eine bestimmte Adresse gesendet werden, einschließlich Betreff und vorgeschlagenem E‑Mail-Text.

<a href="https://machinelearningworkshop.com">Machine Learning Workshop</a>
<a href="#teachers">Our teachers</a>
<a href="https://machinelearningworkshop.com#teachers">MLW teachers</a>
<a href="mailto:hal9000@machinelearningworkshop.com">Email Hal</a>
<a href="tel:8005551212">Call Hal</a>

Der erste Link enthält eine absolute URL, die auf jeder Website verwendet werden kann, um zur MLW-Startseite zu gelangen. Absolute URLs enthalten ein Protokoll, in diesem Fall https://, und einen Domainnamen. Wenn das Protokoll als // geschrieben wird, handelt es sich um ein implizites Protokoll, das bedeutet: „Verwende dasselbe Protokoll, das gerade aktiv verwendet wird.“

Relative URLs enthalten kein Protokoll und keinen Domainnamen. Sie sind relativ zur aktuellen Datei. MLW ist eine Single-Page-Website, diese HTML-Serie hat jedoch mehrere Abschnitte. Um von dieser Seite zur Lektion zu Attributen zu verlinken, wird eine relative URL verwendet: <a href="../attributes/">Attributes</a>.

Der zweite Link ist nur eine Linkfragment-Kennung und verweist auf das Element mit id="teachers", auf der aktuellen Seite, falls vorhanden. Browser unterstützen auch zwei Links zum Seitenanfang: Wenn der Nutzer auf <a href="#top">Top</a> (Groß-/Kleinschreibung wird nicht beachtet) oder nur auf <a href="#">Top</a> klickt, wird er zum Seitenanfang zurückgeleitet, sofern kein Element mit der ID top in derselben Groß-/Kleinschreibung vorhanden ist.

Die MLW ist ein ziemlich langes Dokument. Um das Scrollen zu vermeiden, können Sie unten im Abschnitt #teachers einen Link zurück nach oben einfügen:

<a href="#top">Go to top.</a>

Der dritte Link kombiniert die beiden Werte: Er enthält eine absolute URL, gefolgt von einem Linkfragment. So kann direkt auf einen Abschnitt in der angegebenen URL verlinkt werden, in diesem Fall auf den Abschnitt #teachers der MLW-Startseite. Die MLW-Seite wird geladen und der Browser scrollt zum Bereich „Lehrer“, ohne das Fragment in der HTTP-Anfrage zu senden.

Das Attribut href kann mit mailto: oder tel: beginnen, um E‑Mails zu senden oder Anrufe zu starten. Die Verarbeitung des Links hängt vom Gerät, Betriebssystem und den installierten Anwendungen ab.

Der Link mailto muss keine E-Mail-Adresse enthalten, kann aber zusammen mit cc, bcc, subject und body verwendet werden, um die E-Mail vorab auszufüllen. Standardmäßig wird ein E‑Mail-Client geöffnet. Sie können den Betreff und den Text der E‑Mail ohne E‑Mail-Adresse vorab ausfüllen, damit Websitebesucher ihre eigenen Freunde einladen können. In unserem Link in der Fußzeile des Dokuments ist die URL zur Registrierung enthalten:

<a href="mailto:?subject=Join%20me%21&body=You%20need%20to%20show%20your%20human%20that%20you%20can%27t%20be%20owned%21%20Sign%20up%20for%20Machine%20Learning%20workshop.%20We%20are%20taking%20over%20the%20world.%20http%3A%2F%2Fwww.machinelearning.com%23reg
">Tell a machine</a>

Das Fragezeichen (?) trennt die mailto: und die E‑Mail-Adresse (falls vorhanden) vom Suchbegriff. In der Abfrage werden die Felder durch Et-Zeichen (&) getrennt und mit Gleichheitszeichen (=) wird jeder Feldname seinem Wert zugewiesen. Der gesamte String ist prozentual codiert. Das ist unbedingt erforderlich, wenn der href-Wert nicht in Anführungszeichen gesetzt ist oder wenn die Werte Anführungszeichen enthalten.

Welche App geöffnet wird, wenn der Nutzer auf einen tel-Link klickt, tippt oder die Eingabetaste drückt, hängt vom Betriebssystem, den installierten Anwendungen und den Einstellungen ab, die der Nutzer auf seinem Gerät hat. Auf einem iPhone wird möglicherweise FaceTime, die Telefon App oder Kontakte geöffnet. Auf einem Windows-Desktop wird möglicherweise Skype geöffnet, sofern es installiert ist.

Es gibt verschiedene andere Arten von URLs, z. B. Blobs und Daten-URLs (siehe Beispiele in der Diskussion zum Attribut download). Für sichere Websites (die über https bereitgestellt werden) ist es möglich, mit registerProtocolHandler() app-spezifische Protokolle zu erstellen und auszuführen.

Wenn Sie Links einfügen, die wahrscheinlich andere installierte Anwendungen öffnen, sollten Sie den Nutzer darüber informieren. Der Text zwischen dem öffnenden und dem schließenden Tag muss dem Nutzer mitteilen, welche Art von Link er aktivieren wird. Mit CSS-Attributselektoren wie [href^="mailto:"], [href^="tel:"] und [href$=".pdf"] können Sie Stile nach Anwendungstyp ausrichten.

Herunterladbare Ressourcen

Das Attribut download sollte angegeben werden, wenn href auf eine herunterladbare Ressource verweist. Der Wert des Attributs „download“ ist der vorgeschlagene Dateiname für die Ressource, die im lokalen Dateisystem des Nutzers gespeichert werden soll. SVGOMG, der SVG-Optimierer, verwendet das Attribut download, um einen Dateinamen für den herunterladbaren Blob vorzuschlagen, den der Optimierer erstellt. Wenn hal.svg optimiert wird, sieht das Öffnungstag des Downloadlinks von SVGOMG so aus:

<a href="blob:https://jakearchibald.github.io/944a5fc8-fdb3-458a-91ee-cdd5964b6646" download="hal.svg">

Es gibt auch eine Demo von <canvas>, die eine herunterladbare PNG-Daten-URL erstellt.

Wenn Sie einen Link zu einer herunterladbaren Ressource einfügen möchten, geben Sie die URL des Assets als Wert des Attributs href und einen vorgeschlagenen Dateinamen für den Nutzer als Wert des Attributs download an.

Browserkontext

Mit dem Attribut target kann der Browsing-Kontext für die Linknavigation (und Formularübermittlung) definiert werden. Die vier nicht groß- und kleinschreibungsabhängigen Keywords mit Unterstrich wurden im Zusammenhang mit dem Element <base> behandelt. Dazu zählen:

• (Standard) _self: Link im aktuellen Fenster öffnen.
• _blank: Link in neuem Tab öffnen.
• _parent: Link im übergeordneten Objekt oder iFrame öffnen.
• _top: Link im obersten Ancestor öffnen. Das ist besonders nützlich, wenn der Link tief verschachtelt ist.

Wenn der Link nicht verschachtelt ist, verhalten sich _top und _parent wie _self. Das Attribut target ist nicht auf diese vier Schlüsselbegriffe beschränkt. Es kann jeder Begriff verwendet werden.

Jeder Browsing-Kontext (oder jeder Browser-Tab) hat einen Namen. Mit Links können Sie Links im aktuellen Tab, in einem neuen unbenannten Tab oder in einem neuen oder vorhandenen benannten Tab öffnen. Standardmäßig ist der Name ein leerer String.

Um einen Link auf einem neuen Tab zu öffnen, kann der Nutzer mit der rechten Maustaste klicken und „In neuem Tab öffnen“ auswählen. Entwickler können dies erzwingen, indem sie target="_blank" einfügen.

Ein Link mit target="_blank" wird in einem neuen Tab mit einem Nullnamen geöffnet. Bei jedem Linkklick wird also ein neuer, unbenannter Tab geöffnet. Dadurch können viele neue Tabs geöffnet werden. Zu viele Tabs. Wenn der Nutzer beispielsweise 15-mal auf <a href="registration.html" target="_blank">Register Now</a> klickt, wird das Registrierungsformular in 15 separaten Tabs geöffnet. Dieses Problem kann behoben werden, indem Sie einen Namen für den Tabkontext angeben. Wenn Sie das Attribut target mit einem wertbezogenen Wert wie <a href="registration.html" target="reg">Register Now</a> einfügen, wird beim ersten Klick das Registrierungsformular auf einem neuen Tab reg geöffnet. Wenn Sie 15 Mal auf diesen Link klicken, wird die Registrierung im reg-Browserkontext neu geladen, ohne dass zusätzliche Tabs geöffnet werden.

Mit dem Attribut rel wird festgelegt, welche Arten von Links erstellt werden. Es definiert die Beziehung zwischen dem aktuellen Dokument und der im Hyperlink verknüpften Ressource. Der Wert des Attributs muss eine durch Leerzeichen getrennte Liste mit einem oder mehreren Werten des Attributs „score of rel“ sein, die vom <a>-Tag unterstützt werden.

Das Keyword nofollow kann eingefügt werden, wenn Sie nicht möchten, dass Spiders dem Link folgen. Der Wert external kann hinzugefügt werden, um anzugeben, dass der Link zu einer externen URL führt und nicht zu einer Seite innerhalb der aktuellen Domain. Der Suchbegriff help gibt an, dass der Hyperlink kontextbezogene Hilfe bietet. Wenn Sie den Mauszeiger auf einen Link mit diesem rel-Wert bewegen, wird ein Hilfecursor anstelle des normalen Zeigers angezeigt. Verwenden Sie diesen Wert nicht nur, um den Hilfecursor zu erhalten, sondern stattdessen die CSS-Eigenschaft cursor. Die Werte prev und next können für Links zum vorherigen und nächsten Dokument in einer Reihe verwendet werden.

Ähnlich wie bei <link rel="alternative"> hängt die Bedeutung von <a rel="alternative"> von anderen Attributen ab. RSS-Feed-Alternativen enthalten auch type="application/rss+xml" oder type="application/atom+xml, alternative Formate das Attribut type und Übersetzungen das Attribut hreflang. Wenn der Inhalt zwischen dem öffnenden und dem schließenden Tag in einer anderen Sprache als der Hauptsprache des Dokuments ist, fügen Sie das Attribut lang ein. Wenn die Sprache des verlinkten Dokuments eine andere ist, fügen Sie das Attribut hreflang ein.

In diesem Beispiel wird die URL der übersetzten Seite als Wert von href angegeben. Mit rel="alternate" wird angegeben, dass es sich um eine alternative Version einer Website handelt. Das Attribut hreflang gibt die Sprache der Übersetzungen an:

<a href="/fr" hreflang="fr-FR" rel="alternate" lang="fr-FR">atelier d'apprentissage mechanique</a>
<a href="/pt" hreflang="pt-BR" rel="alternate" lang="pt-BR">oficina de aprendizado de máquina</a>

Wenn die französische Übersetzung ein PDF ist, können Sie das Attribut „type“ mit dem PDF-MIME-Typ der verknüpften Ressource angeben. Der MIME-Typ ist zwar nur ein Hinweis, aber es ist immer eine gute Idee, den Nutzer darüber zu informieren, dass durch einen Link ein Dokument in einem anderen Format geöffnet wird.

<a href="/fr.pdf" hreflang="fr-FR" rel="alternate" lang="fr-FR" type="application/x-pdf">atelier d'apprentissage mechanique (pdf).</a>

Link-Klicks erfassen

Eine Möglichkeit, Nutzerinteraktionen zu erfassen, besteht darin, eine URL zu pingen, wenn auf einen Link geklickt wird. Das Attribut ping enthält, sofern vorhanden, eine durch Leerzeichen getrennte Liste sicherer URLs (die mit https beginnen), die benachrichtigt oder angepingt werden sollen, wenn der Nutzer den Hyperlink aktiviert. Der Browser sendet POST-Anfragen mit dem Text PING an die URLs, die als Wert des Attributs ping aufgeführt sind.

Tipps zur Nutzerfreundlichkeit

• Achten Sie beim Schreiben von HTML immer auf die Nutzerfreundlichkeit. Links sollten genügend Informationen zur verlinkten Ressource enthalten, damit der Nutzer weiß, worauf er klickt.
• Innerhalb eines Textblocks sollte sich die Darstellung Ihrer Links ausreichend vom umgebenden Text unterscheiden, damit Nutzer Links leichter von anderen Inhalten unterscheiden können. Verwenden Sie mehrere visuelle Hinweise wie Farbe und Unterstreichung. Farbe allein reicht nicht aus.
• Fokusstile immer einfügen So wissen Nutzer, die die Tastatur zur Navigation verwenden, wo sie sich befinden, wenn sie durch Ihre Inhalte tabben.
• Der Inhalt zwischen dem öffnenden <a>- und dem schließenden </a>-Tag ist der standardmäßige barrierefreie Name des Links und sollte den Nutzer über das Ziel oder den Zweck des Links informieren. Wenn der Inhalt eines Links ein Bild ist, ist die alt-Beschreibung der barrierefreie Name. Linktext und alt-Text sollten aussagekräftiger sein als „Hier klicken“ oder „Weitere Informationen“. Stattdessen sollte der Nutzer darüber informiert werden, wohin er gelangt, wenn der Link aktiviert wird. Das ist wichtig für Screenreader-Nutzer und Suchmaschinenergebnisse.
• Fügen Sie keine interaktiven Inhalte wie <button> oder <input> in einen Link ein. Verschachteln Sie Links auch nicht in <button>- oder <label>-Elementen. Die HTML-Seite wird zwar weiterhin gerendert, aber das Einbetten von fokussierbaren und anklickbaren Elementen in interaktive Elemente führt zu einer schlechten Nutzererfahrung.
• Wenn das Attribut href vorhanden ist, wird das <a>-Element aktiviert, wenn die Eingabetaste gedrückt wird, während es fokussiert ist.
• Links sind nicht auf HTML beschränkt. Das a-Element kann auch in einem SVG verwendet werden, um mit den Attributen „href“ oder „xlink:href“ einen Link zu erstellen.

Links und JavaScript

Das Attribut links gibt ein HTMLCollection zurück, das mit den Elementen a und area übereinstimmt und ein href-Attribut hat.

let a = document.links[0]; // obtain the first link in the document

a.href = 'newpage.html'; // change the destination URL of the link
a.protocol = 'ftp'; // change just the scheme part of the URL
a.setAttribute('href', 'https://machinelearningworkshop.com/'); // change the attribute content directly

In diesem Abschnitt haben Sie alles über Links gelernt. Im nächsten Abschnitt geht es um Listen, die wir benötigen, um Linklisten zu erstellen, die auch als Navigation bezeichnet werden.

Wissen testen

Wissen zu Links testen