Links und das rel-Attribut

Zuletzt geprüft am 7. September 2026 von Daniel Weihmann

Das <a>-Element ist das älteste und wichtigste Element des Webs, und es hat trotzdem ein paar Ecken, an denen regelmäßig etwas schiefgeht: die Form der Adresse, das Öffnen in neuen Fenstern und vor allem das rel-Attribut, dessen Werte oft nach Gefühl gesetzt werden.

Die Formen der Adresse

Ein href kann auf fünf verschiedene Arten geschrieben sein, und die Wahl hat Folgen. Die wichtigste Unterscheidung ist die zwischen wurzelrelativ und dokumentrelativ.

https://example.de/preise/

Absolut. Verweist auf eine andere Domain, oder in Feeds, E-Mails und Meta-Angaben, wo eine relative Adresse keinen Bezugspunkt hat. Innerhalb der eigenen Seite unnötig und beim Domainwechsel lästig.

/preise/

Wurzelrelativ. Beginnt am Domainstamm und funktioniert deshalb aus jeder Verzeichnistiefe gleich. Für interne Links ist das der Normalfall und die Form, die am wenigsten kaputtgeht.

preise/ oder ../preise/

Dokumentrelativ. Rechnet vom aktuellen Verzeichnis aus. Der Klassiker unter den Fehlerquellen: Sobald eine Seite umzieht oder dieselbe Datei unter zwei Adressen erreichbar ist, zeigt der Link ins Leere.

#abschnitt

Sprungmarke auf ein Element mit passender id auf derselben Seite. #top und ein leeres # führen an den Seitenanfang.

mailto: und tel:

Öffnen Mailprogramm beziehungsweise Telefon-App. tel: braucht die Nummer ohne Leerzeichen und am besten mit Ländervorwahl (tel:+4917612345678), sichtbar darf sie lesbar formatiert sein.

In neuem Tab öffnen

target="_blank" öffnet das Ziel in einem neuen Tab. Jahrelang stand dazu überall, man müsse zwingend rel="noopener" ergänzen, weil die geöffnete Seite sonst über window.opener auf die Ursprungsseite zugreifen kann. Das stimmt so nicht mehr: Alle aktuellen Browser verhalten sich bei target="_blank" seit 2021 von sich aus so, als stünde noopener dort.

Trotzdem schreibt man es weiter hin, und das aus einem nüchternen Grund: Es kostet nichts, dokumentiert die Absicht und schützt in alten Browsern, die noch im Umlauf sind. Wer zusätzlich verhindern will, dass die Zielseite erfährt, woher der Besucher kommt, ergänzt noreferrer – das unterdrückt den Referrer und schließt noopener mit ein.

<a href="https://validator.w3.org/" target="_blank" rel="noopener">
  W3C Markup Validator
</a>

Ob überhaupt ein neues Fenster aufgehen soll, ist eine Frage der Bedienbarkeit. Ein neuer Tab nimmt den Zurück-Knopf aus dem Spiel, und Nutzer mit Screenreader oder Vergrößerung merken den Wechsel oft erst spät.

Oft liest man, die WCAG verlange eine Ankündigung. Das stimmt so nicht: Das betreffende Kriterium 3.2.5 gehört zur Stufe AAA, die kaum jemand anstrebt. Auf der üblichen Stufe AA gibt es keine solche Pflicht. Eine Ankündigung ist trotzdem freundlich – dann aber im Linktext selbst, nicht über title: Das Attribut ist per Tastatur nicht erreichbar und auf Touchgeräten unsichtbar, es hilft also genau denen nicht, um die es geht. In der Praxis hat sich eingebürgert, externe Ziele neu zu öffnen und interne nicht.

Die rel-Werte

rel beschreibt das Verhältnis zwischen der aktuellen Seite und dem Ziel. Mehrere Werte werden mit Leerzeichen getrennt geschrieben. Die für die tägliche Arbeit wichtigsten:

nofollow

Sagt Suchmaschinen, dass dieser Verweis keine Empfehlung ist. Seit 2019 behandelt Google den Wert als Hinweis, nicht mehr als Befehl – der Link kann also durchaus gewertet werden. Gedacht für Ziele, für die man nicht einstehen will oder kann.

sponsored

Für bezahlte Verweise: Werbung, Partnerlinks, gekaufte Erwähnungen. Er ersetzt nofollow in diesen Fällen und ist die von Google gewünschte Kennzeichnung. Er ersetzt nicht die Werbekennzeichnung im Text – die verlangt das Wettbewerbsrecht, nicht die Suchmaschine.

ugc

„User generated content": Links aus Kommentaren, Foren und Profilen, also aus Inhalten, die nicht vom Betreiber stammen.

noopener

Verhindert, dass die Zielseite über window.opener auf das öffnende Fenster zugreift. Bei target="_blank" heute ohnehin Standardverhalten, siehe oben.

noreferrer

Unterdrückt den Referrer, das Ziel erfährt also nicht, von welcher Seite der Besucher kam. Praktisch für heikle Verweise, unpraktisch überall dort, wo man selbst in fremden Statistiken auftauchen möchte.

me

Kennzeichnet ein Profil als das eigene. Im Fediverse und bei Mastodon wird damit die Verknüpfung zwischen Website und Konto verifiziert.

external

Rein beschreibend, ohne technische Wirkung. Nützlich, um externe Links per CSS-Attributselektor mit einem Symbol zu versehen.

Am <link>-Element im Kopfbereich taucht rel ebenfalls auf, dort mit ganz anderen Werten: canonical für die gültige Adresse, stylesheet, icon, preload und alternate. Die stehen im HTML-Grundgerüst im Zusammenhang.

Dateien verlinken

Das download-Attribut sorgt dafür, dass der Browser die Datei speichert, statt sie anzuzeigen. Mit einem Wert lässt sich zugleich der Dateiname vorgeben:

<a href="/dateien/preisliste-2026.pdf" download="Preisliste.pdf">
  Preisliste als PDF (240 KB)
</a>

Das Attribut greift aus Sicherheitsgründen nur bei Dateien von derselben Herkunft. Unabhängig davon gehört in den Linktext, was den Nutzer erwartet: Format und Größe. Wer auf ein 40-Megabyte-PDF klickt, ohne es zu ahnen, wird im Mobilfunknetz nicht glücklich.

Der Linktext ist Teil des Links

Screenreader können sich alle Links einer Seite als Liste ausgeben lassen. In dieser Liste steht dann „hier", „mehr" und „weiterlesen" – dreimal dasselbe, ohne Zusammenhang. Der Linktext sollte deshalb auch für sich genommen sagen, wohin er führt. Dasselbe gilt für Suchmaschinen, die den Ankertext als eines der stärksten Signale für den Inhalt der Zielseite lesen.

Ist ein Bild verlinkt, übernimmt sein alt-Text diese Rolle. Er beschreibt dann das Ziel und nicht das Motiv – ein verlinktes Logo heißt „Startseite", nicht „Firmenlogo". Wie das mit dekorativen Bildern zusammengeht, steht bei den Bildern.

Häufige Fehler

• Ein <div> mit Klick-Handler statt eines Links. Nicht fokussierbar, nicht per Enter bedienbar, nicht in neuem Tab zu öffnen und für Suchmaschinen unsichtbar.
• href="javascript:void(0)". Wenn nichts navigiert wird, ist es kein Link, sondern ein <button>.
• Verschachtelte Links. Ein <a> in einem <a> ist nicht erlaubt; der Parser zieht die Struktur auseinander. Bei Karten, die ganz klickbar sein sollen, hilft ein Link auf der Überschrift, der per CSS-Pseudoelement über die Karte gelegt wird.
• Zu kleine Klickfläche. WCAG 2.2 nennt 24 × 24 Pixel als Mindestmaß für Bedienelemente. Links mitten im Fließtext sind davon ausgenommen, einzeln stehende Symbol-Links nicht.
• Sprungmarke ohne Ziel. Ein #preise ohne passende id springt nirgendwohin. Beim Umbenennen von Abschnitten mitziehen.