<a>

Zuletzt aktualisiert am 30. Januar 2026

Links sind das Fundament des Webs: ohne sie wäre das Internet nur eine Sammlung einzelner, isolierter Seiten. Das <a>-Element (Anchor) erstellt einen Hyperlink, mit dem du zu anderen Webseiten, Dateien, E-Mail-Adressen, Telefonnummern oder Ankerpunkten auf derselben Seite verlinken kannst. Es gibt kaum eine Webseite, die ohne <a> auskommt. Auf dieser Seite lernst du alle wichtigen Attribute kennen, die verschiedenen Link-Typen und worauf du bei der Barrierefreiheit achten solltest.

Grundlagen

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

Syntax

<a href="https://mitmario.dev">Zur Startseite</a>

Attribute

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.

Beispiele

Externer Link (neuer Tab)

Wenn du auf eine externe Website verlinkst, ist es gute Praxis, den Link in einem neuen Tab zu öffnen. Vergiss dabei nicht rel="noopener noreferrer" für die Sicherheit:

<a href="https://developer.mozilla.org"
   target="_blank"
   rel="noopener noreferrer">
  MDN Web Docs (neuer Tab)
</a>

E-Mail und Telefon

Links können nicht nur zu Webseiten führen. Mit mailto: öffnest du das E-Mail-Programm des Nutzers, mit tel: die Telefon-App, besonders nützlich auf Mobilgeräten:

<a href="mailto:info@example.com">E-Mail senden</a>
<a href="tel:+491234567890">Anrufen: +49 123 456 7890</a>

Anker-Link (Sprung auf der Seite)

Mit Anker-Links springst du zu einem bestimmten Abschnitt auf derselben Seite. Das Ziel-Element braucht dafür eine id, und der Link verweist mit # darauf:

<a href="#abschnitt">Zum Abschnitt springen</a>

<!-- Weiter unten auf der Seite: -->
<h3 id="abschnitt">Ziel-Abschnitt</h3>
<p>Hier ist der Zielbereich.</p>

Barrierefreiheit

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.

Häufige Fehler

• 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).

Browser-Kompatibilität

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.

Email-Kompatibilität

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

Verwandte Elemente