Non è possibile separare in compartimenti stagni HTML5 da CSS3 e dalle API JavaScript, ma cercheremo comunque di strutturare il nostro discorso mettendo in risalto particolare i diversi aspetti della nostra tecnologia “tripartita”. Cominciamo quindi ad analizzare gli elementi strutturali del linguaggio, le sue caretteristiche e le sue differenze (a volte notevoli) rispetto ad XHTML, e vediamo come ci vengano riservate anche alcune sorprese.
Abbiamo visto nel numero precedente qual è stato il percorso nell’evoluzione del web che ci ha portato alla situazione attuale, nonche’ quali possono essere gli eventuali sviluppi in tale ambito. Avevamo inoltre iniziato a illustrare, in maniera sintetica, novità e caratteristiche di HTML5, CSS3 e JS API.
È arrivato il momento di cominciare a guardare in dettaglio determinati aspetti tecnici di questa “terna” tecnologica: chiaramente non è possibile separare in compartimenti stagni HTML5 da CSS3 e dalle API JavaScript. In questa parte, affronteremo il discorso concentrandoci sugli elementi strutturali del linguaggio, mentre nelle puntate successive daremo risalto agli aspetti visuali e grafici (molto innovativi e interessanti), e agli elementi legati al comportamento dell’applicazione e all’interazione utente (visto che si va verso un’esperienza sempre più “rich”).
Una piccola nota operativa per comprendere al meglio gli esempi riportati in questa serie: indipendentemente dal loro browser preferito, consigliamo ai lettori di utilizzarne uno sufficientemente “HTML5-ready” fra tutti quelli disponibili (quindi, in pratica, per ora Google Chrome, Safari o Opera), per poter visualizzare al meglio gli esempi cui faremo riferimento.
I fondamenti del linguaggio
Iniziamo il percorso di esplorazione di HTML5 analizzando i principi che hanno guidato il team di sviluppo per la definizione delle nuove specifiche del linguaggio. Il primo obiettivo del WHATWG [1] si può intuire già confrontando il doctype della nuova versione del linguaggio
con quello delle versioni precedenti (ad esempio quello di XHTML 1.0 Strict)
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Il doctype della versione 5 stupisce per l’assenza di un qualsiasi richiamo alla versione in uso e per la mancata indicazione del DTD (Document Type Definition). Con questa semplificazione della scrittura si è voluto evidenziare il carattere di continuità tra le varie versioni del linguaggio. In effetti, se si esclude l’importanza che l’indicazione del corretto doctype riveste ai fini della validazione del documento, i browser riescono a renderizzare correttamente la maggior parte degli elementi HTML presenti in specifiche differenti da quella indicata nel doctype. I browser devono supportare le funzioni del linguaggio e non i doctype, tranne nel caso del “doctype switching” [2], un hack piuttosto diffuso tra i web designer.
Il processo di semplificazione del linguaggio prosegue anche all’interno del documento, quando si tratta di indicare il set di caratteri con un meta tag (senza dover utilizzare ulteriori attributi tranne il “charset”).
Figura 1 – Confronto tra la sintassi di HTML 4.01 e quella di HTML5 per la scrittura dei metatag.
Si semplifica anche quando si deve utilizzare l’elemento
Mirko Del Grande vive a Firenze. Svolge attività di formatore e di consulente per le tematiche del web design, della progettazione grafica, dell‘ingegnerizzazione delle interfacce, dei linguaggi di programmazione orientati al web, dell‘usabilità e dell‘accessibilità dei siti, temi di cui si occupa dalla metà degli anni Novanta.