HTML Academy · Lezione

charset e gestione Unicode: caratteri speciali

Usare UTF-8 e le entità HTML per visualizzare correttamente qualsiasi carattere

Lezione 4 di 413 passaggi

charset e gestione Unicode: caratteri speciali è una lezione HTML Academy gratuita su CoddyKit. Questa è la lezione 4 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento HTML Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso HTML Academy include 4 lezioni in totale.

La dichiarazione charset

Ogni documento HTML deve dichiarare la propria codifica dei caratteri. Lo standard è UTF-8: <meta charset="utf-8"> come primissimo elemento di <head>. In sua assenza, il browser tenta di indovinare la codifica, spesso con risultati errati per il testo non ASCII.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Page</title>

Perché UTF-8?

UTF-8 codifica ogni carattere Unicode: ogni sistema di scrittura, ogni emoji e ogni simbolo. È compatibile con ASCII, quindi a-z e 0-9 restano codificati su un singolo byte, ed è la codifica dominante sul Web moderno: nel 2024 oltre il 98% delle pagine usa UTF-8.

La posizione è fondamentale

Il meta tag charset deve comparire nei primi 1024 byte del documento, in genere nella prima riga di <head>. Il browser rileva la codifica da quei byte; dichiarare charset più avanti potrebbe non influire sul risultato del rilevamento.

Salvi i file in UTF-8

Il meta tag dichiara la codifica, ma l'editor deve effettivamente salvare il file con quella codifica. Nelle versioni moderne, VS Code, IntelliJ e Sublime utilizzano UTF-8 come impostazione predefinita. I file salvati come Windows-1252 o ISO-8859-1 producono mojibake, cioè caratteri illeggibili, anche quando il meta tag è corretto.

Entità HTML

I caratteri HTML speciali (<, >, &, ") devono essere sottoposti a escape per evitare ambiguità nel parser: &lt; per <, &gt; per >, &amp; per & e &quot; per ". Nei valori degli attributi, &quot; è obbligatorio quando il valore è racchiuso tra virgolette doppie.

Riferimenti numerici ai caratteri

È possibile fare riferimento a qualsiasi carattere Unicode tramite il relativo code point: &#9731; oppure &#x2603; per il pupazzo di neve (☃). Li utilizzi quando digitare direttamente il carattere non è pratico, ad esempio per simboli rari o caratteri di controllo, ma preferisca il carattere Unicode letterale quando l'editor lo supporta.

Emoji e coppie surrogate

Le emoji sono caratteri Unicode al di sopra di U+FFFF e vengono rappresentate come coppie surrogate in UTF-16, la codifica utilizzata internamente nelle stringhe JavaScript. UTF-8 le codifica come sequenze di 4 byte. Quando charset="utf-8" è impostato, le emoji vengono visualizzate nativamente senza entità.

Bug comuni di codifica

Se "Don't" viene visualizzato come "Don’t", significa che il file viene interpretato come Latin-1 ma è stato salvato come UTF-8. Risolva il problema salvando il file come UTF-8 e verificando che sia presente <meta charset="utf-8">. I browser moderni usano UTF-8 come impostazione predefinita solo quando il meta tag è assente e il file è verosimilmente codificato in UTF-8.

Header HTTP Content-Type

Il server può dichiarare la codifica anche tramite l'header della risposta: Content-Type: text/html; charset=utf-8. L'header ha la precedenza sul meta tag, quindi server configurati in modo errato possono causare problemi di codifica anche in presenza di HTML scritto correttamente.

Utilizzo dei form

Per impostazione predefinita, i form vengono inviati utilizzando la codifica della pagina. Le pagine UTF-8 inviano dati del form in UTF-8, che il server dovrebbe decodificare come UTF-8. Una mancata corrispondenza tra la codifica della pagina e quella usata dal server per la decodifica è una causa comune di dati utente alterati nei siti multilingue.

Eviti il BOM

I file UTF-8 possono iniziare con un byte order mark (BOM, 0xEF 0xBB 0xBF). La maggior parte dei browser lo gestisce, ma alcuni strumenti e CDN no; inoltre, in alcuni editor di testo il BOM appare come un carattere visibile. Salvi i file come "UTF-8 senza BOM" per evitare sorprese.

Verifica delle conoscenze

Perché deve comparire nei primi 1024 byte di un documento HTML?

Riepilogo

Dichiari <meta charset="utf-8"> come primo figlio di <head> e salvi i file in UTF-8. UTF-8 codifica ogni carattere Unicode, comprese le emoji e tutti i sistemi di scrittura. Sottoponga <, >, & e " a escape come entità; utilizzi i riferimenti numerici per i caratteri rari. Tenga presente che l'header HTTP Content-Type può sovrascrivere il meta tag e che in alcuni strumenti il BOM può apparire come un carattere visibile.

Gratis per iniziare

Impara HTML con un tutor IA — gratis

Scrivi ed esegui vero codice nel tuo browser, ricevi aiuto istantaneo da un tutor IA disponibile 24/7, e riprendi da dove hai lasciato sul web o nell'app.

Corsi
40
Lezioni
159

Domande Frequenti

La lezione «charset e gestione Unicode: caratteri speciali» è gratuita?

Sì — il testo completo di «charset e gestione Unicode: caratteri speciali» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso HTML Academy, passa a CoddyKit PRO. Il corso HTML Academy include 4 lezioni in totale.

Cosa imparerò in «charset e gestione Unicode: caratteri speciali»?

Usare UTF-8 e le entità HTML per visualizzare correttamente qualsiasi carattere Eserciti HTML Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare HTML Academy?

Non è richiesta alcuna esperienza precedente. HTML Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 4 di 4.

Quanto tempo richiede la lezione «charset e gestione Unicode: caratteri speciali»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione HTML Academy?

Sì. Ogni lezione HTML Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

  1. L’attributo lang e gli screen reader
  2. dir=rtl per il testo da destra a sinistra
  3. Gli elementi bdi e bdo
  4. charset e gestione Unicode: caratteri speciali
← Torna a HTML Academy