HTML-Linktitel und Ziele

Die Links-Sitzung gab dir funktionierende a-Elemente mit klaren href-Werten. Zwei häufige Extras ändern die Erfahrung, ohne href zu ersetzen: ein title-Attribut für einen kurzen Hover-Hinweis und ein target, das das Ziel in einem neuen Browser-Tab öffnen kann. Sorgfältig eingesetzt helfen sie. Auf jedem Menüpunkt nerven sie und schaffen Sicherheitsfallen.

Was diese Attribute tun

href entscheidet weiterhin, wohin der Link führt. title, target und rel steuern Hinweise und wie der Browser dieses Ziel öffnet. Lerne sie als optionale Werkzeuge auf solidem Linktext — nicht als Ersatz für beschreibende Formulierung.

Direkte Antwort

• title="…" — optionaler beratender Tooltip-Text beim Hover (Unterstützung und Nutzen variieren; niemals allein darauf verlassen)
• target="_blank" — in neuem Tab oder Fenster öffnen
• Mit _blank auch rel="noopener noreferrer" setzen, damit die neue Seite über window.opener nicht die volle Kontrolle über deinen Original-Tab übernehmen kann (sichereres Alltagmuster)
  Halte die Navigation innerhalb der Site standardmäßig im selben Tab. Reserviere _blank für Fälle, in denen das Bleiben auf deiner Seite wirklich hilft — oft externe Referenzen oder Downloads.

title, target und rel auf einen Blick

Ein hilfreicher title-Tooltip

Nutze title, wenn ein kurzer Extra-Hinweis über den sichtbaren Linktext hinaus Wert schafft. Klebe nicht denselben Satz an beide Stellen in der Hoffnung auf doppelte Klarheit — Screenreader- und Hover-Erlebnisse unterscheiden sich, und leere Wiederholung verschwendet Aufmerksamkeit.

Das title-Beispiel lesen

• Sichtbarer Text Beginner guide bleibt die primäre Bezeichnung
• title fügt in vielen Desktop-Browsern eine kurze beratende Zeichenkette beim Hover hinzu
• Mobil und assistive Technik zeigen title möglicherweise anders — halte den sichtbaren Text stark
• href zeigt weiterhin auf guide.html; title navigiert nicht allein

Neuer Tab mit sichererem rel

Eine externe Site in einem neuen Tab zu öffnen kann deine Lektion offen lassen. Paare _blank mit rel="noopener noreferrer" als sicherere Standardgewohnheit für diese Fälle.

Warum noopener und noreferrer

• noopener verringert das Risiko, dass die neue Seite deinen Original-Tab über window.opener manipuliert
• noreferrer vermeidet in vielen Browsern auch das Senden eines Referrers (Datenschutz-Nebeneffekt; wird mit diesem Muster weiterhin häufig gelehrt)
  Du brauchst in diesem Kurs keine tiefe Browser-Sicherheitstheorie — merke dir die gepaarten Attribute für _blank-External-Links und gehe weiter.

Nicht alles blanken

Neue Tabs multiplizieren sich. Wenn jeder Sidebar-Link _blank öffnet, verlieren Nutzer die einfache Zurück-Taste und landen bei einem Tab-Haufen. Bevorzuge Same-Tab-Links für deine eigenen Seiten (about.html, nächste Lektion, Startseite). Nutze _blank, wenn du deine Site verlässt oder die Produktanforderung klar danach fragt.

title ist nicht der Seitentitel

Das Dokument-<title> in head beschriftet den ganzen Tab. Das title-Attribut auf einem a ist nur ein Hinweis auf diesem Link. Unterschiedliche Jobs, ähnliches englisches Wort — verwechsle sie nicht.

Übung in deinem Editor

1. Füge einen lokalen Link mit klarem sichtbarem Text und einem hilfreichen title hinzu, der ein Extra-Detail liefert.
2. Füge einen externen Link mit target="_blank" und rel="noopener noreferrer" hinzu.
3. Hover (auf dem Desktop), um den Tooltip zu sehen; klicke, um einen neuen Tab zu bestätigen.
4. Behalte einen dritten In-Site-Link ohne _blank und bestätige, dass er den aktuellen Tab normal ersetzt.
5. Schreibe jeden title um, der den Linktext ohne neue Information nur wiederholt.

Typische Fehler

• _blank auf jedem internen Menüpunkt
• rel="noopener noreferrer" bei _blank-External-Links vergessen
• Nutzloser title, der nur den Linktext echo’t
• Glauben, title oder target könnten ein fehlendes href ersetzen
• Das Link-title-Attribut mit dem Dokument-<title>-Element verwechseln

Zusammenfassung

• title kann einen kurzen Hover-Hinweis geben; sichtbarer Linktext bleibt primär
• target="_blank" öffnet einen neuen Tab oder ein Fenster
• Paare _blank mit rel="noopener noreferrer" für sicherere externe Links
• Bevorzuge Same-Tab-Navigation für deine eigenen Seiten
• href bleibt das Ziel; diese Attribute verfeinern nur die Erfahrung