Introduzione
I collegamenti ipertestuali sono uno degli elementi fondamentali del Web. Attraverso il tag <a> è possibile collegare una pagina a un’altra risorsa, come un documento PDF, un’immagine, un file ZIP, un indirizzo email o una pagina ospitata su un dominio diverso.
Un caso d’uso molto pratico consiste nel creare collegamenti per il download di file. Per esempio, un sito potrebbe offrire il programma di un evento, una scheda tecnica, un modulo compilabile o una guida in formato PDF. In questi casi non basta inserire un link: è importante comunicare chiaramente all’utente che cosa verrà scaricato, in quale formato e, quando possibile, quali dimensioni ha il file.
Il collegamento per il download utilizza normalmente l’attributo href. L’attributo download suggerisce al browser di scaricare la risorsa invece di aprirla direttamente. Tuttavia, il comportamento può dipendere dal browser, dal server e dalle politiche di sicurezza applicate alla risorsa.
Codice completo
<h1>Materiale del corso</h1>
<p>
In questa sezione puoi scaricare le risorse utilizzate durante il corso.
</p>
<ul>
<li>
<a
href="documenti/guida-html.pdf"
download="guida-html-base.pdf"
>
Scarica la guida introduttiva in PDF
</a>
<small>(PDF, 850 KB)</small>
</li>
<li>
<a
href="file/esercizi-html.zip"
download
>
Scarica gli esercizi del corso
</a>
<small>(ZIP, 2 MB)</small>
</li>
<li>
<a
href="https://developer.mozilla.org/it/docs/Web/HTML"
target="_blank"
rel="noopener noreferrer"
>
Consulta la documentazione HTML su MDN
</a>
</li>
</ul>
<p>
Per ricevere assistenza, scrivi a
<a href="mailto:[email protected]?subject=Richiesta%20di%20assistenza">
[email protected]
</a>.
</p>
<p>
Puoi anche contattare il servizio informazioni al numero
<a href="tel:+390212345678">+39 02 1234 5678</a>.
</p>Spiegazione
Collegamenti a file locali
Nel primo esempio, l’attributo href="documenti/guida-html.pdf" indica un percorso relativo. Il file PDF deve trovarsi nella cartella documenti, rispetto alla posizione della pagina HTML. Usare percorsi relativi rende il progetto più facilmente trasferibile da un computer a un server.
L’attributo download="guida-html-base.pdf" indica anche il nome suggerito per il file scaricato. Il valore può essere diverso dal nome fisico del file presente sul server. Se invece si scrive semplicemente download, il browser proverà a utilizzare il nome originale della risorsa.
Informazioni utili per l’utente
Un testo come “Scarica il documento” è meno preciso di “Scarica la guida introduttiva in PDF”. Il testo del link dovrebbe spiegare l’azione e il contenuto. Specificare anche il formato e la dimensione del file riduce le sorprese, soprattutto per chi utilizza una connessione lenta o un dispositivo con spazio limitato.
Risorse esterne e sicurezza
Il collegamento a MDN utilizza target="_blank" per aprire la risorsa in una nuova scheda. Quando si usa questo comportamento, è buona pratica aggiungere rel="noopener noreferrer". noopener impedisce alla nuova pagina di accedere alla finestra originale tramite window.opener, mentre noreferrer evita di inviare alcune informazioni sulla pagina di provenienza.
L’apertura in una nuova scheda non deve essere applicata automaticamente a tutti i link. Può disorientare l’utente, quindi va usata soprattutto quando si apre una documentazione esterna o una risorsa che è utile mantenere separata dalla pagina corrente.
Collegamenti email e telefonici
Lo schema mailto: apre il programma di posta configurato sul dispositivo. È possibile aggiungere un oggetto precompilato usando il parametro subject. Gli spazi nell’URL vengono generalmente rappresentati con %20.
Lo schema tel: permette di avviare una chiamata sui dispositivi compatibili. È consigliabile usare il prefisso internazionale, come +39, così il numero risulta più facilmente utilizzabile anche da utenti che si trovano fuori dal Paese.
Best practice
- Descrivi chiaramente il contenuto del collegamento, evitando testi generici come “clicca qui”.
- Indica formato e dimensione dei file scaricabili, per esempio “PDF, 850 KB”.
- Usa percorsi relativi coerenti e verifica che maiuscole e minuscole corrispondano ai nomi reali dei file.
- Controlla periodicamente che i collegamenti non producano errori 404.
- Utilizza download soprattutto per file che l’utente deve conservare, come PDF, ZIP o modelli compilabili.
- Non aprire ogni risorsa in una nuova scheda: riserva target="_blank" ai casi realmente utili.
- Quando usi target="_blank", aggiungi rel="noopener noreferrer".
- Per documenti importanti, fornisci un formato accessibile e non soltanto una scansione fotografica.
- Verifica i collegamenti su desktop e dispositivi mobili, soprattutto quelli mailto: e tel:.
- Evita di inserire dati sensibili direttamente negli URL, perché possono essere salvati nella cronologia o nei log del server.
Riepilogo
Il tag <a> non serve soltanto a collegare pagine: può offrire documenti da scaricare, aprire risorse esterne e facilitare il contatto tramite email o telefono. L’attributo href definisce la destinazione, mentre download suggerisce il salvataggio locale del file.
Un collegamento efficace deve essere comprensibile, prevedibile e sicuro. Indicare formato e dimensione della risorsa, usare testi descrittivi e proteggere i link aperti in nuove schede sono semplici pratiche che migliorano esperienza utente, manutenzione e accessibilità del progetto.