Link: <a>, href, target, rel — e quando non usare target='_blank'

Il link è uno degli elementi fondamentali del web. Il tag <a> collega una pagina a un’altra risorsa: un’altra pagina, una sezione interna, un file, un indirizzo email o un numero di telefono.

La forma base

<a href="/contatti.html">Vai ai contatti</a>

L’attributo href contiene la destinazione. Il testo fra apertura e chiusura è ciò che l’utente legge e clicca.

Link relativi e assoluti

Un link relativo punta a una risorsa dello stesso sito.

<a href="/progetti.html">Progetti</a>
<a href="#contatti">Vai alla sezione contatti</a>

Un link assoluto punta a un URL completo.

<a href="https://developer.mozilla.org/">MDN Web Docs</a>

Per i link interni alla stessa pagina, l’href usa # seguito dall’id della sezione.

<a href="#portfolio">Portfolio</a>

<section id="portfolio">
  <h2>Portfolio</h2>
</section>

Testo del link

Il testo del link deve essere comprensibile anche fuori contesto.

Meglio evitare:

<a href="/portfolio.html">clicca qui</a>

Meglio scrivere:

<a href="/portfolio.html">Guarda il portfolio</a>

Questo aiuta chi scansiona la pagina, chi usa uno screen reader e chi naviga velocemente con la tastiera.

target="_blank"

target="_blank" apre il link in una nuova scheda.

<a href="https://example.com" target="_blank" rel="noopener noreferrer">
  Apri la documentazione esterna
</a>

Usalo con moderazione. Aprire nuove schede senza motivo può sorprendere l’utente e interrompere il flusso di navigazione. Ha senso per risorse esterne, documentazione, file o pagine che non vuoi far perdere mentre l’utente sta compilando qualcosa.

Quando usi target="_blank", aggiungi rel="noopener noreferrer" per evitare che la nuova pagina possa interagire con quella di origine e per non inviare informazioni di provenienza quando non serve.

Email e telefono

I link possono avviare anche email o chiamate.

<a href="mailto:mario@example.com">Scrivi a Mario</a>
<a href="tel:+390212345678">Chiama lo studio</a>

Sono utili nelle pagine contatti, ma vanno usati con testo chiaro e dati corretti.

Esercizi

Base · facile

Correggi questi due link: il primo ha un testo non comprensibile fuori contesto, il secondo apre una scheda esterna senza la protezione rel.

<a href="/portfolio.html">clicca qui</a>
<a href="https://example.com" target="_blank">Sito</a>

<a href="/portfolio.html">Guarda il portfolio</a>
<a href="https://example.com" target="_blank" rel="noopener noreferrer">Sito</a>

Intermedio · medio

Crea una piccola navigazione con: un link a una sezione interna (#id), un link a una pagina locale, un link esterno con target="_blank" e rel corretto, un link mailto: e un link tel:. Verifica che ogni link sia comprensibile leggendo solo il testo, senza l’URL.

Sfida · difficile

Su un sito reale ogni link esterno apre una nuova scheda e nessuno ha rel. Argomenta quando target="_blank" aiuta l’utente e quando lo disorienta, poi definisci una regola pratica per il tuo progetto (quali link aprire in nuova scheda e quali no) motivandola dal punto di vista di usabilità e accessibilità.