HTML-Links: Anker, Button-Links, Bildlinks, neue Tabs | We.Inc
Baue HTML-Links, die funktionieren: Sprunglinks mit Smooth Scroll unter einem Sticky Header, neue Tabs, als Buttons gestaltete Links, Bildlinks sowie mailto-, tel- und Download-Links.
Ein HTML-Link ist ein <a>-Element mit einem href: <a href="/pricing">See pricing</a>. Lass href auf eine Seite zeigen, auf #id für einen Sprung innerhalb der Seite oder auf mailto: und tel:, um eine E-Mail oder einen Anruf zu starten. Ergänze target="_blank" für einen neuen Tab und verwende für Aktionen, die etwas verändern, einen <button> statt eines Links.
Jedes Link-Muster, das eine kleine Website braucht, jeweils mit bearbeitbarem Code und einem Live-Ergebnis. Die Demo zu Sprunglinks zeigt das Problem mit dem Sticky Header und seine Lösung in einer Zeile, und der Abschnitt zu Buttons klärt, wann ein Link wie ein Button aussehen und wann er einer sein sollte.
Wähle in den Abschnitten unten die Art von Link, die du brauchst.
Bearbeite das Beispiel. Der Ergebnisrahmen ist eine echte Seite, Sprunglinks scrollen also und Fokusrahmen erscheinen, wenn du Tab drückst.
Kopiere das Snippet und ersetze Adresse und Linktext durch deine eigenen.
Prüfe, ob sich der Linktext auch allein gut liest, denn Screenreader-Nutzer durchsuchen oft eine Liste von Links ohne die umgebenden Wörter.
Schreibe Linktexte, die das Ziel benennen, etwa Frühlingsmenü herunterladen statt hier klicken. Das hilft Menschen beim Überfliegen und hilft Suchmaschinen, die Zielseite zu verstehen.
Verwende relative Pfade (/contact) für Seiten deiner eigenen Website, damit Links auch unter einer Vorschauadresse oder einer neuen Domain funktionieren.
Gib Links, die einen neuen Tab öffnen, einen Hinweis im Text, etwa (öffnet in einem neuen Tab), damit niemand überrascht ist, wenn der Zurück-Button nichts tut.
Halte die ids von Sprunglinks kurz, kleingeschrieben und stabil. Andere werden sie als Lesezeichen speichern und teilen.
Häufige Fragen
Brauche ich bei target="_blank" noch rel="noopener"?
Aktuelle Browser wenden das noopener-Verhalten bei Links mit target="_blank" automatisch an, sodass die geöffnete Seite nicht über window.opener auf deine zugreifen kann. rel="noopener" zu ergänzen schadet trotzdem nicht und schützt sehr alte Browser. Füge zusätzlich noreferrer hinzu, wenn die andere Website nicht sehen soll, von welcher Seite der Besucher kam.
Sollte ich einen Link oder einen Button verwenden?
Verwende <a href>, wenn der Klick jemanden zu einer neuen Adresse bringt, die man als Lesezeichen speichern oder in einem neuen Tab öffnen könnte. Verwende <button>, wenn der Klick auf der aktuellen Seite etwas tut, etwa ein Menü öffnen, ein Formular absenden oder etwas in den Warenkorb legen. Du kannst jedes der beiden so gestalten, dass es wie das andere aussieht.
Warum verdeckt mein Sticky Header die Überschrift beim Sprunglink?
Der Browser scrollt das Ziel ganz an den oberen Rand des Fensters, genau dorthin, wo dein fixierter Header sitzt. Ergänze scroll-margin-top an den Zielen, gesetzt auf die Header-Höhe plus etwas Luft, dann landet die Überschrift direkt darunter.
Warum funktioniert das download-Attribut bei meiner Datei nicht?
Browser berücksichtigen download nur für Dateien vom selben Origin wie die Seite oder für blob:- und data:-Adressen. Bei einer Datei auf einer anderen Domain öffnet der Link sie einfach, außer der Server sendet einen Content-Disposition-Header, der den Browser anweist, sie zu speichern.
Wie füge ich einem mailto-Link einen Betreff hinzu?
Hänge ihn als Query-String an: mailto:[email protected]?subject=Booking%20request&body=Hi. Leerzeichen und Sonderzeichen müssen prozentcodiert werden, ein Leerzeichen wird also zu %20.
Aufbau eines Links
Ein <a> ohne href ist nur ein Platzhalter: Es ist nicht per Tastatur fokussierbar und tut beim Klick nichts. Erst das href macht es zum Link. Der Text zwischen den Tags ist der barrierefreie Name, und bei einem Bildlink übernimmt der Alt-Text des Bildes diese Rolle.
Weitere Attribute verfeinern den Link. target legt fest, wo er sich öffnet, rel beschreibt die Beziehung zur Zielseite (nofollow, noopener, noreferrer, sponsored), download bittet den Browser, die Datei zu speichern statt sie anzuzeigen, und hreflang oder type beschreiben das Ziel.
Buttons und Links sind unterschiedliche Bedienelemente
Tastaturnutzer drücken Enter, um einem Link zu folgen, und Enter oder Leertaste, um einen Button zu betätigen. Screenreader kündigen sie unterschiedlich an, und nur Links haben ein Kontextmenü mit In neuem Tab öffnen. Wird ein Link für eine Aktion verwendet oder ein div für eines von beiden, gehen einige dieser Verhaltensweisen verloren.
Die Optik ist frei wählbar. Ein Link Registrieren im Header kann wie ein gefüllter Button aussehen, und ein Button Entfernen in einer Liste wie schlichter unterstrichener Text. Wähle das Element danach, was passiert, und gestalte es dann so, wie das Design es braucht.
Links barrierefrei machen
Links müssen auch ohne Farbe erkennbar sein. Im Fließtext leistet das eine Unterstreichung, in Navigationsleisten macht es meist das Layout deutlich. Behalte einen sichtbaren Fokusrahmen, und wenn du den Browser-Standard ersetzt, achte darauf, dass der neue genug Kontrast hat.
Vermeide mehrere Links mit demselben Text, die zu verschiedenen Zielen führen, etwa eine Reihe von Weiterlesen-Links. Schreibe entweder unterschiedliche Texte oder ergänze ein visuell verstecktes span, das den Satz für Screenreader-Nutzer vervollständigt.
Der einfache Link
Absolute, relative und Fragment-Adressen
Relative Pfade werden ausgehend von der aktuellen Seite aufgelöst; ein Pfad, der mit / beginnt, startet im Stammverzeichnis der Website.
Sprunglinks, Smooth Scroll und Sticky Header
Gib dem Ziel eine id und verlinke es mit #id. scroll-behavior: smooth animiert den Sprung, und scroll-margin-top verhindert, dass ein Sticky Header die Überschrift verdeckt.
Sprunglinks unter einem Sticky Header
Klicke auf einen Link in der Leiste. Dank scroll-margin-top landet jeder Abschnitt direkt unter dem Header. Lösche diese Zeile, um das Problem zu sehen, das sie löst.
Einen Link in einem neuen Tab öffnen
target="_blank" mit sichtbarem Hinweis
noopener ist in aktuellen Browsern implizit, kostet aber nichts, wenn du es behältst. noreferrer verbirgt zusätzlich die Adresse deiner Seite vor der anderen Website.
Links, die wie Buttons aussehen, und echte Buttons
Welches Element
Der Klick…
Element
Beispiel
Führt zu einer anderen Adresse
<a href>
Registrieren, Tarife ansehen, Leitfaden lesen
Sendet ein Formular ab
<button type="submit">
Nachricht senden, Jetzt bezahlen
Ändert etwas auf dieser Seite
<button type="button">
Menü öffnen, In den Warenkorb, Mehr anzeigen
Ein als Button gestalteter Link neben einem echten Button
Beide sehen gleich aus. Nur der Link lässt sich in einem neuen Tab öffnen; nur der Button gehört in eine Formularaktion.
Bildlinks
Ein Bild als Link
Der Alt-Text benennt das Ziel, weil er der einzige Text des Links ist. Hier ist das Bild ein kleines Inline-SVG, damit die Demo offline funktioniert.
E-Mail-, Telefon- und Download-Links
mailto und tel
Schreibe Telefonnummern im href im internationalen Format ohne Leerzeichen. Der sichtbare Text kann beliebig formatiert sein.
Das download-Attribut
Der Wert schlägt, falls angegeben, einen Dateinamen vor. Er gilt nur für Dateien von deinem eigenen Origin oder für blob:- und data:-Adressen.