Dichiarazione HTML <!DOCTYPE>
Scopri la dichiarazione HTML <!DOCTYPE>: usa <!DOCTYPE html> per attivare la Modalità Standard, evitare bug della Modalità Quirks e avviare i documenti correttamente.
La dichiarazione <!DOCTYPE> è la prima riga di un documento HTML. Indica al browser quale versione di HTML viene utilizzata nella pagina e — cosa più importante oggi — che la pagina deve essere renderizzata secondo gli standard web. Non è un tag HTML; è un'istruzione per il browser.
Questa pagina illustra il doctype che dovresti usare, perché è importante (Modalità Standard vs. Modalità Quirks) e una breve nota sui doctype legacy che potresti ancora incontrare nel codice vecchio.
Il Doctype da Utilizzare
Per ogni nuovo documento HTML, usa questa singola riga, esattamente come mostrata:
<!DOCTYPE html>Questo è il doctype HTML5 completo. Alcune regole:
- Deve essere la prima cosa nel documento, prima del tag
<html>e prima di qualsiasi altro contenuto (anche prima di un commento o di una riga vuota, per sicurezza). - Non è case sensitive —
<!DOCTYPE html>,<!doctype html>e<!Doctype HTML>sono tutti validi. Il minuscolo<!doctype html>è comune, ma la convenzione mostrata sopra è la più diffusa. - Non ha un tag di chiusura.
Un documento minimo e completo si presenta così:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Title of the document</title>
</head>
<body>
<h2>Elements example</h2>
<p>This is some paragraph.</p>
<p>This is another paragraph <br /> with a line break.</p>
</body>
</html>Per scoprire cosa inserire nel documento dopo il doctype, consulta HTML Basic Tags, il tag <html> e il tag <head>.
Perché il Doctype è Importante: Modalità Standard vs. Modalità Quirks
Quando un browser analizza una pagina, sceglie tra due modalità di rendering:
- Modalità Standard — il browser segue le moderne specifiche W3C/WHATWG. Questo è ciò che si desidera. Il layout, il box model e CSS si comportano in modo coerente tra i browser.
- Modalità Quirks — il browser emula il comportamento difettoso dei browser della fine degli anni '90 (come Internet Explorer 5) per evitare che le pagine molto vecchie si rompano. Questa modalità viene attivata quando il doctype è assente, malformato o obsoleto/sconosciuto.
Un corretto <!DOCTYPE html> è ciò che porta il browser in Modalità Standard. Ometterlo significa optare per la Modalità Quirks, dove diverse cose cambiano in modo inaspettato:
- Il box model si rompe. In Modalità Quirks,
widtheheightincludono padding e bordi (il vecchio box model di IE), quindi un elemento dimensionato a200pxpotrebbe renderizzarsi più largo o più stretto del previsto. line-height,vertical-aligne la spaziatura degli elementi inline si comportano diversamente, producendo spesso spazi extra attorno alle immagini e alle celle delle tabelle.- Le unità CSS e le percentuali possono essere ereditate e calcolate in modo incoerente.
Questi bug sono difficili da diagnosticare perché il CSS sembra corretto — è la modalità ad essere sbagliata. Aggiungere il doctype è la soluzione, ed è per questo che ogni documento moderno dovrebbe iniziare con esso.
document.compatMode nella console: "CSS1Compat" indica la Modalità Standard, "BackCompat" indica la Modalità Quirks.Nota sui Doctype Legacy
Prima di HTML5, il doctype faceva riferimento a una Document Type Definition (DTD) — una grammatica formale che descriveva quali elementi e attributi erano consentiti. Queste dichiarazioni erano lunghe e facili da sbagliare, ad esempio HTML 4.01 Strict:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">HTML 4.01 era disponibile nelle varianti Strict, Transitional e Frameset, e XHTML 1.0 / 1.1 ne aggiungeva diverse altre (come "-//W3C//DTD XHTML 1.0 Strict//EN"). Potresti ancora incontrare questi doctype in codebase più datate.
Il punto fondamentale: HTML5 li ha sostituiti tutti con il breve e unico <!DOCTYPE html>. È il doctype valido più breve che attiva in modo affidabile la Modalità Standard, ed è l'unico che devi scrivere oggi.