0Pricing
HTML Academy · Lektion

Links in neuen Tabs öffnen und das download-Attribut

Verwenden Sie die Attribute target und download, um das Verhalten von Links festzulegen.

Links in neuen Tabs öffnen und das download-Attribut ist eine kostenlose HTML Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des HTML Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der HTML Academy-Kurs umfasst insgesamt 4 Lektionen.

In einem neuen Tab öffnen

Das target-Attribut legt fest, wo das verknüpfte Dokument geöffnet wird:

<a href="https://example.com" target="_blank">Open in new tab</a>

<!-- target values:
  _blank  → new tab (or window)
  _self   → same tab (default)
  _parent → parent frame
  _top    → full window (exits frames)
-->

Das Sicherheitsrisiko von _blank

target="_blank" ohne Schutzmaßnahmen stellt eine Sicherheitslücke dar:

  • Die neue Seite kann über window.opener auf die öffnende Seite zugreifen
  • Eine schädliche Seite könnte den ursprünglichen Tab umleiten
  • Dieser Angriff wird Reverse Tabnabbing genannt

rel=noopener noreferrer

Fügen Sie bei Verwendung von target="_blank" immer rel="noopener noreferrer" hinzu:

<a href="https://example.com"
   target="_blank"
   rel="noopener noreferrer">
  Open Safely
</a>
<!-- noopener: prevents access to window.opener -->
<!-- noreferrer: also hides referrer header + implies noopener -->
<!-- Modern browsers add noopener by default, but always include it -->

Wann Sie neue Tabs öffnen sollten

UX-Richtlinien für target="_blank":

  • Verwenden Sie es für externe Websites, bei denen Benutzer nicht erwarten, Ihre App zu verlassen
  • Verwenden Sie es für Referenzdokumente (PDFs, Anleitungen)
  • Verwenden Sie es nicht für die Navigation innerhalb der eigenen Seiten
  • Warnen Sie Benutzer immer – fügen Sie ein Symbol oder einen Titel mit dem Hinweis „wird in einem neuen Tab geöffnet“ hinzu

Neuen Tab für Benutzer kenntlich machen

Informieren Sie Benutzer darüber, dass der Link in einem neuen Tab geöffnet wird:

<a href="https://example.com"
   target="_blank"
   rel="noopener noreferrer"
   aria-label="Visit Example (opens in new tab)">
  Visit Example
  <span aria-hidden="true">↗</span>
</a>
<!-- aria-label covers screen reader announcement
     The arrow icon gives visual users a hint -->

Das download-Attribut

Das download-Attribut weist den Browser an, die verknüpfte Datei herunterzuladen, anstatt zu ihr zu navigieren:

<a href="/reports/q4-report.pdf" download>
  Download Q4 Report
</a>

<!-- Optionally specify the filename: -->
<a href="/api/export" download="my-data-2025.csv">
  Export CSV
</a>

Einschränkungen des download-Attributs

Das download-Attribut unterliegt Einschränkungen:

  • Funktioniert nur für same-origin-URLs
  • Downloads von anderen Origins erfordern, dass der Server Content-Disposition: attachment sendet
  • Der Dateiname in download ist nur ein Vorschlag – die Server-Header können ihn überschreiben

Downloads mit Data-URIs

Sie können generierte Inhalte mithilfe von Data-URIs herunterladen:

<a href="data:text/plain;charset=utf-8,Hello%20World!"
   download="hello.txt">
  Download Text File
</a>
<!-- Generates a .txt file from inline data -->
<!-- Useful for generating small files client-side without a server -->

JavaScript und Link-Ziele

Wenn JavaScript die Navigation übernimmt, vermeiden Sie den missbräuchlichen Einsatz von target="_blank":

// If you must open a new window programmatically:
const win = window.open('https://example.com', '_blank', 'noopener,noreferrer');
// noopener via window.open requires the features string
// Not via rel on window.open

Das ping-Attribut

Das ping-Attribut sendet beim Anklicken des Links eine POST-Anfrage (für Analysen):

<a href="/destination" ping="/analytics/track">
  Track this click
</a>
<!-- Browser sends POST to /analytics/track when link is clicked -->
<!-- Rarely used — blocked by many browsers -->
<!-- Most analytics use JavaScript instead -->

Das type-Attribut für Links

Das type-Attribut gibt einen Hinweis auf den MIME-Typ der verknüpften Ressource:

<a href="/report.pdf" type="application/pdf">
  Download PDF Report
</a>
<a href="/data.json" type="application/json">
  JSON Data
</a>
<!-- Informational hint only — browser does not enforce it -->

Kurze Überprüfung

Welches Sicherheitsattribut sollte immer zusammen mit target="_blank" verwendet werden?

Zusammenfassung: target und download

Attribute für das Linkverhalten:

  • target="_blank" – öffnet den Link in einem neuen Tab
  • Fügen Sie bei _blank immer rel="noopener noreferrer" hinzu
  • Warnen Sie Benutzer visuell, wenn ein Link in einem neuen Tab geöffnet wird
  • download – startet den Dateidownload anstelle der Navigation
  • download="filename" – schlägt einen Dateinamen für den Download vor

Häufig gestellte Fragen

Ist die Lektion „Links in neuen Tabs öffnen und das download-Attribut“ kostenlos?

Ja — der vollständige Text von „Links in neuen Tabs öffnen und das download-Attribut“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des HTML Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der HTML Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Links in neuen Tabs öffnen und das download-Attribut“?

Verwenden Sie die Attribute target und download, um das Verhalten von Links festzulegen. Du übst HTML Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um HTML Academy zu starten?

Keine Vorkenntnisse erforderlich. HTML Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 4.

Wie lange dauert die Lektion „Links in neuen Tabs öffnen und das download-Attribut“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser HTML Academy-Lektion Code schreiben und ausführen?

Ja. Jede HTML Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

  1. Das anchor-Element und das href-Attribut
  2. Absolute vs. relative URLs
  3. Links in neuen Tabs öffnen und das download-Attribut
  4. Zu Abschnitten verlinken: Fragment-Identifier
← Zurück zu HTML Academy