Obwohl es das wichtigste Element in der Welt der „Hyperlinks“ sein müsste, ist das Link-Element kaum weiter entwickelt worden, obwohl er doch massive Probleme hat. In diesem Artikel versuche ich unbefriedigend und rein anekdotenhaft einen Blick auf die Links zu werfen. Und warum sie unzureichend sind und ein Upgrade benötigen. Ein Blick auf Probleme und Links 2.0.
Als ich im Jahr 1998 angefangen habe, Websites zu bauen (ungefähr, so genau erinnere ich mich nicht mehr) bin ich auf eine Diplomarbeit von Harald Weinreich der Uni Hamburg gestoßen. Mein erster Fachartikel zum Thema, den ich gelesen habe. Darin findet sich zu den Hyperlinks folgender spannender Absatz (Hervorhebungen von mir):
Im Vergleich mit anderen Hypertext-Systemen ist auch die technische Umsetzung der Links im WWW recht unbefriedigend. Es wird nur zwischen zwei Arten von Links unterschieden: den Replacement Links (Sprünge zu einer anderen Seite) und den Reference Links (Sprünge an eine bestimmte Stelle auf einer Seite). Browser stellen diese aber in gleicher Weise dar, so dass sie nicht von Benutzern unterscheiden werden können. Die meisten Browser unterscheiden lediglich zwischen Links zu kürzlich besuchten Seiten und neuen Links. Eine weitere Typisierung wäre aber von großem Vorteil, da es dem Benutzer mehr Kontrolle über seine Navigationsschritte geben würde. Beispielsweise werden lokale und externe Links von den WWW-Clients auf die gleiche Weise dargestellt. Benutzer können deshalb nicht unmittelbar sehen, ob ein Link auf ein externes Dokument verweist. Man kann nicht einmal erkennen, in welcher Sprache das nächste Dokument angeboten wird und in welchem Dateiformat es vorliegt (HTML, MPEG, Postscript). Selbst wenn man des Englischen mächtig ist, kommt man oft nicht weiter, weil man unerwartet auf Seiten in einer unbekannten Sprache stößt.
Eine interessante Frage, die mich immer wieder beschäftigt hat. Ich hasse es nämlich, wenn sich in Menüs Sprunglinks (für die OnePager-Startseite) und Links zu Unterseiten vermischen. Die Browserhersteller haben zusätzlich die Anzeige wohin der Link immer kleiner und unscheinbarer gemacht und/oder die Anzeige standardmäßig deaktiviert. Allein aus Sicherheitsgründen eine unfassbar schlechte Entscheidung. Es ist doch elementar wichtig, ob ich dem Ziel vertraue, wenn ich auf einen Link klicke.
Nun dachte ich mir, das wäre ja vielleicht via CSS zu lösen. Folgender Ansatz wäre doch eine Möglichkeit.
Über den Attributselektor testen wir, ob am Anfang des Links, also dem href-Attribut, ein #
existiert:
a[href^="#"] { /* Formatierungen für seiteninterne Verweise */ }
Prinzipiell wäre das eine gute Idee. In einem User-Stylesheet via Stylish könnte das sogar für jede Website nachgerüstet werden. Aber es gibt natürlich ein Problem. Damit solche Links in einem Menü auch auf Unterseiten funktionieren, muss natürlich die gesamte URL angegeben werden und damit erfordert dieser Ansatz doch eher eine lokale Lösung:
a[href^="(Site-URL)/#“]
Alternativ testen wir nur auf die Existenz eines #
.
a[href*="#"] { /* Formatierungen für seiteninterne Verweise */ }
Hinweis: Wobei das natürlich auch externe Links mit Sprunglink treffen würde, wie Matthias Kittsteiner völlig korrekt auf Twitter angemerkt hat.
In einem Userstylesheet wäre dann natürlich eine Lösung gefragt, die sich mit jedem Design verträgt. Farben und andere Auszeichnungen sind aber sehr individuell unterschiedlich auf den Websites. Aber wie wäre es mit einem geänderten Cursor? Anstatt den pointer
könnten wir den Cursor ja mit einem Pfeil ausstatten, um anzuzeigen, dass es ein Sprunglink ist. Leider gibt es dafür keinen geeigneten Cursor. Wir könnten s-resize
oder alias
zweckentfremden. Oder via url()
ein eigenes Bild definieren. Wobei das wieder schwierig in einem Userstylesheet wäre, denn das Bild müsste dann ja irgendwo gehostet werden:
a[href*="#"] { cursor: s-resize; }
Auch die in dem Artikel noch erwähnten Beispiele des Dateiformates und der Sprache wäre so lösbar:
/* Alle Links, die mit „.pdf“ enden sind rot */ a[href$=".pdf"] {color: red;}
oder
/* Alle span-Elemente sowohl in vereinfachtem (zh-CN) als auch traditionellem (zh-TW) Chinesisch sind rot */ span[lang|="zh"] {color: red;}
Sollten sich Links in einem neuen Fenster/Tab öffnen? Diese viel diskutierte Frage, hat wohl keinen Konsens gefunden, aber wenn es eingebaut wird, dann sollte darüber informiert werden. Browser machen das nicht nativ -warum eigentlich nicht?- aber wir könnten es mit dem Attributselektor ebenfalls umsetzen (alternativ kann diese Info in das Title-Attribut geschrieben werden, damit es als Tooltip erscheint, aber das nur am Rande):
a[target="_blank"] { /* Styling für Links, die sich in einem neuen Fenster/Tab öffnen */ }
Wieso machen uns die Browser es uns eigentlich so schwer das Linkziel zu erkennen? Vielleicht weil es einfach gekapert werden kann? Mit einem Event-Handler onclick
kann ich den Klick auf einen Link abfangen, via Javascript umbiegen und mit event.preventDefault
das Verfolgen des eigentlichen Links deaktivieren.
Ich habe das Gefühl wir haben eines der wichtigsten Elemente des Webs vernachlässigt und es ohne Schutzfunktionen verkümmern lassen. Dabei ist es so wichtig. Jedes Mal, wenn wir auf einer Website an einen Link kommen, müssen wir ihn als solchen erkennen, einschätzen, ob er es wert ist, jetzt oder später verfolgt zu werden und ob die Quelle sicher ist. Jedes Mal eine kleine Mikro-Entscheidung, die den Lesefluss massiv verändern kann. Wer hier nur auf seine SEO-Werkzeuge schaut und den menschlichen Faktor vergisst, der wird mit ungelesenen Artikeln und frustrierten Leser:innen bestraft.
Links sind das Herzstück in unserer vernetzen Welt und müssen mit Bedacht und Sorgfalt gesetzt werden. Dabei sollten wir der Leserin/dem Leser alle möglichen Informationen geben, diese Mikro-Entscheidung schnell und richtig zu treffen durch Ort, Aussehen und Verhalten des Links.
Übertreibe ich? Oder übertreibe ich nicht genug? Du siehst das genau so oder überhaupt nicht? Oder du bist einer der Programmiere eines Browsers, der das kaputt optimiert hat? Dann diskutiere mit mir jetzt sofort in den Kommentaren! Und Links zu deinen Quellen nicht vergessen 😉
Danke für deine Arbeit. Ich setze gerne Links und die führen manchmal ins Nirwana, weil was geändert wird. Viele Medien geben heute nur die Möglichkeit zu Verlinken, statt die Artikel. Da müsste der Link wirklich mehr können, unschöne Probleme vermeiden.
Hallo Torsten,
Danke für den Artikel. Ich schaffe es ja nie, am #Projekt26 mitzumachen. Da freue ich mich über solche Artikel.
Du hast Recht, wir gehen mies mit dem Link um. Wir dürfen uns deshalb nicht wundern, wenn er verkümmert. Ich fürchte halt, dass so ein Ansatz, wie du ihn beschrieben hast, nicht überall helfen würde.
Wäre da so eine Wikipedia-eske Linkliste am Ende eines Artikels nicht besser? Gut, ich müsste dafür fünfeinhalb tausend Artikel umbauen und würde das deshalb wohl auch nicht machen. Aber wie wäre das denn?
Bedenke, es gibt Menschen, die können einem einfachen Artikel nicht bis zum Ende folgen. Dann sollen sie auch noch unterschiedlich gekennzeichnete Links verarbeitet bekommen. Das könnte dazu führen, dass der Link noch mehr verkümmert.
„Ich hasse es nämlich, wenn sich in Menüs Sprunglinks (für die OnePager-Startseite) und Links zu Unterseiten vermischen.“ Same 😤
Die Steigerung davon sind noch Menüs mit externen Links, die so aussehen wie interne. Und auch immer wieder beliebt: Top-Level-Menüpunkte, hinter denen gar keine Seiten stehen, sondern nur leere Rauten und die lediglich als Klammer für ein Submenü dienen.
Abgesehen davon: Vielen Dank für den Artikel, spannendes Thema! Ich hatte mir ehrlicherweise nie wirklich Gedanken gemacht, dass man das ja auch generell ändern könnte, sondern mich nur immer über genau die Punkte geärgert, die du aufführst.
Die Suchmaschine verrät mir gerade (https://support.mozilla.org/de/questions/1265127?&mobile=1), dass es ja durchaus auch Beteiligungsmöglichkeiten an der Weiterentwicklung einzelner Browser gibt: https://discourse.mozilla.org/c/firefox-development/
Aber vielleicht müsste sowas ja auch größer und browser-übergreifend aufgehängt werden?
Ich würde mir hier auch eine einheitliche Lösung durch die Browser-Entwickler wünschen. Ein Symbol für Anker-Links, ein anderes für externe Links. Ohne Konsistenz über alle Websites hinweg hat man sonst keine Chance das Ziel eines Links wirklich zu erkennen.
Bei externen Links würde ich mir auch wünschen, dass
target="_blank"
endlich „abgeschafft“ wird und stattdessen externe Links anders gekennzeichnet werden. Dann noch eine Einstellung im Browser, mit denen alle entscheiden können, wie externe Link standardmäßig geöffnet werden und der „Zwang“ zum Öffnen in einem neuen Tab kann endlich abgeschafft werden 🙂Beim Lesen deines Beitrags musste ich übrigens nochmal den
[lang|="zh"]
Selektor nachschlagen, den habe ich bisher noch nie benutzt.Toller Artikel. Ich mag es, wenn man sich mal zurückbesinnt und das Selbstverständliche mal in den Vordergrund holt.
Entgegen der ganzen Fürsprecher für Veränderungen bin ich eher für das Beibehalten – eben weil der Link so ein Basiselement des Netzes ist und in seiner Art eigentlich gut funktioniert, sollte er eben nicht eine Weiterentwicklung erfahren.
PDF-Links sollten nicht „zwanghaft“ gekennzeichnet werden, auch Sprungmarken nicht. Das, was wir dann bekämen, würden wir an vielen Stellen wieder mehr oder weniger aufwändig wegstylen. Gerade die Einfachheit des Links ermöglicht es uns doch erst, ihn nach Wunsch zu erweitern – im Gegensatz zum manuellen Vereinfachen.
Stattdessen sollte es ein gemeinsames Verständnis geben, wie mit bestimmten Linktypen standardkonform umgegangen werden soll. Möglicherweise kann das auch durch Verpflichtung unterstützt werden (ich schaue zu dir, Google Ranking. Oder zu dir, Barrierefreiheit für Behörden).
Aber wenn dann ein Ausbrechen oder anteiliges anderes Styling notwendig ist oder bewusst dafür entschieden wurde, dann ist das auch okay. Ist mir lieber als in der Praxis mehr die Browserstyles anzupassen.