Links

Links sind der Grund, warum das Web ein Netz ist und keine Sammlung einzelner Seiten. Das Element dafür heißt a, kurz für „anchor“, also Anker.

01 / 03href ist das Ziel

Ein Link braucht genau zwei Dinge: ein Ziel und einen Text, den man anklickt.

<p>Alle Rezepte findest du in der <a href="/rezepte">Rezeptübersicht</a>.</p>

<p>Die Zutaten kaufe ich meist bei <a href="https://example.com">Beispielmarkt</a>.</p>

Das Ziel steht im Attribut href, für „hypertext reference“. Der Text zwischen den Tags ist das, was der Nutzer sieht und klickt.

Im ersten Absatz zeigt der Link auf eine eigene Seite, im zweiten nach außen zu einer fremden Adresse. Wie genau diese Adressen aufgebaut sind, welche mit https:// beginnen und welche mit einem Schrägstrich, ist ein Thema für sich. Das ist die nächste Lektion, hier reicht: In href steht, wohin es geht.

Klick beide an und schau auf die Adresszeile. Beim ersten steht danach /rezepte dort, samt der Meldung, dass es diese Seite hier nicht gibt. Der zweite führt nach draußen, und fremde Seiten zeigt der Browser hier nicht an: Die Seite bleibt stehen, aber in der Adresszeile steht die Adresse, zu der der Link geführt hätte. Auf deiner echten Seite später funktioniert beides ganz normal.

Der Browser stellt Links standardmäßig blau und unterstrichen dar und färbt besuchte Links anders ein. Das ist wieder nur eine Voreinstellung. Wichtig ist etwas anderes: Ein Link ist von Haus aus per Tastatur erreichbar, hat einen Fokus-Ring und lässt sich mit der Eingabetaste auslösen. Nichts davon musst du selbst bauen, und genau deshalb ist ein nachgebauter Klick-div immer die schlechtere Lösung.

02 / 03Der Linktext ist Teil der Information

Jetzt der Teil, der in der Praxis am häufigsten schiefgeht:

<p>Wenn du wissen willst, wie Blanchieren geht, <a href="/technik/blanchieren">klicke hier</a>.</p>

<p>So funktioniert <a href="/technik/blanchieren">Blanchieren Schritt für Schritt</a>.</p>

Beide Links führen zum selben Ziel. Trotzdem ist nur einer brauchbar.

„Klicke hier“ beschreibt nicht das Ziel, sondern die Handlung, und die ist ohnehin klar. Der Grund, warum das mehr als eine Stilfrage ist: Screenreader können sich alle Links einer Seite als Liste vorlesen lassen, damit man schnell zum richtigen springt. Aus einer Liste mit acht Mal „hier klicken“ wird niemand schlau. Suchmaschinen nutzen den Linktext ebenfalls, um einzuschätzen, worum es auf der Zielseite geht.

Die Regel ist einfach: Der Linktext soll auch dann verständlich sein, wenn man ihn ohne den Satz drumherum liest. Statt „mehr erfahren“ also „mehr über unsere Lieferzeiten“.

03 / 03Neue Tabs, Mail und Telefon

Ein Link kann mehr als eine andere Seite öffnen:

<p><a href="https://example.com" target="_blank" rel="noopener">Beispielmarkt (öffnet in neuem Tab)</a></p>

<p>Fragen? <a href="mailto:hallo@example.com">Schreib mir eine Mail</a></p>

<p>Oder ruf an: <a href="tel:+4930123456">030 123456</a></p>

<p><a href="/downloads/einkaufsliste.pdf" download>Einkaufsliste als PDF laden</a></p>

target="_blank" öffnet das Ziel in einem neuen Tab. Dazu gehört rel="noopener": Ohne das bekommt die geöffnete Seite über JavaScript Zugriff auf das Fenster, aus dem sie geöffnet wurde, und kann es umleiten. Moderne Browser setzen den Schutz inzwischen von allein, hinschreiben kostet trotzdem nichts. Und sag im Linktext, dass sich ein Tab öffnet, sonst wundern sich Nutzer über den toten Zurück-Knopf.

mailto: öffnet das Mailprogramm, tel: startet auf dem Handy einen Anruf. Beides sind normale Links, nur mit einem anderen Protokoll vor der Adresse.

Das Boolean-Attribut download sagt dem Browser, dass er die Datei speichern statt anzeigen soll. Praktisch bei PDFs, die sonst im Browser-Viewer landen.

Hier siehst du von alldem wenig: Ein neuer Tab geht nicht auf, Mail und Telefon melden sich nur in der Adresszeile, und der Download landet auf der Seite, die es hier nicht gibt. Auf deiner echten Seite macht der Browser alle drei Dinge.