Come già anticipato nella lezione precedente, <head>, conosciuto anche come metadata header è figlio di <html> insieme a <body>, contiene tutti i metadati del sito o web application.
Le informazioni chiave da inserire sono: encoding, title e viewport. Cosa che abbiamo già fatto nel nostro primo documento:
1<!DOCTYPE html>
2<html lang="it-IT">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Homepage</title>
7</head>
8<body>
9
10</body>
11</html>In questo approfondimento vedremo più nel dettaglio i vari tag che si possono usare nella head e perché sono importanti.
Il tag title
Il tag <title> è usato come titolo del documento HTML. Il browser usa questa informazione per dare un nome alla scheda che ospita la pagina, mentre i motori di ricerca la usano per generare la parte cliccabile del risultato di ricerca.
Dal punto di vista dell’accessibilità, il tag title viene usato dagli utenti che navigano con tecnologie assistive per determinare il contenuto di una pagina.
Questo perché navigare le pagine web è un’attività che porta via un sacco di tempo, soprattutto se queste non sono il massimo dell’accessibilità. Un titolo breve e che va dritto al punto può sicuramente essere di maggior aiuto rispetto ad un qualcosa scritto solo per scopi di ottimizzazione per motori di ricerca o non scritto affatto.
Aggiungere metadati al documento HTML
Nelle informazioni fondamentali da includere nella head di un documento HTML ci sono encoding e viewport, questi due vengono aggiunti grazie all’uso del tag <meta> il cui compito è proprio quello di aggiungere metadati al documento HTML.
Il tag meta ha a disposizione diversi attributi, nello specifico:
charset: usato per definire la codifica dei caratteriname: insieme acontentpuò essere usato per fornire metadati in forma di coppia nome-valore.nameè il nome, mentrecontentè il valore.content: può essere usato in coppia connameohttp-equive fornisce il valore al metadato specificato in uno due attributi menzionati.http-equiv: sta per http-equivalent e definisce una direttiva pragma, cioè impartisce istruzioni al browser su come una pagina deve essere parsificata.
In merito all’attributo name, lo standard HTML prevede i seguenti valori:
application-name: il nome dell’applicazione in esecuzione nella pagina webauthor: autore del documentodescription: breve descrizione del contenuto della pagina, i motori di ricerca usano questa informazione per generare il testo grigio sotto al titolo del risultato di ricercagenerator: identifica il software usato per generare la paginakeywords: parole chiave rilevanti per la pagina web, ormai usato molto poco per via degli spammer che usavano questo tag per ingannare i motori di ricerca.referrer: controlla l’header HTTPRefererdelle richieste inviata dal documentotheme-color: indica il colore che il browser dovrebbe utilizzare per personalizzare l’interfaccia quando visita la pagina. Il contenuto è una qualsiasi forma di colore prevista dalla specifica di CSS.color-scheme: specifica uno o più schemi colore con cui il documento è compatibile (es. light e dark mode)
viewport non compare nella lista perché non fa parte della specifica di HTML, ma di CSS. Questo valore di name permette di suggerire quale sarà la grandezza iniziale del viewport, ci sono varie impostazioni, ma di solito i valori utilizzati sono questi:
1<meta name="viewport" content="width=device-width, initial-scale=1.0">Dove:
width: definisce la larghezza del viewport in pixel per la quale vogliamo renderizzare il sito (device-width è la larghezza dello schermo del dispositivo dalla quale stiamo visualizzando la pagina)initial-scale: valore positivo da0.0a10.0ed è il rapporto tra la larghezza del dispositivo e la larghezza del viewport.
Altri valori non standard sono:
robots: istruzioni che si possono impartire ai crawler dei motori di ricerca (chiamati anche robots)creator: nome del creatore del documento (simile adauthor)googlebot: equivalente di robots, ma esclusivamente per il crawler di Googlepublisher: il nome dell’editore del documento (simile adauthor)
Open Graph
Il protocollo Open Graph è stato implementato da Facebook per facilitare la condivisione di contenuti sul social network.
Questo Protocollo permette di rappresentare le pagine web sotto forma di oggetti, suggerendo alla piattaforma social come mostrare le informazioni provenienti da pagine di siti esterni.
Oltre a Facebook il protocollo Open Graph è adottato anche dalle altre principali piattaforme social.
Twitter (ora X) ha la sua estensione di Open Graph per generare le anteprime dei link in base alle preferenze imposte da codice.
Il tag base
<base> è un tag poco utilizzato, ma può essere trovato nella head.
Il suo compito è quello di definire la radice e il comportamento di base dei link presenti nel documento.
Attenzione! Open Graph ignora <base> per cui bisogna usare sempre URL assoluti.
Un esempio di come si utilizza base:
1<base href=”[https://www.manuelricci.com](https://www.manuelricci.com)” target=”_blank” />In questo modo tutti gli URL relativi avranno come base (per l’appunto) l’indirizzo specificato con l’attributo href e il comportamento del browser quando vengono cliccati è quello di aprirli in una nuova scheda (_blank apre in una nuova scheda, _self nella stessa scheda del documento)
Il tag link
Il tag <link> specifica la relazione tra il documento corrente e una risorsa esterna. L’uso più comune di link è per collegare fogli di stile, ma i valori che può avere l’attributo rel sono 25, quindi diciamo che ci sono diversi casi d’uso. Alcuni valori che meritano un approfondimento sono:
- alternate
- canonical
- dns-prefetch
- icon
- manifest
- prev/next
- preconnect
- prefetch
- preload
- stylesheet
- apple-touch-icon (non standard)
Alternate
Indica una rappresentazione alternativa del documento corrente. Può valere per degli stili alternativi (es. alto contrasto), localizzazioni o feed RSS di un blog.
1<!-- Foglio di stile alternativo -->
2<link rel="alternate stylesheet" href="highcontrast.css" title="alto contrato" />
3<!-- RSS del blog -->
4<link rel="alternate" type="application/rss+xml" title="Il Feed RSS del mio blog" href="https://www.manuelricci.com/feed/" />
5<!-- Versione per la stampa-->
6<link rel="alternate" href="/en" hreflang="en" type="text/html" media="print" title="Versione inglese da stampare" />
7<!-- Versione PDF in inglese →
8<link rel="alternate" href="/en/pdf" hreflang="en" type="application/pdf" title="Versione PDF inglese" />Canonical
Definisce l’URL preferito del documento corrente, utile per evitare che i motori di ricerca considerino pagine simili come duplicate.
Dns-prefetch
Comunica al browser di risolvere i nomi di dominio prima che la risorsa venga richiesta.
Quando il browser invia una richiesta per una risorsa di terze parti, il dominio della risorsa in questione deve essere risolto (DNS Lookup) per ottenere l’indirizzo IP.
dns-prefetch fa partire la risoluzione del DNS ancor prima che la risorsa venga effettivamente individuata all’interno del documento, diminuendo la latenza.
``html ```
Ci sono infine, un paio di cose da tenere a mente con dns-prefetch:
dns-prefetchè efficace solo per richieste domini cross–origine.dns-prefetchpuò essere usato insieme apreconnect. Mentre il primo risolve il DNS, il secondo stabilisce anche la connessione. Usarli insieme permette di ridurre ancor di più la potenziale latenza.
Icon
Usato principalmente per indicare l’icona del sito usata nella scheda del browser, dai motori di ricerca, nei preferiti e così via.
Possono essere definite più icone, il browser stabilirà la più appropriata in base ai valori degli attributi media, type e sizes.
1<link rel=icon href=favicon.png sizes="16x16" type="image/png">
2<link rel=icon href=iphone.png sizes="57x57" type="image/png">
3<link rel=icon href=gnome.svg sizes="any" type="image/svg+xml">
4<link rel=icon href=mac.icns sizes="128x128 512x512 8192x8192 32768x32768">Manifest
Indica il web app manifest, usato per rendere installabile il sito sui vari dispositivi. Per approfondire ulteriormente ti consiglio di dare una letta al mio articolo sui concetti chiave della progressive web app oppure recuperare la diretta con la sessione di live coding dove ho parlato e mostrato meglio questi concetti.
Prev e next
Indicano rispettivamente la pagina precedente e successiva in una serie di documenti.
Con l’uso di prev e next comunichiamo al browser che è molto probabile che la pagina successiva verrà visitata successivamente a quella attualmente visualizzata e procederà al prefetch.
Prefetch
prefetch carica la pagina in background perché è probabile che l’utente la visiti nell’immediato futuro.
prefetch può essere usato anche per delle risorse come i fogli di stile.
1<link rel="prefetch" href="/foglio-di-stile-importante.css" />Preconnect
Apre la connessione con il server di una risorsa di terze parti. preconnect non scarica nulla, ma si connette solamente in modo tale da scaricare più velocemente la risorsa quando sarà necessaria.
Preload
preload comunica di voler caricare e memorizzare preventivamente una risorsa che potrà servire presto e che si desidera caricare prima che il browser avvii tutto il processo di rendering.
In questo modo la risorsa precaricata non sarà bloccante per il rendering della pagina migliorando le performance.
Nel caso del preload di uno script, questo non verrà eseguito, ma solamente scaricato e memorizzato.
Stylesheet
L’uso più famoso di link nella head è quello per collegare un foglio di stile esterno.
In congiunzione con media è possibile specificare anche per che tipo di sistema è stato scritto il foglio di stile (es. stampa o schermo).
Il tag style
Oltre all’uso di <link> per cariche un foglio di stile esterno, qualora il CSS che dobbiamo inserire è minimo possiamo optare per utilizzare il tag <style>. Tra il tag di apertura e chiusura sarà possibile scrivere codice CSS.
1<style>
2 p {
3 color: #b4d455;
4 }
5</style>L’uso del tag style non è limitato alla head, ma può essere usato anche nel body.
Il tag script
<script> è il tag che ci permette di inserire codice JavaScript direttamente nel documento HTML oppure se viene usato l’attributo src abbiamo la possibilità di collegare un file esterno.
Inserire uno script nella head non è sempre una best practice perché JavaScript, come altre risorse, è considerato bloccante, cioè blocca il rendering di HTML.
Per questo motivo gli script non critici possono essere messi in fondo alla pagina prima della chiusura di body oppure possono essere usati due attributi come defer e async.
Caricamento...
Diventiamo amici di penna? ✒️
Iscriviti alla newsletter per ricevere una mail ogni paio di settimane con le ultime novità, gli ultimi approfondimenti e gli ultimi corsi gratuiti puubblicati. Ogni tanto potrei scrivere qualcosa di commerciale, ma solo se mi autorizzi, altrimenti non ti disturberò oltre.
Se non ti piace la newsletter ti ricordo la community su Discord, dove puoi chiedere aiuto, fare domande e condividere le tue esperienze (ma soprattutto scambiare due meme con me). Ti aspetto!