Il tag <link> HTML ti consente di ancorare hyperlink a destinazioni interne o esterne come URL, elementi multimediali, file o altri elementi nel testo HTML. Così migliori la navigabilità, ottimizzi le proprietà SEO e assicuri una maggiore facilità d’uso per gli utenti. Per impostare link, oltre a <link> si usano anche il tag <a> e altri attributi.

Cosa sono i tag link HTML?

I tag link HTML <a> e <link> sono usati per ancorare collegamenti a risorse interne o esterne in un documento HTML. Con i tag <a> è possibile integrare hyperlink a siti web esterni o interni e collegamenti a file, documenti e download. Mediante i tag <link> puoi inserire risorse come fogli di stile, tipi di caratteri e icone, migliorando la funzionalità, la facilità d’uso e la navigabilità all’interno di un sito.

Qual è la differenza tra <a> e <link>?

Per integrare hyperlink (collegamenti ipertestuali) o risorse esterne, a seconda del caso entrano in gioco i tag HTML <a> oppure <link>. Hanno scopi e funzioni diverse, pertanto occorre prestare attenzione alle differenze:

  • <a>: il tag <a> sta per “anchor”, perché permette di ancorare hyperlink a URL o immagini, grafici e video nelle pagine HTML. Può trattarsi di elementi all’interno dello stesso sito web oppure di risorse esterne.
  • <link>: il tag <link> consente principalmente di integrare risorse esterne come fogli di stile CSS, favicon, documenti o caratteri in documenti HTML. Puoi così determinare l’aspetto o il comportamento di una pagina HTML o il suo funzionamento con la tecnica del prefetching o gli URL preferiti (URL canonici).

La differenza principale è che <a> è usato prevalentemente per l’integrazione di hyperlink, mentre a <link> si ricorre in particolare per integrare elementi esterni come fogli di stile. Inoltre, i tag <a> vengono integrati principalmente all’interno dell’area <body>, mentre i tag <link> sono usati nell’area <header>.

Web Hosting
Diventa il n°1 della rete con il provider di hosting n°1 in Europa
  • Disponibilità garantita al 99,99%
  • Dominio, SSL ed e-mail inclusi
  • Assistenza 24/7 in lingua italiana

La sintassi dei tag link HTML

Di seguito ti spieghiamo la sintassi dei due tag link HTML <a> e <link>.

Sintassi del tag <a>

Per usare correttamente il tag link <a>, oltre alla <a> di apertura e alla </a> di chiusura hai bisogno di altri elementi come:

  • href: con l’attributo href HTML definisci l’URL di destinazione a cui rimandare con il tag link. Può trattarsi di un URL assoluto o relativo o anche di un ID di ancoraggio per la stessa pagina.
  • Testo link o tag immagine: l’URL di destinazione viene integrato come URL relativo o assoluto all’interno dei tag <a>…</a> e dopo l’attributo href per ancorare il collegamento nel testo HTML. Lo stesso vale nel caso delle immagini per i tag delle immagini.

Altri attributi opzionali all’interno dei tag <a> sono:

  • target: definisce dove essere aperto un URL di destinazione, ad esempio con _blank per una nuova scheda o una nuova finestra oppure con _parent per un frame di livello superiore
  • download: definisce che gli hyperlink eseguono automaticamente un download
  • title: serve per visualizzare titoli o descrizioni relativi agli hyperlink quando il cursore passa sopra l’area collegata -rel: definisce il rapporto tra la pagina corrente e quella collegata; ad esempio con rel=nofollow si può stabilire che i motori di ricerca non possano cercare un hyperlink.

Esempio:

<a href="URL-destinazione">Testo link o tag immagine</a>
html

Sintassi del tag <link>

A seconda dello scopo, per integrare il tag <link> in HTML si possono considerare diverse varianti e attributi HTML:

Collegare fogli di stile

Per integrare fogli di stile CSS esterni e definire l’aspetto di un sito web si utilizza la sintassi seguente:

<link rel="stylesheet" href="styles.css">
html

Collegare favicon

Per visualizzare piccoli simboli o immagini (favicon) vicino agli URL si usa la sintassi seguente.

<link rel="icon" href="favicon.ico">
html

Prefetching

Per migliorare le prestazioni di caricamento dei siti web è possibile caricare risorse in background con il prefetching. A questo scopo si utilizza la sintassi seguente:

<link rel="prefetch" href="pagina-successiva.html">
html

URL o tag canonici

Collegando URL o tag canonici puoi comunicare ai motori di ricerca quale URL deve essere preferito quando diversi URL rimandano alla stessa pagina:

<link rel="canonical" href="https://url-esempio/canonical-url">
html

Collegare URL alternativi

Se sono disponibili diverse versioni dello stesso sito web, ad esempio in varie lingue, è possibile collegarle come segue:

<link rel="alternate" href="alternative-url.html" type="text/html" title="pagina alternativa">
html
Consiglio

Dai uno sguardo al nostro tutorial su HTML per principianti per scoprire ancora di più questo linguaggio.

Per quali scopi si usano i tag link HTML?

I comuni campi di applicazione dei tag link HTML sono:

  • Navigazione migliorata mediante menu e barre di navigazione integrati
  • Collegamento e integrazione di hyperlink a risorse o URL interni o esterni
  • Download di file e documenti
  • Collegamento efficiente alle pagine secondarie interne rilevanti mediante link di ancoraggio
  • Accessibilità e ottimizzazione per i motori di ricerca
  • Miglioramento dei tempi di caricamento e delle prestazioni dei siti web
Acquista e registra il tuo dominio con il provider n°1 in Europa
  • Domain Connect gratuito per una configurazione facile del DNS
  • Certificato SSL Wildcard gratuito
  • Protezione privacy inclusa
Vai al menu principale