Guida HTML interattiva: Link in una nuova scheda

Q: Come faccio aprire un link in una nuova scheda in HTML?

Aggiungi target="blank" al tag : Example . Il browser apre la pagina in una nuova scheda e lascia aperta quella corrente.

Q: Serve ancora rel="noopener" con target="_blank"?

Le versioni attuali di Chrome, Firefox e Safari applicano noopener automaticamente ai link target="_blank", quindi la nuova pagina non può raggiungere la tua tramite window.opener. Scrivere rel="noopener" non costa niente e protegge chi visita con browser più vecchi, per questo la maggior parte delle guide di stile lo chiede ancora.

Q: Che differenza c'è tra noopener e noreferrer?

noopener taglia il legame tra le due schede (window.opener è null in quella nuova). noreferrer fa lo stesso e in più impedisce al browser di inviare l'URL della tua pagina come referrer, quindi le statistiche dell'altro sito vedono la visita come diretta.

Q: L'HTML può forzare l'apertura di un link in una nuova finestra invece che in una scheda?

No. target="_blank" chiede un nuovo contesto di navigazione, e sono il browser e le impostazioni dell'utente a decidere se sarà una scheda o una finestra. I browser attuali aprono una scheda.

Q: Come apro tutti i link di una pagina in una nuova scheda?

Metti nell' . Ogni link senza un proprio target si apre allora in una nuova scheda. Ha effetto anche sui moduli, quindi usalo solo nelle pagine in cui è davvero ciò che vuoi.

Aprire un link in una nuova scheda con target="_blank"

Aggiungi target="_blank" al link. Il browser apre la destinazione in una nuova scheda e lascia la tua pagina dov'era.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>New tab</title>
</head>
<body>
  <p>
    <a href="https://developer.mozilla.org/" target="_blank" rel="noopener">
      MDN web docs
    </a>
    opens in a new tab.
  </p>
</body>
</html>

La tecnica è tutta qui: target="_blank" sull'<a>, più rel="noopener", spiegato tra poco. I lettori possono anche aprire da soli qualsiasi link in una nuova scheda con Ctrl+clic (Cmd+clic su Mac) o con il clic centrale, quindi usa target="_blank" solo quando lasciare la pagina costerebbe loro qualcosa, come un modulo compilato a metà o un video in riproduzione.

Le anteprime di questa pagina aprono ogni link esterno in una nuova scheda, con o senza target, perché un riquadro di esempio non deve mai navigare altrove. Per vedere la differenza che fa target, salva l'esempio come file e aprilo nel browser.

rel="noopener" e rel="noreferrer"

Una pagina aperta con target="_blank" riceveva un riferimento alla tua pagina in window.opener, e poteva usarlo per mandare la tua scheda a un altro URL (per esempio una finta pagina di login). rel="noopener" toglie quel riferimento.

Valore di `rel`	`window.opener` nella nuova scheda	Referrer inviato al nuovo sito
nessuno (browser vecchi)	La tua pagina	Sì
nessuno (browser attuali)	`null`	Sì
`noopener`	`null`	Sì
`noreferrer`	`null`	No
`opener`	La tua pagina	Sì

Le versioni attuali di Chrome, Firefox e Safari trattano ogni link target="_blank" come noopener, a meno che tu non scriva rel="opener". Scrivere comunque rel="noopener" protegge chi visita con browser più vecchi e rende l'intenzione visibile nel codice.

noreferrer impedisce anche al browser di inviare il referrer, quindi il sito che colleghi non vede da quale pagina arriva il visitatore. È una scelta di privacy, non di sicurezza: usalo quando il tuo URL deve restare privato, e lascialo fuori per i partner che devono vedere il tuo traffico.

<!-- Safe, the other site still sees the referral -->
<a href="https://example.com" target="_blank" rel="noopener">Example</a>

<!-- Safe, and the other site does not see where the visit came from -->
<a href="https://example.com" target="_blank" rel="noopener noreferrer">Example</a>

rel accetta più valori separati da spazi, quindi noopener si combina con i valori per la SEO: rel="noopener sponsored" per un link a pagamento, rel="noopener nofollow" per un link di cui non ti fai garante.

Avvisare che il link apre una nuova scheda

Una nuova scheda che si apre senza preavviso disorienta, soprattutto chi usa uno screen reader, che potrebbe non accorgersi che la pagina è cambiata. Dillo nel link. Una piccola icona lo mostra a chi vede; un testo nascosto lo dice a chi usa uno screen reader:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>New tab hint</title>
  <style>
    .visually-hidden {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
    }
    a[target="_blank"]::after {
      content: " \2197";
      font-size: 0.85em;
    }
  </style>
</head>
<body>
  <p>
    Read the
    <a href="https://www.w3.org/WAI/" target="_blank" rel="noopener">
      accessibility guidelines<span class="visually-hidden"> (opens in a new tab)</span></a>
    before you start.
  </p>
</body>
</html>

Il selettore a[target="_blank"] aggiunge automaticamente la freccia a ogni link che apre una nuova scheda, così non te ne dimentichi mai uno. Lo span nascosto viene letto come parte del nome del link, "accessibility guidelines (opens in a new tab)", ma non occupa spazio sullo schermo.

Segnare in automatico ogni link esterno

I selettori di attributo possono dare uno stile ai link in base al loro href. Qui ogni link che inizia con http riceve la freccia, e i link interni al sito no:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>External links</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    a[href^="http"]::after {
      content: " \2197";
      color: #2563eb;
    }
  </style>
</head>
<body>
  <ul>
    <li><a href="/pricing">Pricing</a> (same site)</li>
    <li><a href="/docs">Docs</a> (same site)</li>
    <li><a href="https://github.com/" target="_blank" rel="noopener">GitHub</a></li>
    <li><a href="https://www.w3.org/" target="_blank" rel="noopener">W3C</a></li>
  </ul>
</body>
</html>

^= significa "inizia con". Il selettore dà solo lo stile ai link: gli attributi target e rel devono comunque stare nell'HTML.

I valori di target

target indica dove si apre il link. Ci sono quattro parole chiave, e qualsiasi altro valore è un nome:

`target`	Apre il link in
`_self`	La stessa scheda o lo stesso frame. È il valore predefinito.
`_blank`	Una nuova scheda senza nome
`_parent`	Il genitore del frame corrente (uguale a `_self` fuori dai frame)
`_top`	L'intera scheda, uscendo da tutti i frame
qualsiasi nome, es. `help`	La scheda o il frame con quel nome, creato se non esiste

Un target con nome viene riusato. Ogni link con target="help" si apre nella stessa scheda, quindi un lettore che clicca cinque link di aiuto ottiene una scheda, non cinque. _top è quello da usare dentro un <iframe> quando un link deve sostituire l'intera pagina invece del frame.

Aprire tutti i link in una nuova scheda con l'elemento base

<base target="_blank"> nell'<head> imposta il target predefinito per ogni link e modulo della pagina:

<head>
  <base target="_blank">
</head>
<body>
  <a href="https://example.com">Opens in a new tab</a>
  <a href="/about" target="_self">Opens in this tab</a>
</body>

Il target di un link vince su <base>. Usalo di rado: una pagina in cui ogni link apre una nuova scheda è fastidiosa da usare.

Aprire una nuova scheda da JavaScript

window.open(url, '_blank') apre una scheda da uno script. Passa 'noopener' come terzo argomento per avere la stessa protezione dell'attributo rel. Con questo argomento, window.open restituisce null invece di un riferimento alla nuova scheda:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>window.open</title>
</head>
<body>
  <button type="button" id="open">Open example.com</button>
  <p id="out"></p>

  <script>
    document.querySelector('#open').addEventListener('click', () => {
      const win = window.open('https://example.com/', '_blank', 'noopener');
      document.querySelector('#out').textContent = 'window.open returned: ' + win;
    });
  </script>
</body>
</html>

I browser bloccano window.open a meno che non venga eseguito in risposta a un clic o alla pressione di un tasto, quindi chiamalo da un event listener, non al caricamento della pagina o dopo un timer. Se la destinazione è un URL che il lettore potrebbe vedere prima, un link con target="_blank" è più semplice e funziona senza JavaScript. Il link in sé è spiegato in link HTML.

Errori comuni

target="blank" senza il trattino basso. È un nome, non la parola chiave. La prima volta apre comunque una nuova scheda, poi riusa quella scheda per ogni altro link con lo stesso nome.
target="_new". Anche questo è solo un nome, con lo stesso effetto: una scheda riusata.
Mettere target su ogni link. I link interni dovrebbero aprirsi nella stessa scheda. Chi vuole una nuova scheda sa come ottenerla.
Nessun avviso che un link apre una nuova scheda. Aggiungi un'icona e un testo nascosto.
Aggiungere noreferrer ai link di partner o affiliati e poi chiedersi perché il partner non vede nessun referral.

Domande frequenti

Come faccio aprire un link in una nuova scheda in HTML?

Aggiungi target="_blank" al tag <a>: <a href="https://example.com" target="_blank" rel="noopener">Example</a>. Il browser apre la pagina in una nuova scheda e lascia aperta quella corrente.

Serve ancora rel="noopener" con target="_blank"?

Le versioni attuali di Chrome, Firefox e Safari applicano noopener automaticamente ai link target="_blank", quindi la nuova pagina non può raggiungere la tua tramite window.opener. Scrivere rel="noopener" non costa niente e protegge chi visita con browser più vecchi, per questo la maggior parte delle guide di stile lo chiede ancora.

Che differenza c'è tra noopener e noreferrer?

noopener taglia il legame tra le due schede (window.opener è null in quella nuova). noreferrer fa lo stesso e in più impedisce al browser di inviare l'URL della tua pagina come referrer, quindi le statistiche dell'altro sito vedono la visita come diretta.

L'HTML può forzare l'apertura di un link in una nuova finestra invece che in una scheda?

No. target="_blank" chiede un nuovo contesto di navigazione, e sono il browser e le impostazioni dell'utente a decidere se sarà una scheda o una finestra. I browser attuali aprono una scheda.

Come apro tutti i link di una pagina in una nuova scheda?

Metti <base target="_blank"> nell'<head>. Ogni link senza un proprio target si apre allora in una nuova scheda. Ha effetto anche sui moduli, quindi usalo solo nelle pagine in cui è davvero ciò che vuoi.

Concetti correlati