
A che cosa serve l’attributo rel?
Utilizzato per i tags <link>
, <a>
e <area>
, l’attributo Rel descrive il tipo di relazione instaurata tra la risorsa attuale e quella linkata.
È nuovo? Per nulla, ma HTML5 porta nuove proprietà molto interessanti da utilizzare…
Perchè usare i nuovi valori?
Sono felice che tu lo chieda!
Usare questo attributo serve per 3 motivi.
- Offre “miele” ai motori di ricerca semantici spiegando che relazione intercorre tra due documenti.
- Dice al browser dove trovare risorse esterne come fogli stile, favicons e feed RSS.
- Aiuta gli scripts, i robots e le altre applicazioni web ad identificare ed utilizzare differenti tipi di links.
Ecco quindi una tabella riassuntiva dei possibili valori che l’attributo rel può assumere da specifiche html4 e html5 valide per il W3C
Valore REL | <link> | <a> & <area> | Descrizione | Specifica |
---|---|---|---|---|
alternate | Hyperlink | Hyperlink | Link ad una rappresentazione alternativa della pagina attuale. | HTML5/HTML4 |
bookmark | Non permesso | Hyperlink | Permalink al contenuto del contenitore più vicino. | HTML5/HTML4 |
help | Hyperlink | Hyperlink | Il documento linkato offre un aiuto valido per l’elemento parente. | HTML5/HTML4 |
index | Hyperlink | Hyperlink | Link alla tabella dei contenuti o ad un indice (non la homepage) | HTML5/HTML4 |
next | Hyperlink | Hyperlink | Link al documento ‘successivo’ di una serie. | HTML5/HTML4 |
prev | Hyperlink | Hyperlink | Link al documento ‘precedente’ di una serie. | HTML5/HTML4 |
stylesheet | Risorsa esterna | Non permesso | Importa un foglio stile | HTML5/HTML4 |
archives | Hyperlink | Hyperlink | Link ad una collezione di records, documenti o altri materiali di interesse storico. | HTML5 |
author | Hyperlink | Hyperlink | Link alle informazioni relative all’autore dell’ <article> di riferimento | HTML5 |
external | Non permesso | Hyperlink | Link che punta ad una pagina esterna al sito attuale. | HTML5 |
first | Hyperlink | Hyperlink | Link al primo documento in una serie. | HTML5 |
icon | Risorsa Esterna | Non permesso | Importa un’icona che rappresenta una pagina. (favicon) | HTML5 |
last | Hyperlink | Hyperlink | Link all’ultima pagina in una serie di documenti. | HTML5 |
license | Hyperlink | Hyperlink | Link alle informazioni relative al copyright di un documento | HTML5 |
nofollow | Non permesso | Annotazione | Indica che l’autore del documento non conferma la validità della pagina a cui si linka. | HTML5 |
noreferrer | Non permesso | Annotazione | Impedisce l’invio del referente tramite HTTP header. | HTML5 |
pingback | Risorsa esterna | Non permesso | L’indirizzo del server di pingback. | HTML5 |
Prefetch | Risorsa esterna | Risorsa esterna | Fa il preload del documento linkato. | HTML5 |
search | Hyperlink | Hyperlink | Linka ad un documento di tipo OpenSearch. | HTML5 |
sidebar | Hyperlink | Hyperlink | Mostra il documento linkato in una sidebar del browser (se ne ha una). | HTML5 |
tag | Hyperlink | Hyperlink | Un tag o una parola chiave applicabile al documento corrente. | HTML5 |
up | Hyperlink | Hyperlink | Link al documento padre del documento attuale. | HTML5 |
PS: non usate il rel come attributo generico (ad esempio da sfruttare in javascript)! Per questo scopo in html5 sono stati introdotti i “data-attribute“.