Åbning af links i nye faner og download-attributten
Brug target- og download-attributter til at styre linkadfærd.
Åbning af links i nye faner og download-attributten er en gratis HTML Academy-lektion på CoddyKit. Dette er lektion 3 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i HTML Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. HTML Academy-kurset indeholder 4 lektioner i alt.
Åbning i en ny fane
Attributten target styrer, hvor det linkede dokument åbnes:
<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)
-->Sikkerhedsrisikoen ved _blank
target="_blank" uden sikkerhedsforanstaltninger skaber en sikkerhedssårbarhed:
- Den nye side kan få adgang til den åbnende side via
window.opener - En ondsindet side kan omdirigere den oprindelige fane
- Dette angreb kaldes omvendt fanekapring
rel=noopener noreferrer
Tilføj altid rel="noopener noreferrer", når du bruger target="_blank":
<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 -->Hvornår skal du åbne nye faner
Retningslinjer for brugeroplevelsen med target="_blank":
- Brug det til eksterne websteder, hvor brugerne ikke forventer at forlade din applikation
- Brug det til referencedokumenter (PDF-filer, vejledninger)
- Brug det ikke til intern sidenavigering
- Advar altid brugerne — tilføj et ikon eller en titel med teksten "åbner i en ny fane"
Sådan angiver du en ny fane til brugerne
Gør brugerne opmærksomme på, at linket åbner i en ny fane:
<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 -->Attributten download
Attributten download fortæller browseren, at den skal downloade den linkede fil i stedet for at navigere til den:
<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>Begrænsninger for attributten download
Attributten download har følgende begrænsninger:
- Virker kun for URL'er med samme oprindelse
- Downloads på tværs af oprindelser kræver, at serveren sender
Content-Disposition: attachment - Filnavnet i
downloader kun et forslag — serverheadere kan tilsidesætte det
Downloads af data-URI'er
Du kan downloade genereret indhold ved hjælp af data-URI'er:
<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 og linkmål
Når JavaScript håndterer navigering, skal du undgå misbrug af 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.openAttributten ping
Attributten ping sender en POST-anmodning, når der klikkes på linket (til analyse):
<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 -->Attributten type på links
Attributten type angiver den mulige MIME-type for den linkede 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 -->Hurtig test
Hvilken sikkerhedsattribut skal altid ledsage target="_blank"?
Opsummering: target og download
Attributter, der styrer linkadfærd:
target="_blank"— åbner i en ny fane- Tilføj altid
rel="noopener noreferrer"sammen med_blank - Advar brugerne visuelt, når et link åbner i en ny fane
download— udløser fildownload i stedet for navigeringdownload="filename"— foreslår et filnavn til downloadet
Lær HTML med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 40
- Lektioner
- 159
Ofte stillede spørgsmål
Er lektionen “Åbning af links i nye faner og download-attributten” gratis?
Ja — alle 3 lektioner i læringssporet HTML Academy, inklusive “Åbning af links i nye faner og download-attributten”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. HTML Academy-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “Åbning af links i nye faner og download-attributten”?
Brug target- og download-attributter til at styre linkadfærd. Du øver dig i HTML Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på HTML Academy?
Der kræves ingen tidligere erfaring. HTML Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 3 af 4.
Hvor lang tid tager lektionen “Åbning af links i nye faner og download-attributten”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne HTML Academy-lektion?
Ja. Alle HTML Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.
Alle lektioner i dette kursus
- Elementet anchor og attributten href
- Absolutte kontra relative URL'er
- Åbning af links i nye faner og download-attributten
- Links til sektioner og fragmentidentifikatorer