Introduzione
Quando si aggiorna una pagina HTML4 o XHTML a HTML5, il primo cambiamento visibile è spesso il DOCTYPE. In HTML5 si usa una dichiarazione molto breve:
<!DOCTYPE html>Questa riga deve essere inserita come prima istruzione del documento, prima di qualsiasi elemento HTML. Il suo compito principale è indicare al browser che la pagina deve essere interpretata secondo gli standard moderni. Tuttavia, una migrazione corretta non consiste soltanto nel sostituire il vecchio DOCTYPE: è necessario controllare anche elementi obsoleti, attributi superati, gestione dei caratteri e struttura semantica.
In questo tutorial vedremo un caso pratico: trasformare una semplice pagina costruita secondo uno stile HTML4 in una versione più adatta a HTML5. L’obiettivo non è riscrivere tutto da zero, ma capire quali interventi sono davvero utili e quali differenze hanno un impatto concreto sul codice.
Codice completo
Il seguente esempio mostra una pagina HTML5 essenziale per un articolo. Il codice utilizza il DOCTYPE moderno, la codifica dei caratteri e alcuni elementi semantici introdotti o valorizzati con HTML5.
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="utf-8">
<title>Guida alla migrazione da HTML4 a HTML5</title>
</head>
<body>
<header>
<h1>Migrare una pagina verso HTML5</h1>
<nav aria-label="Navigazione principale">
<a href="#introduzione">Introduzione</a>
<a href="#procedura">Procedura</a>
</nav>
</header>
<main>
<article>
<section id="introduzione">
<h2>Perché aggiornare il markup</h2>
<p>
HTML5 rende il documento più leggibile e riduce la dipendenza
da elementi presentazionali obsoleti.
</p>
</section>
<section id="procedura">
<h2>Una procedura graduale</h2>
<ol>
<li>Aggiornare il DOCTYPE.</li>
<li>Dichiarare la codifica con <code>meta charset</code>.</li>
<li>Sostituire gli elementi obsoleti.</li>
<li>Verificare la struttura semantica.</li>
</ol>
</section>
</article>
</main>
<footer>
<p>Ultimo aggiornamento: 2026</p>
</footer>
</body>
</html>Spiegazione
Il DOCTYPE moderno
Nei documenti HTML4 il DOCTYPE poteva essere molto lungo. Per esempio, una dichiarazione HTML4 Strict era simile a questa:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"https://www.w3.org/TR/html4/strict.dtd">Con HTML5 non è più necessario specificare una DTD, cioè un riferimento dettagliato alle regole del documento. La dichiarazione <!DOCTYPE html> è sufficiente e deve essere scritta senza distinzione tra maiuscole e minuscole. È importante ricordare che non è un elemento visualizzato nella pagina e non deve essere chiuso con un tag finale.
La codifica dei caratteri
Nei vecchi documenti si incontrava spesso una sintassi più verbosa:
<meta http-equiv="Content-Type"
content="text/html; charset=UTF-8">In HTML5 è preferibile usare:
<meta charset="utf-8">La nuova forma è più breve e comunica immediatamente al browser la codifica utilizzata. Deve essere inserita nella sezione iniziale del documento, prima possibile, per ridurre il rischio che caratteri accentati o simboli speciali vengano interpretati in modo errato.
Elementi presentazionali e semantici
HTML4 veniva spesso usato anche per descrivere l’aspetto grafico. Elementi come <font>, <center> e attributi come align appartengono a uno stile ormai superato. In HTML5 la struttura deve essere separata dalla presentazione: HTML descrive il significato dei contenuti, mentre CSS definisce colori, dimensioni e disposizione.
Inoltre, HTML5 mette a disposizione elementi semantici come <header>, <nav>, <main>, <article>, <section> e <footer>. Un insieme di elementi generici come molti <div> può quindi essere sostituito con una struttura più comprensibile:
<!-- Struttura poco descrittiva -->
<div id="top">...</div>
<div id="content">...</div>
<div id="bottom">...</div>
<!-- Struttura semantica HTML5 -->
<header>...</header>
<main>...</main>
<footer>...</footer>La semantica non serve soltanto ai browser: migliora la manutenzione del progetto, facilita la navigazione tramite tecnologie assistive e rende più chiara l’organizzazione della pagina.
Attributi booleani
HTML5 semplifica anche alcuni attributi booleani. In XHTML o in stili più rigorosi era comune scrivere:
<input type="checkbox" disabled="disabled">La forma moderna è:
<input type="checkbox" disabled>La presenza dell’attributo è sufficiente per attivare il comportamento. Lo stesso principio vale per attributi come required, multiple e autofocus.
Best practice
- Inserisci il DOCTYPE come prima riga: evita spazi, commenti o caratteri prima di
<!DOCTYPE html>. - Non confondere il DOCTYPE con la versione del browser: non forza un browser moderno e non sostituisce test reali su più dispositivi.
- Usa una codifica coerente: dichiara
utf-8nel documento e configura la stessa codifica anche sul server. - Sostituisci gradualmente gli elementi obsoleti: prima migliora struttura e accessibilità, poi intervieni sul CSS.
- Conserva gli attributi utili: classi, identificatori e attributi
data-*possono rimanere se servono allo stile o agli script. - Non usare elementi semantici solo per il loro nome:
<nav>dovrebbe contenere una navigazione reale, mentre<main>deve identificare il contenuto principale. - Verifica la compatibilità del progetto: librerie JavaScript molto vecchie potrebbero aspettarsi markup o attributi non più consigliati.
- Testa dopo ogni modifica: una migrazione graduale rende più semplice individuare eventuali problemi di layout o comportamento.
Riepilogo
Passare da HTML4 a HTML5 non significa soltanto sostituire una lunga dichiarazione con <!DOCTYPE html>. Il cambiamento più utile consiste nell’adottare un markup più semplice, semantico e orientato alla manutenzione.
Una migrazione pratica dovrebbe comprendere almeno questi passaggi: aggiornare il DOCTYPE, dichiarare utf-8, rimuovere gli elementi presentazionali obsoleti, usare gli elementi semantici quando descrivono davvero il contenuto e separare HTML, CSS e JavaScript. In questo modo il documento diventa più leggibile per gli sviluppatori e più accessibile per browser, motori di ricerca e tecnologie assistive.
Approfondisci con risorse ufficiali
- WHATWG HTML Living Standard: la specifica continuamente aggiornata del linguaggio HTML.
- W3C Markup Validation Service: utile per individuare errori strutturali e sintattici nel documento.
- MDN Web Docs: offre guide pratiche su DOCTYPE, elementi HTML, attributi e compatibilità dei browser.
- WCAG del W3C: riferimento fondamentale per progettare contenuti accessibili e utilizzare correttamente la struttura semantica.