Links openen in nieuwe tabbladen en het download-attribuut
Gebruik de attributen target en download om linkgedrag te bepalen.
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.openertoegang 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: attachmentmeestuurt - De bestandsnaam in
downloadis 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.openHet 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
_blankaltijdrel="noopener noreferrer"toe - Waarschuw gebruikers visueel wanneer een link in een nieuw tabblad wordt geopend
download— start een bestandsdownload in plaats van navigatiedownload="filename"— stelt een bestandsnaam voor de download voor
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
- Het anchor-element en het href-attribuut
- Absolute versus relatieve URL's
- Links openen in nieuwe tabbladen en het download-attribuut
- Naar secties linken met fragmentidentifiers