{"id":164030,"date":"2024-07-18T09:00:00","date_gmt":"2024-07-18T07:00:00","guid":{"rendered":"https:\/\/gtechgroup.it\/blog\/link-html-tag-ancora-navigazione\/"},"modified":"2024-07-18T09:00:00","modified_gmt":"2024-07-18T07:00:00","slug":"link-html-tag-ancora-navigazione","status":"publish","type":"post","link":"https:\/\/nuovosito.gtechgroup.it\/blog\/link-html-tag-ancora-navigazione\/","title":{"rendered":"Link in HTML: Guida Completa al Tag Ancora e alla Navigazione"},"content":{"rendered":"

I link<\/strong> sono l’elemento che ha reso possibile il World Wide Web. Senza i link, le pagine web sarebbero documenti isolati, privi della capacit\u00e0 di collegarsi tra loro e creare quella rete interconnessa di informazioni che definiamo “web”. Il tag <a><\/code> (anchor, ancora) \u00e8 il protagonista indiscusso della navigazione web<\/strong>, e comprenderne a fondo ogni aspetto \u00e8 essenziale per qualsiasi sviluppatore.<\/p>\n

Il Tag Ancora: Sintassi e Attributi Fondamentali<\/h2>\n

Il tag <a><\/code> crea un collegamento ipertestuale<\/strong> verso un’altra risorsa. L’attributo principale \u00e8 href<\/code> (Hypertext Reference), che specifica la destinazione del link. La sintassi base \u00e8: <a href=\"https:\/\/esempio.com\">Testo del link<\/a><\/code>. Il testo racchiuso tra i tag di apertura e chiusura \u00e8 detto anchor text<\/strong> (testo dell’ancora) ed \u00e8 ci\u00f2 che l’utente vede e pu\u00f2 cliccare.<\/p>\n

L’anchor text \u00e8 estremamente importante sia per l’esperienza utente<\/strong> che per il SEO<\/strong>. Deve essere descrittivo e comunicare chiaramente dove porter\u00e0 il link. Evita testi generici come “clicca qui” o “leggi di pi\u00f9” \u2014 preferisci invece testi come “consulta la guida ai tag HTML essenziali” o “scopri le best practice per le immagini”.<\/p>\n

Oltre a href<\/code>, il tag <a><\/code> accetta numerosi altri attributi che ne modificano il comportamento. I pi\u00f9 importanti sono target<\/code>, rel<\/code>, title<\/code>, download<\/code> e hreflang<\/code>, che analizzeremo nelle sezioni successive.<\/p>\n

URL Assoluti vs Relativi<\/h2>\n

L’attributo href<\/code> pu\u00f2 contenere due tipi di URL: assoluti<\/strong> e relativi<\/strong>. Comprendere la differenza \u00e8 essenziale per una corretta gestione dei link.<\/p>\n

Un URL assoluto<\/strong> include il protocollo, il dominio e il percorso completo della risorsa, come https:\/\/www.esempio.com\/pagina\/articolo.html<\/code>. Funziona da qualsiasi posizione e viene utilizzato principalmente per link verso siti esterni o quando si vuole garantire che il link funzioni indipendentemente dal contesto.<\/p>\n

Un URL relativo<\/strong> specifica il percorso in relazione alla posizione del documento corrente. Ad esempio, articolo.html<\/code> punta a un file nella stessa directory, ..\/immagini\/foto.jpg<\/code> risale di una directory e poi entra nella cartella “immagini”, e \/contatti<\/code> parte dalla root del dominio. I link relativi sono preferibili per i link interni<\/strong> al sito perch\u00e9 funzionano correttamente anche se il dominio cambia (ad esempio, durante lo sviluppo in ambiente locale o staging).<\/p>\n

Esiste anche l’URL con protocollo relativo<\/strong>, che inizia con \/\/<\/code>, come \/\/cdn.esempio.com\/script.js<\/code>. Questo formato eredita il protocollo (HTTP o HTTPS) dalla pagina corrente. Tuttavia, con la diffusione quasi universale dell’HTTPS, questa pratica \u00e8 diventata meno comune.<\/p>\n

Target, Rel e Sicurezza dei Link<\/h2>\n

L’attributo target<\/code> controlla dove<\/strong> viene aperto il link. Il valore pi\u00f9 comune \u00e8 target=\"_blank\"<\/code>, che apre il link in una nuova scheda del browser. Senza questo attributo, il link si apre nella stessa scheda, sostituendo la pagina corrente. Altri valori possibili sono _self<\/code> (comportamento predefinito), _parent<\/code> e _top<\/code> (utilizzati con i frame, ormai rari).<\/p>\n

Quando si utilizza target=\"_blank\"<\/code>, \u00e8 essenziale<\/strong> aggiungere anche l’attributo rel=\"noopener noreferrer\"<\/code> per motivi di sicurezza. Senza noopener<\/code>, la pagina aperta nella nuova scheda ha accesso all’oggetto window.opener<\/code> della pagina originale, il che potrebbe essere sfruttato per attacchi di phishing<\/strong> (la pagina aperta potrebbe modificare l’URL della pagina originale senza che l’utente se ne accorga). Il valore noreferrer<\/code> impedisce inoltre l’invio dell’header Referer, proteggendo la privacy dell’utente.<\/p>\n

La sintassi completa per un link esterno sicuro \u00e8 quindi: <a href=\"https:\/\/esempio.com\" target=\"_blank\" rel=\"noopener noreferrer\">Link esterno<\/a><\/code>. I browser moderni gestiscono automaticamente il caso noopener<\/code> per i link con target=\"_blank\"<\/code>, ma \u00e8 comunque buona pratica specificarlo esplicitamente per compatibilit\u00e0.<\/p>\n

Anchor Link, Mailto e Tel<\/h2>\n

Oltre ai link verso pagine web, il tag <a><\/code> supporta diversi tipi speciali di destinazione che rendono le pagine web pi\u00f9 interattive e funzionali.<\/p>\n

Gli anchor link<\/strong> (link ad ancora) puntano a una sezione specifica della stessa pagina. Si creano in due passaggi: prima si assegna un attributo id<\/code> all’elemento destinazione (ad esempio, <h2 id=\"sezione-contatti\"><\/code>), poi si crea un link con un href<\/code> che inizia con il carattere #<\/code> seguito dall’id (ad esempio, <a href=\"#sezione-contatti\">Vai ai contatti<\/a><\/code>). Questo tipo di link \u00e8 molto utilizzato per indici di pagina e per migliorare la navigazione in articoli lunghi.<\/p>\n

I link mailto<\/strong> aprono il client di posta elettronica predefinito dell’utente con un nuovo messaggio precompilato. La sintassi \u00e8 <a href=\"mailto:info@esempio.com\">Inviaci un'email<\/a><\/code>. \u00c8 possibile aggiungere parametri come oggetto e corpo del messaggio: mailto:info@esempio.com?subject=Richiesta%20informazioni&body=Salve<\/code>.<\/p>\n

I link tel<\/strong> permettono di avviare una chiamata telefonica, particolarmente utili su dispositivi mobili: <a href=\"tel:+390465846245\">Chiama ora<\/a><\/code>. Il numero deve includere il prefisso internazionale nel formato E.164 per garantire il funzionamento corretto a livello globale.<\/p>\n

SEO e Link: Dofollow, Nofollow e Link Building<\/h2>\n

I link hanno un’importanza fondamentale nel SEO<\/strong>. I motori di ricerca utilizzano i link per scoprire nuove pagine, comprendere le relazioni tra i contenuti e determinare l’autorit\u00e0 di un sito web. Questa \u00e8 la base dell’algoritmo PageRank<\/strong> di Google.<\/p>\n

Per impostazione predefinita, tutti i link sono dofollow<\/strong>, il che significa che trasmettono “link juice” (valore SEO) alla pagina di destinazione. Aggiungendo l’attributo rel=\"nofollow\"<\/code>, si comunica ai motori di ricerca di non seguire<\/strong> il link e di non trasferire autorit\u00e0. Questo \u00e8 appropriato per link pubblicitari, contenuti generati dagli utenti (commenti), o link a siti di cui non si vuole garantire la qualit\u00e0.<\/p>\n

Google ha introdotto due ulteriori valori per l’attributo rel<\/code>: sponsored<\/code> per link pubblicitari o sponsorizzati, e ugc<\/code> (User Generated Content) per link nei contenuti generati dagli utenti. Questi valori forniscono informazioni pi\u00f9 granulari ai motori di ricerca rispetto al generico nofollow<\/code>.<\/p>\n

Per i link interni<\/strong> del tuo sito, utilizza sempre link dofollow (senza rel=”nofollow”). I link interni aiutano i motori di ricerca a comprendere la struttura del sito e a distribuire l’autorit\u00e0 tra le pagine. Una buona strategia di internal linking<\/strong> pu\u00f2 migliorare significativamente il posizionamento del tuo sito.<\/p>\n

Stilizzazione dei Link con CSS<\/h2>\n

I browser applicano stili predefiniti ai link: testo blu e sottolineato per i link non visitati, viola per quelli gi\u00e0 visitati. Questi stili possono essere personalizzati con CSS utilizzando gli pseudo-selettori<\/strong> specifici per i link:<\/p>\n