Links

Das H in HTML steht für Hypertext: Text, der auf anderen Text verweist. Ein einziges Element, a, erzeugt jeden Link im Web.

Das Anker-Element

Ein Link entsteht mit dem Element <a>, kurz für anchor (Anker). Sein Attribut href enthält die Zieladresse, und sein Inhalt ist der Text, den man anklickt. In <a href="https://developer.mozilla.org/">MDN Web Docs</a> erscheinen die Wörter MDN Web Docs unterstrichen, und wer sie aktiviert, lädt diese Adresse. Links funktionieren mit Maus, Finger oder Tastatur: Mit Tab springst du von Link zu Link, mit der Eingabetaste folgst du einem. Ohne href ist ein <a> nur ein Platzhalter und mit Tab nicht erreichbar.

Absolute und relative Adressen

Eine absolute URL enthält alles: das Schema (https:), die Domain und den Pfad, zum Beispiel https://example.com/menu/bread.html. Verwende sie für Links zu anderen Websites. Eine relative URL lässt die Teile weg, die mit der aktuellen Seite übereinstimmen. Auf einer Seite unter https://example.com/menu/index.html bedeutet der Link bread.html die Datei im selben Ordner, ../about.html einen Ordner höher, und /contact.html beginnt beim Stammverzeichnis der Website. Relative Links funktionieren weiter, wenn die ganze Website auf eine neue Domain umzieht.

<a href="https://www.w3.org/">W3C</a>          <!-- another site -->
<a href="bread.html">Bread</a>                <!-- same folder -->
<a href="../about.html">About us</a>          <!-- one folder up -->
<a href="#hours">Opening hours</a>           <!-- same page -->
<a href="mailto:hello@example.com">Email us</a>

<h2 id="hours">Opening hours</h2>

Links innerhalb derselben Seite

Gib einem beliebigen Element eine id, und ein Link, dessen href aus einer Raute und dieser id besteht, springt direkt dorthin. <a href="#hours"> scrollt zu <h2 id="hours">. Eine id muss innerhalb der Seite eindeutig sein und darf keine Leerzeichen enthalten. Lange Artikel nutzen das für ein Inhaltsverzeichnis, und viele Websites setzen ganz oben einen Sprunglink (Zum Hauptinhalt springen), damit Tastaturnutzer nicht auf jeder Seite mit Tab durch das ganze Menü müssen.

E-Mail, Telefon und Downloads

Andere Schemata öffnen andere Programme. mailto:hello@example.com öffnet eine neue E-Mail im Mailprogramm des Besuchers, und tel:+82212345678 bietet auf einem Handy an, die Nummer anzurufen. Das Attribut download an einem Link bittet den Browser, die Datei zu speichern statt sie zu öffnen. Solche Links sind praktisch, aber sag im Linktext, was sie tun, denn niemand rechnet damit, dass plötzlich ein Mailprogramm aufgeht.

Neue Tabs und guter Linktext

target="_blank" öffnet den Link in einem neuen Tab. Setz es sparsam ein: Es nimmt dem Besucher die Kontrolle, und die Zurück-Schaltfläche bringt ihn nicht mehr zurück. Wenn du es doch verwendest, erwähn es im Linktext, zum Beispiel (öffnet in neuem Tab). Am wichtigsten ist aber der Linktext selbst. Screenreader-Nutzer lassen sich oft eine Liste aller Links einer Seite anzeigen, und eine Liste mit zehn Einträgen, die alle „hier klicken“ oder „mehr lesen“ heißen, sagt ihnen gar nichts. Schreib Text, der auch ohne Zusammenhang verständlich ist: „Fahrplan 2026 herunterladen“, nicht „hier klicken“.

Browser unterstreichen Links standardmäßig und färben sie blau, besuchte Links violett. Du kannst Links mit CSS umgestalten, aber behalte neben der Farbe noch etwas anderes bei, etwa die Unterstreichung, damit auch Menschen, die die Farben nicht unterscheiden können, sehen, welche Wörter Links sind. Hat ein Link den Tastaturfokus, zeichnen Browser einen Fokusrahmen darum. Entferne diesen Rahmen nie, ohne einen deutlichen Ersatz an seine Stelle zu setzen.