Das a-Element erzeugt einen Verweis. Das Attribut href nennt das Ziel, der Inhalt zwischen den Tags ist das, was der Leser anklickt und der Screenreader vorliest.

Die vier Arten von Adressen

<a href="https://example.org/seite">absolut</a>
<a href="/glossar/aria">wurzelrelativ</a>
<a href="unterseite.html">dokumentrelativ</a>
<a href="#abschnitt">Sprungziel auf derselben Seite</a>

Für Verweise innerhalb der eigenen Seite ist die wurzelrelative Form die verlässlichste: Sie funktioniert unabhängig davon, in welchem Verzeichnis das Dokument liegt. Dokumentrelative Adressen brechen, sobald eine Seite verschoben wird.

Sprungziele

Ein Verweis auf #kennung springt zu dem Element mit dieser id:

<a href="#faq">Zu den häufigen Fragen</a>
…
<section id="faq">
  <h2>Häufige Fragen</h2>
</section>

Das funktioniert auch über Seitengrenzen hinweg: /html/tabellen#kopfzellen öffnet die Seite und springt an die Stelle. Voraussetzung ist, dass die Kennung im Dokument nur einmal vorkommt.

Andere Protokolle

<a href="mailto:301@seo-manager.info">E-Mail schreiben</a>
<a href="tel:+491736107465">Anrufen</a>
<a href="/datei.pdf" download>Herunterladen</a>

Bei Telefonnummern gehört die internationale Schreibweise ohne Leerzeichen in das Attribut – sichtbar darf sie lesbar bleiben.

Der Linktext trägt die Information

Screenreader können sich alle Verweise einer Seite als Liste ausgeben lassen. In dieser Liste steht kein umgebender Satz:

<!-- in der Liste unbrauchbar -->
<a href="/preise">hier klicken</a>
<a href="/agb">mehr erfahren</a>

<!-- allein verständlich -->
<a href="/preise">Preisübersicht</a>
<a href="/agb">Allgemeine Geschäftsbedingungen</a>

Dieselbe Regel hilft Suchmaschinen: Der Linktext ist eines der Signale, mit denen sie das Ziel einordnen.

Neues Fenster – selten und angekündigt

target="_blank" öffnet in einem neuen Tab und hebelt damit die Zurück-Taste aus, den wichtigsten Bedienweg vieler Nutzer. Vertretbar ist es bei einer Datei oder einem Werkzeug, das neben dem Text gebraucht wird – dann mit Hinweis im Linktext.

Der früher zwingende Zusatz rel="noopener" ist seit 2021 nicht mehr nötig: Browser wenden ihn von sich aus an. rel="noreferrer" bleibt eine bewusste Entscheidung, weil es zusätzlich die Herkunftsangabe unterdrückt.

Zwei Elemente, ein Name

Nicht zu verwechseln ist das a-Element mit dem link-Element. Beide werden umgangssprachlich „Link" genannt, aber link steht unsichtbar im Kopfbereich und stellt Beziehungen her – zu einem Stylesheet, zur kanonischen Adresse, zu einer Sprachversion. Anklickbar ist allein das a-Element.

Was ein Verweis nicht ist

<!-- kein Verweis, sondern eine Aktion -->
<a href="#" onclick="senden()">Absenden</a>

<!-- richtig -->
<button type="button" onclick="senden()">Absenden</button>

Faustregel: Führt es woandershin, ist es ein Verweis. Löst es etwas aus, ist es eine Schaltfläche. Screenreader sagen beides unterschiedlich an, und Nutzer erwarten Unterschiedliches.