Il tag <link> HTML ti consente di ancorare hyperlink a de­sti­na­zio­ni interne o esterne come URL, elementi mul­ti­me­dia­li, file o altri elementi nel testo HTML. Così migliori la na­vi­ga­bi­li­tà, 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 col­le­ga­men­ti a risorse interne o esterne in un documento HTML. Con i tag <a> è possibile integrare hyperlink a siti web esterni o interni e col­le­ga­men­ti a file, documenti e download. Mediante i tag <link> puoi inserire risorse come fogli di stile, tipi di caratteri e icone, mi­glio­ran­do la fun­zio­na­li­tà, la facilità d’uso e la na­vi­ga­bi­li­tà all’interno di un sito.

Qual è la dif­fe­ren­za tra <a> e <link>?

Per integrare hyperlink (col­le­ga­men­ti iper­te­stua­li) o risorse esterne, a seconda del caso entrano in gioco i tag HTML <a> oppure <link>. Hanno scopi e funzioni diverse, pertanto occorre prestare at­ten­zio­ne alle dif­fe­ren­ze:

  • <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 prin­ci­pal­men­te di integrare risorse esterne come fogli di stile CSS, favicon, documenti o caratteri in documenti HTML. Puoi così de­ter­mi­na­re l’aspetto o il com­por­ta­men­to di una pagina HTML o il suo fun­zio­na­men­to con la tecnica del pre­fet­ching o gli URL preferiti (URL canonici).

La dif­fe­ren­za prin­ci­pa­le è che <a> è usato pre­va­len­te­men­te per l’in­te­gra­zio­ne di hyperlink, mentre a <link> si ricorre in par­ti­co­la­re per integrare elementi esterni come fogli di stile. Inoltre, i tag <a> vengono integrati prin­ci­pal­men­te 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
  • Di­spo­ni­bi­li­tà garantita al 99,99%
  • Dominio, SSL ed e-mail inclusi
  • As­si­sten­za 24/7 in lingua italiana

La sintassi dei tag link HTML

Di seguito ti spie­ghia­mo la sintassi dei due tag link HTML <a> e <link>.

Sintassi del tag <a>

Per usare cor­ret­ta­men­te 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 de­sti­na­zio­ne a cui rimandare con il tag link. Può trattarsi di un URL assoluto o relativo o anche di un ID di an­co­rag­gio per la stessa pagina.
  • Testo link o tag immagine: l’URL di de­sti­na­zio­ne viene integrato come URL relativo o assoluto all’interno dei tag <a>…</a> e dopo l’attributo href per ancorare il col­le­ga­men­to 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 de­sti­na­zio­ne, 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 au­to­ma­ti­ca­men­te un download
  • title: serve per vi­sua­liz­za­re titoli o de­scri­zio­ni 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 con­si­de­ra­re 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 vi­sua­liz­za­re piccoli simboli o immagini (favicon) vicino agli URL si usa la sintassi seguente.

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

Pre­fet­ching

Per mi­glio­ra­re le pre­sta­zio­ni di ca­ri­ca­men­to dei siti web è possibile caricare risorse in back­ground con il pre­fet­ching. A questo scopo si utilizza la sintassi seguente:

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

URL o tag canonici

Col­le­gan­do URL o tag canonici puoi co­mu­ni­ca­re 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 al­ter­na­ti­vi

Se sono di­spo­ni­bi­li diverse versioni dello stesso sito web, ad esempio in varie lingue, è possibile col­le­gar­le 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 prin­ci­pian­ti per scoprire ancora di più questo lin­guag­gio.

Per quali scopi si usano i tag link HTML?

I comuni campi di ap­pli­ca­zio­ne dei tag link HTML sono:

  • Na­vi­ga­zio­ne mi­glio­ra­ta mediante menu e barre di na­vi­ga­zio­ne integrati
  • Col­le­ga­men­to e in­te­gra­zio­ne di hyperlink a risorse o URL interni o esterni
  • Download di file e documenti
  • Col­le­ga­men­to ef­fi­cien­te alle pagine se­con­da­rie interne rilevanti mediante link di an­co­rag­gio
  • Ac­ces­si­bi­li­tà e ot­ti­miz­za­zio­ne per i motori di ricerca
  • Mi­glio­ra­men­to dei tempi di ca­ri­ca­men­to e delle pre­sta­zio­ni dei siti web
Acquista e registra il tuo dominio con il provider n°1 in Europa
  • Domain Connect gratuito per una con­fi­gu­ra­zio­ne facile del DNS
  • Cer­ti­fi­ca­to SSL Wildcard gratuito
  • Pro­te­zio­ne privacy inclusa
Vai al menu prin­ci­pa­le