0Pricing
HTML Academy · Lezione

Aprire i link in nuove schede e attributo download

Usare gli attributi target e download per definire il comportamento dei link

Aprire i link in nuove schede e attributo download è una lezione HTML Academy gratuita su CoddyKit. Questa è la lezione 3 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento HTML Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso HTML Academy include 4 lezioni in totale.

Aprire in una nuova scheda

L'attributo target controlla dove viene aperto il documento collegato:

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

Il rischio per la sicurezza di _blank

target="_blank" senza le dovute precauzioni crea una vulnerabilità di sicurezza:

  • La nuova pagina può accedere alla pagina di origine tramite window.opener
  • Una pagina malevola potrebbe reindirizzare la scheda originale
  • Questo attacco è chiamato reverse tabnapping

rel=noopener noreferrer

Aggiunga sempre rel="noopener noreferrer" quando utilizza 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 -->

Quando aprire nuove schede

Linee guida UX per target="_blank":

  • Lo utilizzi per i siti esterni dai quali gli utenti non si aspettano di uscire dall'app
  • Lo utilizzi per i documenti di riferimento, come PDF e guide
  • Non lo utilizzi per la navigazione tra pagine interne
  • Avverta sempre gli utenti: aggiunga un'icona o un titolo che indichi "si apre in una nuova scheda"

Indicare una nuova scheda agli utenti

Informi gli utenti che il link si apre in una nuova scheda:

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

L'attributo download

L'attributo download indica al browser di scaricare il file collegato invece di aprirlo:

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

Vincoli dell'attributo download

L'attributo download presenta alcune limitazioni:

  • Funziona solo con URL same-origin
  • Per i download cross-origin, il server deve inviare Content-Disposition: attachment
  • Il nome del file in download è solo un suggerimento: le intestazioni del server possono sostituirlo

Download tramite URI dati

È possibile scaricare contenuti generati utilizzando URI dati:

<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 e target dei link

Quando JavaScript gestisce la navigazione, eviti di abusare di 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

Attributo ping

L'attributo ping invia una richiesta POST quando si fa clic sul link, ad esempio per l'analisi dei dati:

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

Attributo type sui link

L'attributo type fornisce un'indicazione sul tipo MIME della risorsa collegata:

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

Verifica rapida

Quale attributo di sicurezza dovrebbe sempre accompagnare target="_blank"?

Riepilogo: target e download

Attributi che controllano il comportamento dei link:

  • target="_blank" — apre il link in una nuova scheda
  • Aggiunga sempre rel="noopener noreferrer" con _blank
  • Avverta visivamente gli utenti quando un link si apre in una nuova scheda
  • download — avvia il download del file invece della navigazione
  • download="filename" — suggerisce un nome per il file scaricato

Domande Frequenti

La lezione «Aprire i link in nuove schede e attributo download» è gratuita?

Sì — il testo completo di «Aprire i link in nuove schede e attributo download» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso HTML Academy, passa a CoddyKit PRO. Il corso HTML Academy include 4 lezioni in totale.

Cosa imparerò in «Aprire i link in nuove schede e attributo download»?

Usare gli attributi target e download per definire il comportamento dei link Eserciti HTML Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare HTML Academy?

Non è richiesta alcuna esperienza precedente. HTML Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 3 di 4.

Quanto tempo richiede la lezione «Aprire i link in nuove schede e attributo download»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione HTML Academy?

Sì. Ogni lezione HTML Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

  1. L’elemento anchor e l’attributo href
  2. URL assoluti e relativi
  3. Aprire i link in nuove schede e attributo download
  4. Collegare sezioni e identificatori fragment
← Torna a HTML Academy