Lingua e titolo del documento

Informazioni che non appaiono nel contenuto

Nel <head> metti informazioni che aiutano browser, motori di ricerca e tecnologie assistive a interpretare la pagina. Si chiamano metadati, cioè dati che descrivono il documento.

Una base completa è questa:

<!doctype html>
<html lang="it">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Prodotti | Panificio Aurora</title>
    <meta
      name="description"
      content="Scopri il pane e le focacce preparati ogni giorno dal Panificio Aurora."
    />
  </head>
  <body>
    <!-- Contenuto visibile -->
  </body>
</html>

Dichiarare la lingua

L’attributo lang="it" appartiene all’elemento <html> e indica che la lingua principale è l’italiano.

Un lettore di schermo può usarlo per scegliere pronuncia e voce corrette. Serve anche ai sistemi di traduzione e ai motori di ricerca.

Se una breve parte usa un’altra lingua, dichiarala su quell’elemento:

<p>In inglese, pane si dice <span lang="en">bread</span>.</p>

Scegliere la codifica

<meta charset="UTF-8" />

La codifica definisce come il browser interpreta i caratteri del file. UTF-8 permette di mostrare correttamente lettere accentate e moltissimi alfabeti e simboli.

Metti questa dichiarazione tra le prime righe del head. Se manca o non corrisponde al file, potresti vedere caratteri strani al posto di è, à o €.

Scrivere un titolo utile

<title> appare nella scheda del browser, nei preferiti e spesso nei risultati di ricerca. È anche una delle prime informazioni annunciate da un lettore di schermo quando cambia pagina.

Ogni pagina deve avere un titolo specifico:

<title>Contatti | Panificio Aurora</title>

Evita di chiamare tutte le pagine “Home” o “Pagina”. Indica prima il contenuto unico e poi, se serve, il nome del sito.

Adattarsi allo schermo

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

Questa riga dice ai browser mobili di usare la larghezza reale del dispositivo. Non rende da sola il sito adattabile, ma permette al CSS responsivo di funzionare come previsto.

Descrivere la pagina

La description riassume il contenuto. Non viene mostrata nel corpo, ma i motori di ricerca possono usarla come anteprima.

Scrivi una frase concreta e diversa per ogni pagina. La descrizione non sostituisce il titolo e non cambia l’accessibilità del contenuto, ma aiuta una persona a capire se il risultato risponde alla sua ricerca.