Corso di HTML / Impostare titolo, descrizione, lingua e codifica della pagina

L'head di un documento HTML contiene informazioni come il titolo della scheda del browser, definito da title, la codifica dei caratteri e la descrizione della pagina. La lingua predefinita del documento dovrebbe essere impostata in html lang. Queste impostazioni aiutano i browser e altri strumenti a interpretare e descrivere la pagina, ma non sostituiscono il contenuto leggibile in body.

Iniziare con un documento completo

<!doctype html>
<html lang="it-IT">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Piccolo Giardino | Guida alla Cura delle Piante</title>
  <meta name="description"
        content="Scoprite piante adatte ai principianti e la loro cura essenziale con la guida Piccolo Giardino.">
</head>
<body>
  <h1>Piccolo Giardino</h1>
  <p>Imparate a prendervi cura delle piante.</p>
</body>
</html>

Salvate il codice come index.html e apritelo in un browser. Il title appare nella scheda del browser, mentre l'elemento h1 è visibile nella pagina. Hanno funzioni diverse, ma dovrebbero descrivere la stessa pagina in modo coerente. L'elemento h1 nell'esempio si trova all'interno di un documento di esempio e non come secondo titolo in questo post del tutorial. Iniziate distinguendo tra head e body nella struttura di base di un documento HTML.

La maggior parte dei contenuti di head non viene visualizzata sulla pagina come testo normale. Fornite le istruzioni e le spiegazioni che i lettori dovrebbero vedere in body. Su un sito web multipagina, scrivete per ogni pagina un titolo e una descrizione unici e precisi, invece di copiare ovunque lo stesso nome del sito.

Impostare la lingua e la codifica dei caratteri

lang="it-IT" indica che la lingua predefinita del documento è l'italiano. Questo può aiutare le tecnologie assistive a pronunciare ed elaborare il contenuto. Usate la lingua effettiva della pagina; una frase occasionale in un'altra lingua non richiede che l'intero documento lang sia modificato. Un paragrafo più lungo in un'altra lingua può avere un proprio attributo di lingua. La lingua e la struttura supportano anche i controlli di lettura e interazione in Accessibilità di base: titoli, link, immagini e tastiera.

meta charset="utf-8" indica la codifica dei caratteri. Salvate anche il file stesso in UTF-8. Se i caratteri vengono visualizzati in modo errato, verificate sia la codifica scelta durante il salvataggio nell'editor sia, se viene messo a disposizione online, gli header di risposta del server. Cambiare solo il tag non può riparare un file salvato in un'altra codifica.

Comprendere la descrizione e la finestra di visualizzazione

I metadati description devono riassumere ciò che i lettori trovano in questa pagina specifica e non devono elencare parole chiave. I motori di ricerca possono creare uno snippet dei risultati dal testo o dai metadati della pagina, quindi la descrizione scritta non apparirà necessariamente parola per parola. Consultate la documentazione sugli snippet nella ricerca Google .

Il parametro viewport influisce sulla finestra di visualizzazione per il layout e sulla scala iniziale sui dispositivi mobili. È utile insieme al CSS reattivo, ma il tag da solo non garantisce che ogni elemento si adatti a un telefono. Non limitate semplicemente lo zoom perché il testo appare piccolo; correggete invece il CSS e la dimensione del carattere. Consultate la documentazione meta su MDN e la documentazione di title.

Verificare le impostazioni nel posto giusto

lang non è un tag separato all'interno di head. Impostatelo sull'elemento del documento, come <html lang="it-IT">, e utilizzate un attributo di lingua su un elemento specifico per una sezione in un'altra lingua.

1. Se i caratteri non sono leggibili, aprite il documento originale corretto e controllate la sua codifica effettiva durante il salvataggio. Conservate una copia prima di salvare un testo che potrebbe essere già stato decodificato in modo errato.
2. Salvate un file noto e corretto in UTF-8, mantenete la dichiarazione del charset vicino all'inizio e apritelo di nuovo. Modificare la dichiarazione non ripara un testo già danneggiato.
3. Se il file locale è corretto, ma la pagina fornita dal server no, controllate il Content-Type e il charset della risposta del documento nella rete. Allineate la dichiarazione del server con la codifica effettiva del file.

Attributo globale lang MDN

Controllare la pagina prima di condividerla

Assicuratevi che ogni titolo della scheda distingua la propria pagina, che il titolo visibile descriva lo stesso argomento e che i caratteri siano visualizzati correttamente. Se avete scritto una descrizione, confrontatela con il corpo del testo attuale e non con una versione precedente. Aprite la pagina a una larghezza tipica del telefono e provate lo zoom e lo scorrimento orizzontale; i metadati e il layout devono funzionare insieme.