Links: das Web verknüpfen

Ohne Links wäre das Web nur ein Stapel loser Dokumente. Erst der Verweis von einer Seite zur nächsten macht aus Milliarden einzelner Dateien ein Netz – genau das steckt im „HyperText“ von HTML. In dieser Lektion lernst du das Element, das all das leistet: Du verlinkst fremde Websites und eigene Unterseiten, springst zu Abschnitten mitten auf einer Seite, startest E-Mails per Klick – und erfährst, warum „hier klicken“ der schlechteste Linktext der Welt ist.

Ein Link besteht aus dem Element <a> (für anchor, „Anker“) und seinem wichtigsten Attribut href (hypertext reference), das die Zieladresse enthält. Der Inhalt zwischen öffnendem und schließendem Tag ist der Linktext – der klickbare, standardmäßig blau unterstrichene Teil:

<a> ist ein Inline-Element: Es schmiegt sich mitten in den Satz, ohne eine neue Zeile zu beginnen. Verlinken kannst du fast alles – einzelne Wörter, ganze Sätze, in der nächsten Lektion auch Bilder. Und noch ein Detail: Ohne href ist ein <a> gar kein Link. Erst das Attribut macht das Element klickbar und per Tastatur erreichbar.

Die Farben kennst du aus dem Alltag: Unbesuchte Links stellt der Browser blau dar, bereits besuchte violett. Diese Unterscheidung ist älter als die meisten Websites – und sie hilft Besuchern bis heute, sich zu orientieren, welche Wege sie schon gegangen sind. Auch das lässt sich später mit CSS gestalten; die Funktion dahinter bleibt dieselbe.

Für das Ziel im href gibt es zwei grundverschiedene Schreibweisen. Eine absolute URL ist die vollständige Adresse inklusive https:// – sie funktioniert von überall aus und ist Pflicht, wenn du auf fremde Websites verlinkst.

Innerhalb deiner eigenen Website nutzt du dagegen relative URLs: Pfadangaben, die vom Speicherort der aktuellen Datei ausgehen – wie eine Wegbeschreibung ab deinem Standort statt einer vollständigen Postanschrift. Die vier wichtigsten Muster:

Warum die Mühe mit relativen Pfaden? Sie haben zwei große Vorteile: Sie funktionieren unverändert auf deinem Computer und später auf dem Webserver, und sie überleben sogar einen Umzug der Website auf eine andere Domain. Ein Hinweis zur letzten Tabellenzeile: Der wurzelbezogene Pfad mit führendem / entfaltet seine Wirkung erst auf einem echten Webserver – öffnest du deine Dateien lokal per Doppelklick, zeigt er auf die Wurzel deines Laufwerks statt auf deinen Projektordner. Für den Anfang fährst du mit den ersten drei Mustern am besten.

Eine Namenskonvention solltest du dabei gleich mitnehmen: Die Startdatei eines Ordners heißt üblicherweise index.html. Webserver liefern sie automatisch aus, wenn jemand nur den Ordner aufruft – deshalb landet man bei der Eingabe einer Domain ohne weiteren Pfad auf genau dieser Datei. Benenne die Hauptseite deiner Übungsprojekte also von Anfang an so, dann passt später alles ohne Umbenennen zusammen.

Links können nicht nur zu anderen Seiten führen, sondern auch zu einer bestimmten Stelle auf einer Seite. Dazu braucht es zwei Zutaten: Das Ziel bekommt ein id-Attribut mit einem frei wählbaren Namen, der auf der Seite nur einmal vorkommen darf – und der Link verweist mit einer Raute darauf: href="#abschnitt". Beim Klick scrollt der Browser direkt dorthin. Das funktioniert sogar seitenübergreifend: hilfe.html#versand öffnet die Hilfeseite und springt dort direkt zum Abschnitt mit id="versand". Typische Einsätze sind Inhaltsverzeichnisse am Seitenanfang und „Nach oben“-Links am Ende langer Seiten – probier beides gleich im Editor aus:

Das href-Attribut kann mehr als Webadressen. Mit dem Schema mailto: öffnet ein Klick das E-Mail-Programm mit bereits eingetragener Empfängeradresse, mit tel: startet ein Smartphone direkt den Anruf – antippbare Telefonnummern sind auf Mobilgeräten ein echter Komfortgewinn. Bei Telefonnummern nimmst du am besten das internationale Format mit Ländervorwahl, damit der Link auch aus dem Ausland funktioniert.

Ein ehrlicher Hinweis: E-Mail-Adressen, die so offen im Quelltext stehen, werden von Spam-Robotern eingesammelt. Für Übungsseiten ist das egal – bei öffentlichen Projekten wägt man später ab, ob ein Kontaktformular die bessere Wahl ist.

Standardmäßig öffnet ein Link sein Ziel im selben Tab – und das ist gut so: Die Zurück-Taste funktioniert, und die Besucherin behält die Kontrolle. Mit dem Attribut target="_blank" weist du den Browser an, das Ziel stattdessen in einem neuen Tab zu öffnen.

Und wann sind neue Tabs überhaupt sinnvoll? Seltener, als man denkt. Berechtigt sind sie vor allem, wenn Besucher auf der Ursprungsseite sonst etwas verlieren würden – etwa ein halb ausgefülltes Formular – oder wenn ein Hilfedokument neben der eigentlichen Aufgabe geöffnet bleiben soll. Reflexhaft jeden externen Link in einen neuen Tab zu zwingen, bevormundet dagegen die Nutzer: Wer einen neuen Tab möchte, kann jeden Link selbst per Mittelklick oder Strg+Klick so öffnen – umgekehrt geht das nicht. Kündige das Verhalten außerdem im Linktext an, wie im Beispiel oben. Das erspart allen eine Überraschung.

Der Linktext ist wichtiger, als er aussieht. Viele Screenreader-Nutzer lassen sich alle Links einer Seite als Liste ausgeben, um schnell zu navigieren – losgelöst vom umgebenden Text. Eine Liste aus „hier“, „hier“ und „mehr“ ist dann völlig wertlos: Niemand weiß, wohin die Reise geht. Ein guter Linktext beschreibt sein Ziel deshalb so, dass er für sich allein verständlich ist.

Auch Suchmaschinen werten Linktexte aus, um einzuordnen, worum es auf der Zielseite geht – „hier klicken“ verschenkt dieses Signal komplett. Und nicht zuletzt überfliegen sehende Nutzer Seiten sprunghaft: Aussagekräftige, hervorgehobene Linktexte dienen ihnen als natürliche Ankerpunkte.

Zum Schluss zwei Attribute für Spezialfälle. Mit title gibst du einem Link eine Zusatzinformation mit, die als kleiner Tooltip erscheint, sobald die Maus über dem Link schwebt. Klingt praktisch, hat aber enge Grenzen: Auf Touchscreens gibt es kein „Schweben“ – Smartphone-Nutzer sehen den Tooltip nie, und wer per Tastatur navigiert, ebenso wenig. Deshalb gilt: In den title gehören nur verzichtbare Extras. Alles Wichtige gehört in den Linktext selbst.

Das Attribut download wiederum sagt dem Browser: „Nicht anzeigen, sondern herunterladen.“ Das ist praktisch für Dateien, die Besucher speichern sollen: <a href="speiseplan.pdf" download>. Zuverlässig funktioniert es nur für Dateien deiner eigenen Website – bei fremden Adressen darf der Browser die Anweisung aus Sicherheitsgründen ignorieren.

Text und Links beherrschst du jetzt – Zeit für den Hingucker schlechthin. In der nächsten Lektion „Bilder einbinden“ holst du Fotos und Grafiken auf deine Seite und lernst mit dem Alternativtext das wohl wichtigste Attribut der Barrierefreiheit kennen.