HTML Academy · Les

Links openen in nieuwe tabbladen en het download-attribuut

Gebruik de attributen target en download om linkgedrag te bepalen.

Les 3 van 413 stappen

Links openen in nieuwe tabbladen en het download-attribuut is een gratis HTML Academy-les op CoddyKit. Dit is les 3 van 4. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject HTML Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus HTML Academy bevat in totaal 4 lessen.

Openen in een nieuw tabblad

Het attribuut target bepaalt waar het gekoppelde document wordt geopend:

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

Het beveiligingsrisico van _blank

target="_blank" zonder voorzorgsmaatregelen creëert een beveiligingslek:

  • De nieuwe pagina kan via window.opener toegang krijgen tot de opener
  • Een schadelijke pagina kan het oorspronkelijke tabblad omleiden
  • Deze aanval heet reverse tabnapping

rel=noopener noreferrer

Voeg altijd rel="noopener noreferrer" toe wanneer je target="_blank" gebruikt:

<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 -->

Wanneer open je nieuwe tabbladen?

UX-richtlijnen voor target="_blank":

  • Gebruik dit voor externe websites waarvan gebruikers niet verwachten dat ze je app verlaten
  • Gebruik dit voor referentiedocumenten (pdf's, handleidingen)
  • Gebruik dit niet voor interne paginanavigatie
  • Waarschuw gebruikers altijd — voeg een pictogram of titel toe met de tekst "opent in nieuw tabblad"

Aangeven dat een link in een nieuw tabblad opent

Informeer gebruikers dat de link in een nieuw tabblad wordt geopend:

<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 -->

Het attribuut download

Het attribuut download vertelt de browser dat het gekoppelde bestand moet worden gedownload in plaats van ernaartoe te navigeren:

<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>

Beperkingen van het attribuut download

Het attribuut download heeft beperkingen:

  • Werkt alleen voor URL's van dezelfde oorsprong
  • Downloads van een andere oorsprong vereisen dat de server Content-Disposition: attachment meestuurt
  • De bestandsnaam in download is slechts een suggestie — serverheaders kunnen deze overschrijven

Downloaden via data-URI's

Je kunt gegenereerde inhoud downloaden met data-URI's:

<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 en linkdoelen

Als JavaScript de navigatie afhandelt, voorkom dan misbruik van 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

Het attribuut ping

Het attribuut ping verstuurt een POST-verzoek wanneer op de link wordt geklikt (voor webanalyse):

<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 -->

Het attribuut type bij links

Het attribuut type geeft een aanwijzing over het MIME-type van de gekoppelde bron:

<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 -->

Korte controle

Welk beveiligingsattribuut hoort altijd bij target="_blank"?

Samenvatting: target en download

Attributen voor linkgedrag:

  • target="_blank" — opent in een nieuw tabblad
  • Voeg bij _blank altijd rel="noopener noreferrer" toe
  • Waarschuw gebruikers visueel wanneer een link in een nieuw tabblad wordt geopend
  • download — start een bestandsdownload in plaats van navigatie
  • download="filename" — stelt een bestandsnaam voor de download voor
Gratis beginnen

Leer HTML met een AI-tutor — gratis

Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.

Cursussen
40
Lessen
159

Veelgestelde vragen

Is de les “Links openen in nieuwe tabbladen en het download-attribuut” gratis?

Ja — je kunt hier op het web alle 3 lessen van het leerpad HTML Academy, waaronder “Links openen in nieuwe tabbladen en het download-attribuut”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus HTML Academy bevat in totaal 4 lessen.

Wat leer ik in “Links openen in nieuwe tabbladen en het download-attribuut”?

Gebruik de attributen target en download om linkgedrag te bepalen. Je oefent met HTML Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.

Heb ik ervaring nodig om met HTML Academy te beginnen?

Ervaring vooraf is niet nodig. HTML Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 3 van 4.

Hoe lang duurt de les “Links openen in nieuwe tabbladen en het download-attribuut”?

De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.

Kan ik code schrijven en uitvoeren in deze les over HTML Academy?

Ja. Elke les over HTML Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.

Alle lessen in deze cursus

  1. Het anchor-element en het href-attribuut
  2. Absolute versus relatieve URL's
  3. Links openen in nieuwe tabbladen en het download-attribuut
  4. Naar secties linken met fragmentidentifiers
← Terug naar HTML Academy