<a>

Wenn du einen Link erstellst, sagst du dem Browser im Grunde: “Wenn jemand hier klickt, bring ihn zu diesem Ziel.” Das href-Attribut bestimmt das Ziel, und der Text zwischen den Tags ist das, was der Nutzer sieht und anklicken kann. Links sollten immer klar beschreiben, wohin sie führen, nicht nur für Nutzer, sondern auch für Suchmaschinen und Screenreader.

• <a> ist ein Inline-Element, kann aber seit HTML5 auch Block-Elemente wie <div> oder <h2> umschließen, das macht es einfach, ganze Karten klickbar zu machen
• Das href-Attribut ist entscheidend: ohne es ist das <a>-Element nicht klickbar und sieht aus wie normaler Text
• Links sind standardmäßig blau und unterstrichen, damit Nutzer sie als klickbar erkennen
• Für die Barrierefreiheit sollte der Linktext beschreibend sein. “Hier klicken” oder “mehr” sagt einem Screenreader-Nutzer nichts darüber, wohin der Link führt

target-Werte

• _self: Öffnet im selben Tab (Standard). Verwende das für interne Links innerhalb deiner Seite
• _blank: Öffnet in neuem Tab/Fenster. Sinnvoll für externe Links, damit der Nutzer deine Seite nicht verliert
• _parent: Öffnet im übergeordneten Frame. Brauchst du nur, wenn du mit <iframe>-Verschachtelungen arbeitest
• _top: Öffnet im gesamten Fenster (bricht aus allen Frames aus). Ebenfalls nur für iframe-basierte Seiten relevant

Relative vs. absolute Pfade

Wenn du auf eine andere Seite deiner eigenen Website verlinkst, kannst du relative Pfade verwenden: href="/blog" statt href="https://mitmario.dev/blog". Das ist kürzer, flexibler und funktioniert auch in Entwicklungsumgebungen mit anderem Hostnamen. Absolute URLs (mit https://) brauchst du nur für externe Seiten.

Links sind eines der wichtigsten Elemente für die Barrierefreiheit: Screenreader-Nutzer navigieren häufig über eine Liste aller Links auf der Seite. Deshalb ist die Qualität des Linktexts entscheidend: Er sollte auch ohne den umgebenden Kontext verständlich sein. “Hier klicken” oder “mehr” sagt niemandem, wohin der Link führt. Besser: “Zur HTML-Referenz” oder “Dokumentation auf MDN öffnen”.

Links sind standardmäßig mit der Tastatur erreichbar und können mit Enter aktiviert werden. Verändere dieses Verhalten nicht, indem du tabindex="-1" setzt oder Links mit CSS unsichtbar machst, die trotzdem im DOM vorhanden sind.

Wenn du target="_blank" verwendest, ist es hilfreich, den Nutzer darauf hinzuweisen, dass der Link in einem neuen Tab öffnet, entweder im Linktext selbst oder über ein aria-label. Screenreader-Nutzer können sonst überrascht sein, wenn sich plötzlich ein neuer Tab öffnet.

Vermeide es, das Standard-Styling von Links (Unterstreichung, Farbe) komplett zu entfernen, ohne einen visuellen Ersatz zu bieten. Nutzer mit Seheinschränkungen müssen Links vom umgebenden Text unterscheiden können. Farbe allein reicht nicht aus, da sie für farbenblinde Menschen nicht erkennbar ist.

• target="_blank" ohne rel: Wenn du einen Link in einem neuen Tab öffnest, kann die geöffnete Seite über window.opener auf deine Seite zugreifen und sie z.B. auf eine Phishing-Seite umleiten. Das nennt sich “Reverse Tabnapping”. Mit rel="noopener noreferrer" unterbindest du das. Moderne Browser entschärfen dieses Risiko inzwischen automatisch, aber das rel-Attribut ist weiterhin gute Praxis.

• Nichtssagender Linktext: Ein Screenreader kann eine Liste aller Links auf der Seite vorlesen. Wenn dort fünfmal “hier klicken” steht, weiß der Nutzer nicht, wohin welcher Link führt. Besser: “Zur HTML-Referenz auf MDN” statt “Klicke hier, um mehr zu erfahren”.

• <a> als Button verwenden: Links (<a>) sind für Navigation: sie bringen den Nutzer irgendwohin. Buttons (<button>) sind für Aktionen: sie lösen etwas aus (Formular absenden, Dialog öffnen). <a href="#"> mit einem Click-Handler ist fast immer ein Zeichen dafür, dass du eigentlich <button> verwenden solltest.

• Leeres href: <a href=""> lädt die aktuelle Seite neu, das ist vermutlich nicht das, was du willst. Wenn du einen Link brauchst, der noch kein Ziel hat, nutze href="#" als Platzhalter (und ersetze ihn vor dem Launch).

Das a-Element wird von allen Browsern seit Beginn des Webs unterstützt. Das download-Attribut wird seit ca. 2014 von allen modernen Browsern unterstützt.

• Chrome

  Komplett

• Firefox

  Komplett

• Safari

  Komplett

• Edge

  Komplett

• Opera

  Komplett

Links funktionieren in allen Email-Clients, allerdings entfernen einige Clients bestimmte Attribute wie target.

• Apple Mail

  Komplett

• Gmail

  Teilweise

  Gmail entfernt das target-Attribut. Alle Links werden im selben Fenster geöffnet.

• Outlook

  Komplett

• Thunderbird

  Komplett

• Yahoo Mail

  Teilweise

  Yahoo Mail kann bestimmte Tracking-Parameter und Attribute aus Links entfernen.