Links

In der Einführung zum Abschnitt „Attribute“ haben Sie ein Beispiel gesehen, das zeigt, wie Attribute zum öffnenden Tag hinzugefügt werden. In diesem Beispiel wurde das Tag <a> verwendet, aber es wurden weder das Element noch die spezifischen Attribute besprochen, die in diesem Beispiel vorgestellt wurden:

Das Anchor-Tag <a> erstellt zusammen mit dem Attribut href einen Hyperlink. Links sind das Rückgrat des Internets. Die erste Webseite enthielt 25 Links mit den Informationen „Alles im Internet über W3 ist direkt oder indirekt mit diesem Dokument verknüpft“. Sehr wahrscheinlich ist auch alles online über W3 direkt oder indirekt verlinkt.

Seit der Veröffentlichung dieser ersten Erklärung von Tim Berners-Lee im August 1991 ist die Leistungsfähigkeit des Webs und des <a>-Tags enorm gewachsen. 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. Jetzt wissen Sie alles über <link>. Formulare finden Sie in einem separaten Abschnitt. Es gibt auch einen ganzen Lernbereich für Formulare. In dieser Sitzung lernen Sie das aus einzelnen Buchstaben bestehende, nicht so einfache <a>-Tag kennen.

Das Attribut href

Das Attribut href ist zwar nicht erforderlich, ist aber in fast allen <a>-Tags enthalten. Durch die Angabe der Adresse des Hyperlinks wird das <a> in einen Link umgewandelt. Das Attribut href wird verwendet, um Hyperlinks zu Stellen auf der aktuellen Seite, anderen Seiten innerhalb einer Website oder ganz anderen Websites zu erstellen. Sie kann auch so codiert werden, dass sie Dateien herunterlädt oder eine E-Mail an eine bestimmte Adresse sendet, einschließlich eines Betreffs und eines vorgeschlagenen E-Mail-Texts.

<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 von jeder Website weltweit verwendet werden kann, um zur MLW-Startseite zu gelangen. Absolute URLs enthalten ein Protokoll, in diesem Fall https://, und einen Domainnamen. Wenn das Protokoll einfach als // geschrieben wird, ist es ein implizites Protokoll und bedeutet, dass dasselbe Protokoll verwendet wird, das gerade verwendet wird.

Relative URLs enthalten weder ein Protokoll noch einen Domainnamen. Sie sind relativ zur aktuellen Datei. MLW ist eine Website mit nur einer Seite, aber diese HTML-Serie besteht aus mehreren Abschnitten. Um von dieser Seite auf die Attributlektion zu verlinken, wird eine relative URL verwendet: <a href="../attributes/">Attributes</a>.

Der zweite Link ist nur eine Linkfragment-ID und verweist auf das Element mit id="teachers",, falls vorhanden, auf der aktuellen Seite. Browser unterstützen auch zwei „Top-of-Page“-Links: Durch Klicken auf <a href="#top">Top</a> (Groß-/Kleinschreibung wird nicht berücksichtigt) oder einfach auf <a href="#">Top</a> gescrollt, um den Nutzer auf der Seite nach oben zu scrollen, es sei denn, es gibt ein Element mit der ID top und der Groß- und Kleinschreibung.

MLW ist ein ziemlich langes Dokument. Um Scrollen zu sparen, können Sie einen Link vom unteren Rand des Abschnitts #teachers 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. Dadurch ist eine direkte Verknüpfung zu einem Abschnitt in der definierten URL möglich, in diesem Fall dem Abschnitt #teachers der MLW-Startseite. Die MLW-Seite wird geladen. Dann scrollt der Browser zum Abschnitt „Teachers“, 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 tätigen. Die Verarbeitung des Links hängt dabei vom Gerät, dem Betriebssystem und den installierten Anwendungen ab.

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

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

Durch das Fragezeichen (?) werden mailto: und die E-Mail-Adresse, falls vorhanden, vom Suchbegriff getrennt. Innerhalb der Abfrage werden die Felder durch das Und-Zeichen (&) getrennt. Gleichheitszeichen (=) setzen jeden Feldnamen mit seinem Wert ein. Der gesamte String ist prozentcodiert, was auf jeden Fall erforderlich ist, wenn der href-Wert nicht in Anführungszeichen gesetzt ist oder 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 Apps und den Einstellungen des Nutzers auf seinem Gerät ab. Auf einem iPhone können FaceTime, die Telefon App oder Kontakte geöffnet werden. Skype wird möglicherweise über einen Windows-Desktop geöffnet, falls es installiert ist.

Es gibt mehrere andere URL-Typen wie Blobs und Daten-URLs (siehe Beispiele in der Diskussion zu download-Attributen). Für sichere Websites, die über https bereitgestellt werden, ist es möglich, mit registerProtocolHandler() anwendungsspezifische Protokolle zu erstellen und auszuführen.

Wenn Sie Links einfügen, über die andere installierte Anwendungen mit hoher Wahrscheinlichkeit geöffnet werden, empfiehlt es sich, den Nutzer darüber zu informieren. Achte darauf, dass der Text zwischen dem öffnenden und dem schließenden Tag dem Nutzer mitteilt, welche Art von Link er aktivieren möchte. CSS-Attributselektoren wie [href^="mailto:"], [href^="tel:"] und [href$=".pdf"] können verwendet werden, um Stile nach Anwendungstyp auszurichten.

Herunterladbare Ressourcen

Das Attribut download sollte enthalten sein, 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, das SVG-Optimierungstool, verwendet das Attribut download, um einen Dateinamen für das herunterladbare Blob vorzuschlagen, das von der Optimierung erstellt wird. Wenn hal.svg optimiert ist, sieht das Tag zum Öffnen des Download-Links in SVGOMG in etwa so aus:

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

Es gibt auch eine Demo eines <canvas>, mit dem eine herunterladbare URL für PNG-Daten erstellt wird.

Wenn Sie einen Link zu einer herunterladbaren Ressource erstellen möchten, geben Sie die URL des Assets als Wert des Attributs href und den vorgeschlagenen Dateinamen, der im Dateisystem des Nutzers verwendet werden kann, als Wert des Attributs download an.

Browserkontext

Mit dem Attribut target kann der Browserkontext für die Linknavigation (und das Senden von Formularen) definiert werden. Die vier Keywords, bei denen die Groß-/Kleinschreibung nicht berücksichtigt wird und die mit Unterstrichen beginnen, wurden mit dem Element <base> besprochen. Dazu gehören das Standard-_self (das aktuelle Fenster), _blank zum Öffnen des Links in einem neuen Tab, _parent (das übergeordnete Element, wenn der aktuelle Link in einem Objekt oder iFrame verschachtelt ist) und _top (der oberste Ancestor). Dies ist besonders nützlich, wenn der aktuelle Link tief verschachtelt ist. _top und _parent sind mit _self identisch, wenn der Link nicht verschachtelt ist. Das Attribut target ist nicht auf die folgenden vier Schlüsselbegriffe beschränkt: Es kann jeder beliebige Begriff verwendet werden.

Jeder Browser-Kontext, also jeder Browser-Tab, hat einen Browser-Kontextnamen. Links können Links im aktuellen Tab, auf einem neuen unbenannten Tab oder auf einem neuen oder vorhandenen benannten Tab öffnen. Standardmäßig ist der Name der leere String. Um einen Link in 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" einschließen.

Ein Link mit target="_blank" wird in einem neuen Tab mit einem Nullnamen geöffnet. Dabei wird bei jedem Klick auf einen Link ein neuer, unbenannter Tab geöffnet. Dadurch können viele neue Tabs erstellt 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. Sie können dieses Problem beheben, indem Sie einen Namen für den Tab-Kontext angeben. Wenn Sie das Attribut target mit einem Wert wie <a href="registration.html" target="reg">Register Now</a> angeben, bei dem die Groß-/Kleinschreibung zu beachten ist, wird beim ersten Klick auf diesen Link das Anmeldeformular in einem neuen reg-Tab geöffnet. Wenn Sie noch 15-mal auf diesen Link klicken, wird die Registrierung im Browser-Kontext reg neu geladen, ohne dass weitere Tabs geöffnet werden.

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

Sie können das Keyword nofollow verwenden, wenn Sie nicht möchten, dass Spider dem Link folgen. Mit dem Wert external kann angegeben werden, dass der Link zu einer externen URL führt und keine Seite innerhalb der aktuellen Domain ist. Das Schlüsselwort help gibt an, dass der Hyperlink kontextsensitive Hilfe bietet. Wenn Sie die Maus über einen Link mit diesem rel-Wert bewegen, wird anstelle des normalen Mauszeigers ein Hilfe-Cursor angezeigt. Verwende diesen Wert nicht nur, um den Hilfe-Cursor abzurufen. Verwende stattdessen die CSS-Eigenschaft cursor. Die Werte prev und next können für Links verwendet werden, die auf das vorherige und das nächste Dokument einer Reihe verweisen.

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

In diesem Beispiel wird die URL der übersetzten Seite als Wert von href, rel="alternate" angegeben, um anzugeben, 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 es sich bei der französischen Übersetzung um eine PDF-Datei handelt, können Sie das Typattribut zusammen mit dem PDF-MIME-Typ der verknüpften Ressource angeben. Auch wenn der MIME-Typ lediglich eine Empfehlung ist, ist es immer sinnvoll, den Nutzer darüber zu informieren, dass über 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>

Klicks auf Links erfassen

Eine Möglichkeit, Nutzerinteraktionen zu verfolgen, 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 gepingt 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 Nutzererfahrung

• Berücksichtigen Sie beim Schreiben von HTML immer die User Experience. Links sollten genügend Informationen über die verknüpfte Ressource enthalten, damit der Nutzer weiß, worauf er klickt.
• Die Links innerhalb eines Textblocks müssen sich so weit vom umgebenden Text unterscheiden, dass Nutzer sie leicht vom Rest des Inhalts unterscheiden können. Achten Sie außerdem darauf, dass Farbe nicht das einzige Mittel ist, um zwischen Text und umgebenden Inhalt zu unterscheiden.
• Immer Fokusstile einschließen; damit können Tastaturnavigatoren wissen, wo sie sich befinden, wenn Sie durch Ihre Inhalte mit der Tabulatortaste wechseln.
• Der Inhalt zwischen dem öffnenden <a> und dem schließenden </a> ist der standardmäßig zugängliche 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 zugängliche Name. Unabhängig davon, ob der zugängliche Name aus dem Attribut alt oder aus einer Teilmenge von Wörtern in einem Textblock stammt, muss er Informationen zum Ziel des Links enthalten. Der Linktext sollte aussagekräftiger sein als „Klicken Sie hier“ oder „Weitere Informationen“. Dies ist wichtig für Nutzer von Screenreadern und Ihre Suchmaschinenergebnisse!
• Ein Link darf keine interaktiven Inhalte wie <button> oder <input> enthalten. Verschachtele Links auch nicht in <button> oder <label>. Während die HTML-Seite weiterhin gerendert wird, beeinträchtigt das Verschachteln fokussierbarer und anklickbarer Elemente innerhalb interaktiver Elemente die Nutzererfahrung.
• Wenn das Attribut href vorhanden ist, wird es durch Drücken der Eingabetaste aktiviert, während das Element <a> im Fokus ist.
• Links sind nicht auf HTML beschränkt. Das a-Element kann auch in einem SVG verwendet werden und einen Link mit den Attributen „href“ oder „xlink:href“ bilden.

Links und JavaScript

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

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 lernen müssen, damit wir sie in Listen mit Links gruppieren können (auch als Navigation bezeichnet).

Überprüfen Sie Ihr Wissen

Testen Sie Ihr Wissen über Links.