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“.
