Guida HTML interattiva: Doctype

Q: Il doctype distingue tra maiuscole e minuscole?

No. , e significano tutti la stessa cosa. DOCTYPE in maiuscolo con html in minuscolo è lo stile più diffuso.

Q: Come controllo se una pagina è in quirks mode?

Apri la console del browser ed esegui document.compatMode. "CSS1Compat" significa modalità standard (o quirks mode limitata), "BackCompat" significa quirks mode.

Cos'è `<!DOCTYPE html>`

<!DOCTYPE html> è la dichiarazione del doctype: la prima riga di un file HTML, prima del tag <html>. Dice al browser "questo è un documento HTML moderno", e il browser risponde mostrando la pagina in modalità standard, secondo le specifiche attuali di HTML e CSS.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>My page</title>
</head>
<body>
  <h1>Hello</h1>
  <p>The doctype is the very first line of this file.</p>
</body>
</html>

Quella riga è l'intero doctype di HTML5. Non ha tag di chiusura e dentro non va nient'altro.

Regole di sintassi

Viene per primo. Prima possono esserci solo spazi e commenti. Qualsiasi testo o tag prima del doctype fa sì che il browser lo ignori.
Non distingue maiuscole e minuscole. <!DOCTYPE html> e <!doctype html> sono identici. Scegli uno stile e mantienilo.
Non è un elemento. Non esiste </!DOCTYPE>, e non puoi aggiungergli una class o altri attributi.
La parola dopo DOCTYPE deve essere html. <!DOCTYPE html5> non è una versione più recente; il browser tratta quella pagina come se non avesse un doctype valido.
Uno per documento. Anche le pagine costruite da più file (template, include) producono un solo doctype in cima all'HTML finale.

Modalità standard e quirks mode

I browser hanno tre modalità di rendering, e il doctype ne sceglie una:

Modalità	Attivata da	Cosa cambia
Modalità standard	`<!DOCTYPE html>` e altri doctype moderni	Tutto segue le specifiche attuali
Quirks mode limitata	HTML 4.01 Transitional o Frameset con un URL, XHTML 1.0 Transitional o Frameset	Quasi standard: cambia solo una regola sull'altezza delle righe, quindi un'immagine da sola su una riga (di solito in una cella di tabella) non ha spazio sotto
Quirks mode	Nessun doctype, uno scritto male o alcuni vecchi come HTML 4.01 Transitional senza URL	Imita i browser degli anni '90: altezze in percentuale, dimensione del testo nelle tabelle e altezza delle righe si comportano diversamente

La quirks mode esiste perché le pagine scritte prima degli standard web abbiano ancora l'aspetto che vedevano i loro autori. Per le pagine nuove crea solo problemi: un height: 100% che funziona in una pagina e non in un'altra, o tabelle che ignorano la dimensione del font, sono sintomi classici di un doctype mancante.

Le anteprime dell'editor in questa pagina sono sempre in modalità standard, quindi cancellare lì un doctype non ti mostrerà la quirks mode. Il verificatore qui sotto usa DOMParser, che applica le stesse regole che usano i browser quando caricano un file. Modifica il doctype nella casella di testo e la modalità si aggiorna:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Doctype checker</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    textarea { width: 100%; height: 70px; font: 14px monospace; }
    #mode { font-weight: bold; padding: 8px 12px; border-radius: 6px; background: #e5e7eb; }
  </style>
</head>
<body>
  <label for="src">First line of a document:</label>
  <textarea id="src"><!DOCTYPE html></textarea>
  <p>Rendering mode: <span id="mode"></span></p>
  <script>
    const src = document.getElementById('src');
    const mode = document.getElementById('mode');
    function check() {
      const doc = new DOMParser().parseFromString(src.value + '<p>x</p>', 'text/html');
      const standards = doc.compatMode === 'CSS1Compat';
      mode.textContent = standards ? 'standards (CSS1Compat)' : 'quirks (BackCompat)';
      mode.style.background = standards ? '#dcfce7' : '#fef3c7';
    }
    src.addEventListener('input', check);
    check();
  </script>
</body>
</html>

Prova a cancellare la riga, a scrivere <!DOCTYPE html5> o a mettere una parola prima del doctype: ognuna di queste cose fa passare il risultato a quirks.

Vecchi doctype: HTML 4.01 e XHTML

Prima di HTML5, un doctype indicava un file DTD con un lungo identificatore pubblico. Li trovi ancora in cima ai siti più vecchi:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

I browser non hanno mai scaricato quei file DTD. Leggevano solo l'identificatore per scegliere una modalità: HTML 4.01 Strict e XHTML 1.0 Strict danno la modalità standard, le versioni Transitional danno la quirks mode limitata, e HTML 4.01 Transitional senza URL dà la quirks mode completa. Incollane uno nel verificatore qui sopra per provarlo; nota che compatMode riporta la quirks mode limitata come CSS1Compat, lo stesso valore della modalità standard, quindi solo la quirks mode completa compare come BackCompat.

Sostituire un vecchio doctype con <!DOCTYPE html> è sicuro per le pagine già in modalità standard. Una pagina che era in quirks mode può spostarsi un po' (di solito altezze e spazi sotto le immagini), quindi ricontrollala dopo la modifica.

Il doctype nel DOM

Il doctype diventa un nodo DocumentType, separato dall'elemento <html>. Gli script lo leggono tramite document.doctype, e document.compatMode riporta la modalità in cui è finita la pagina:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>document.doctype</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    code { background: #e5e7eb; padding: 2px 6px; border-radius: 4px; }
  </style>
</head>
<body>
  <p>doctype name: <code id="name"></code></p>
  <p>compatMode: <code id="compat"></code></p>
  <p>first child of document: <code id="first"></code></p>
  <script>
    const dt = document.doctype;
    document.getElementById('name').textContent = dt ? dt.name : 'none';
    document.getElementById('compat').textContent = document.compatMode;
    document.getElementById('first').textContent = document.firstChild.constructor.name;
  </script>
</body>
</html>

document.compatMode è il modo più rapido per controllare qualsiasi sito online: apri la console del browser e scrivilo. "CSS1Compat" significa modalità standard (o quirks mode limitata), "BackCompat" significa quirks mode.

Un modello di partenza HTML5 completo

Il doctype è una parte del documento minimo da cui ogni pagina dovrebbe partire. Ogni riga qui sotto ha un compito:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Starter page</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; max-width: 40rem; margin: 2rem auto; padding: 0 1rem; }
    li code { background: #e5e7eb; padding: 1px 5px; border-radius: 4px; }
  </style>
</head>
<body>
  <h1>Starter page</h1>
  <ul>
    <li><code>&lt;!DOCTYPE html&gt;</code> turns on standards mode</li>
    <li><code>lang="en"</code> names the page language</li>
    <li><code>charset="utf-8"</code> makes accented letters and emoji display correctly</li>
    <li><code>viewport</code> makes the page fit phone screens</li>
    <li><code>&lt;title&gt;</code> is the text on the browser tab</li>
  </ul>
</body>
</html>

L'attributo lang e il meta tag viewport hanno ciascuno una pagina propria.

Errori comuni

Qualcosa prima del doctype. Un carattere di troppo, un echo di debug da uno script lato server o un tag HTML sopra <!DOCTYPE html> mettono tutta la pagina in quirks mode. Commenti e righe vuote vanno bene.
Inventare una versione. <!DOCTYPE html5> o <!DOCTYPE HTML 5> non sono validi e attivano la quirks mode. Il doctype di HTML5 è solo <!DOCTYPE html>.
Chiuderlo. <!DOCTYPE html></!DOCTYPE> non è HTML valido. La dichiarazione non ha un tag di chiusura.
Ometterlo nei piccoli file di prova. I bug di layout che insegui in un file di prova senza doctype potrebbero non esistere nella pagina vera, e viceversa.
Tenere un vecchio doctype Transitional. Mette la pagina in quirks mode limitata senza alcun vantaggio. Passa a <!DOCTYPE html>.

Domande frequenti

Cosa fa <!DOCTYPE html>?

Dice al browser che la pagina è un documento HTML moderno, quindi viene mostrata in modalità standard. Senza, i browser ripiegano sulla quirks mode, che imita i bug dei browser di fine anni '90 e cambia il modo in cui vengono calcolati alcuni layout e alcune altezze.

<!DOCTYPE html> è obbligatorio?

La pagina si carica anche senza, ma lo standard HTML lo richiede e i browser mostrano la pagina in quirks mode. Metti sempre <!DOCTYPE html> sulla prima riga.

Il doctype distingue tra maiuscole e minuscole?

No. <!DOCTYPE html>, <!doctype html> e <!DocType HTML> significano tutti la stessa cosa. DOCTYPE in maiuscolo con html in minuscolo è lo stile più diffuso.

DOCTYPE è un tag HTML?

No. È una dichiarazione, non un elemento: non ha tag di chiusura, non puoi aggiungergli attributi e non compare in document.body. Nel DOM è un nodo DocumentType separato, disponibile come document.doctype.

Qual è il doctype di HTML5?

<!DOCTYPE html>. HTML5 ha eliminato i lunghi identificatori pubblici e gli URL di HTML 4.01 e XHTML, e la forma breve è l'unico doctype che ti serve per qualsiasi pagina nuova.

Come controllo se una pagina è in quirks mode?

Apri la console del browser ed esegui document.compatMode. "CSS1Compat" significa modalità standard (o quirks mode limitata), "BackCompat" significa quirks mode.

Concetti correlati