Come passare da HTML4 a HTML5

La conversione dei documenti HTML4 a HTML5 potrebbe sembrare complicata e laboriosa, ma in realtà si tratta di un procedimento abbastanza semplice, che nella maggior parte dei casi non dovrebbe essere causa di inconvenienti e problemi di carattere tecnico, a condizione di una esecuzione adeguata. Questo breve articolo illustra soltanto alcune delle differenze fondamentali tra HTML4 e HTML5 e potrebbe servire da spunto per la preparazione completa del passaggio alla nuova sintassi.

I nuovi TAG semantici

È ben noto il fatto, che l'HTML5 offre una vasta gamma di nuovi tag semantici e questo comporta la necessità di adattare il vecchio codice HTML4 alla nuova sintassi, apportando le necessarie modifiche e aggiungendo, ove necessario o conveniente, i nuovi tag alle varie sezioni strutturali del documento.
I tag semantici sono oggi molto comunemente usati dai webmaster nei documenti HTML5. La tabella sottostante illustra i tag semantici oggi più popolari e spiega la loro funzione:

I tag semantici HTML5 più frequentemente usati
tag semantico funzione
<article>
Definisce un contenuto indipendente dal resto del documento
<aside> Definisce una sezione a parte (per esempio laterale)
<details> Definisce ulteriori dettagli che l'utente può visualizzare o nascondere
<figcaption> Definisce una didascalia per un elemento <figure> 
<figure> Specifica contenuto autonomo, come illustrazioni, diagrammi, foto, elenchi di codice, ecc.
<footer> Definisce un piè di pagina per un documento o una sezione
<header> Specifica un'intestazione per un documento o una sezione
<main> Specifica il contenuto principale di un documento
<mark> Definisce il testo evidenziato
<nav> Definisce i collegamenti di navigazione
<section>
Definisce una sezione in un documento
<summary> Definisce una voce visibile per un elemento <detaisl>
<time>
Definisce una data/ora

Ecco alcune corrispondenze esempio tra HTML4 e HTML5, riguardanti l'adozione dei nuovi tag di carattere semantico che definiscono le sezioni di un documento:

HTML4 e HTML5
HTML4 HTML5
<div id="header"> <header>
<div id="footer">
<footer>
<div id="content"> <section>
<div class="article"> <article>

Bisogna tener presente, che i nuovi tag semantici non hanno alcun effetto sull'apparenza del documento (almeno per adesso) e che quindi la loro presenza non elimina la necessità di curare questo aspetto, adottando le necessarie tecniche di webmastering, come ad esempio l'uso adeguato di stili CSS, che con l'HTML5 si semplifica proprio grazie alla presenza di questi nuovi tag.

Per capire l'importanza dei nuovi tag semantici, puo essere utile esaminare la struttura di un tipico documento HTML5. Dal punto di vista semantico, ma quindi anche strutturale, un documento HTML5 si potrebbe presentare nel modo seguente:


Il codice HTML corrispondente allo schema potrebbe essere, ad esempio, il seguente:
<html><body> <header> Intestazione, logo ecc. <nav> <a href="pagina1.html">Pagina 1</a> <a href="pagina2.html">Pagina 2</a> </nav> </header> <article> ...</article> <article> ...</article> <article> ...</article> <footer>...</footer> </body> </html>
Vale la pena tener presente, che con l'adozione dei tag semantici il lavoro con gli stili CSS diventa molto pi semplice e comprensivo. Ecco un esempio di stile CSS riguardante una semplice stilizzazione degli elementi semantici header e footer:
header, footer { padding: 15px; color: #ffffff; background-color: #f0f0f0; }

La dichiarazione del DOCTYPE

Passando da HTML4 a HTML5 bisogna inoltre ricordarsi di adattare la dichiarazione del documento HTML alla nuova versione. Mentre nell'HTML4 era non soltanto possibile, ma addirittura necessario dichiarare il tipo esatto di documento, scegliendo tra i diversi tipi disponibili, come ad esempio Strict, Transitional, FrameSet ecc., adesso nell'HTML5 si adopera una dichiarazione unica:
<!DOCTYPE html>
La dichiarazione del tipo di documento non è invece richiesta nel caso dei documenti XML conformi alla sintassi HTML5.

La dichiarazione dell'encoding

Un altra considerazione importante riguarda la dichiarazione dell'encoding del documento HTML. A differenza della sintassi richiesta nell'HTML4, nell'HTML5 la sintassi adoperata per specificare l'encoding diventa molto semplice. Prendendo come esempio il set di caratteri utf-8 abbiamo la seguente differenza di sintassi:

La sintassi riguardante l'encoding
HTML4 HTML5
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<meta charset="utf-8">

Commenti