22 febbraio 2020
Differenze tra HTML4 e HTML5
Scritto daDesirée Pucci
Sviluppato per la prima volta da Tim Berners-Lee nel 1990, il termine HTML non è altro che l'abbreviazione di Hypertext Markup Language.
L'HTML viene, sostanzialmente, impiegato per la creazione di siti web (ed e-commerce) e delle pagine che lo compongono.
Il codice HTML garantisce la corretta formattazione di testo e immagini in modo che il browser possa visualizzarli nella loro forma corretta. Senza HTML, un browser non potrebbe visualizzare il testo o caricare immagini o altri elementi.
L'HTML fornisce anche la struttura di base della pagina, sulla quale agiscono i files CSS (Cascading File Sheet) per modificarne l'aspetto.
In termine un po’ semplicistici, si potrebbe affermare che l’HTML rappresenta il sistema scheletrico delle pagine web mentre i fogli di stile potrebbero essere una metafora dell’epidermide e dei tratti caratteristici ed individuali della persona.
Che cos'è l'HTML?
L’Hyper-Text Markup Language (HTML) è la lingua principale del Web in tutto il mondo. Consente agli sviluppatori di progettare il modo in cui gli elementi caratteristici di una pagina Web, come testi, collegamenti ipertestuali e file multimediali, vengono visualizzati dal browser.
Questo linguaggio funziona staticamente, il che significa che non è possibile creare una funzione di pagina Web dinamica o interattiva tramite il linguaggio HTML; questo particolare linguaggio di markup, infatti, è in grado di modificare solo gli elementi statici di una pagina, come intestazioni, posizione dell'immagine, ecc.
Storia ed evoluzione del linguaggio HTML
L'HTML è indubbiamente un linguaggio in continua evoluzione e tanti sono stati i cambiamenti che l’anno contraddistinto fin dai suoi esordi nei primi anni ‘90.
Questo linguaggio di markup è stato infatti presentato per la prima volta da Tim Berners-Lee, il creatore del World Wide Web, nel 1989.
Questa prima versione, nota anche con la sigla HTML 1.0, è stata utilizzata dal 1989 al 1994. Si trattava di una versione molto limitata e includeva solo 20 elementi; di fatto, questo linguaggio ancora in fase acerba non consentiva grandi operazioni e quindi la maggior parte delle pagine web finiva per apparire molto simile a causa dell'incapacità di attuare cambiamenti quali la modifica dell’immagine di sfondo o l’inserimento di tabelle e moduli.
Nel 1995, comparve il cosiddetto HTML 2, una “release” che sancì un netto passo avanti rispetto al predecessore. L’HTML 2.0 diventò il primo set ufficiale di standard per HTML e lo standard di base rispetto al quale sono stati progettati tutti i browser (almeno fino all’avvento della versione 3.2 del suddetto linguaggio di markup.
La seconda versione del linguaggio HTML era in grado di supportare operazioni quali la modifica dello sfondo di una pagina, del colore del testo e del carattere del testo.
E’ curioso scoprire come, proprio in questo periodo, sia stato creato il W3C (The World Wide Web Consortium), un'organizzazione che i occupa di sviluppare standard web.
Dopo la creazione di HTML 2.0, le persone hanno iniziato a scoprire appieno il potenziale di questo linguaggio.
Nel gennaio 1997 l’introduzione dell’HTML 3.2 fu accolta con entusiasmo sia dal W3 Consortium che dal principale browser dell’epoca, ovvero, Netscape.
La versione HTML 4, creata nel 1999, includeva fogli di stile a cascata (CSS) che permettevano di modificare facilmente aspetti come testo, colore, font e sfondi. Invece di essere inclusi direttamente nella pagina Web, questi aspetti (in seguito alla comparsa dell’HTML 4) sono ora separati, rendendo l’utilizzo del linguaggio molto più semplice.
Attualmente, la versione di HTML comunemente utilizzata è la HTML 5; si tratta di una vera e propria rivoluzione, in quanto questa particolare versione può essere utilizzata per scrivere applicazioni web che funzionano anche quando ci si trova offline, per localizzare la nostra posizione, per gestire video ad alta definizione e per molto altro ancora.
HTML 4 VS HTML 5 : differenze sostanziali
Rispetto all'HTML4, l'HTML5 mira ad essere più di una piattaforma di sviluppo di applicazioni, che include non solo la creazione di layout per la disposizione di testo e immagini in una pagina web, ma anche la riproduzione di video e audio, la creazione di grafiche interattive 2D e 3D, e la gestione e l’accesso ai dati e protocolli di rete in tempo reale per lo scambio di dati.
Uno dei punti di forza dell’HTML5 rispetto al predecessore, è quello di avere una sintassi estremamente semplice; se prendiamo ad esempio l’elemento tradizionale “DOCTYPE”, scopriamo che la sintassi corretta in HTML5 è del tipo : <! DOCTYPE html>, laddove per l’HTML4 era necessario inserire una stringa del tipo <! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 // EN" "http://www.w3.org/TR/html4/strict.dtd">.
L’HTML5, inoltre, ha visto e vede costantemente l’aggiunta di nuovi tag relativi ad elementi strutturali e che consentono di definire diversi aspetti del layout che altrimenti sarebbero stati troppo complessi da progettare in HTML4.
Tra i tag di questo tipo più importanti troviamo :
Tag <canvas>
Il tag <canvas> viene utilizzato per disegnare elementi grafici utilizzando JavaScript, fungendo da “contenitore”. Il tag canvas presenta la possibilità di operare graficamente creando tracciati, cerchi, riquadri, caratteri e immagini. Di default non ha bordi né contenuto.
Il markup è simile al seguente:
<canvas id = "canvas1" width = "300" height = "300"> ...</canvas>
L'attributo id viene utilizzato per fare riferimento all'area di disegno nello script e larghezza e altezza vengono utilizzate per definire le dimensioni dell'area di disegno.
E’ possibile usare più volte il tag canvas all’interno di una pagina html.
Tag <video>
HTML5 definisce un nuovo elemento che specifica un modo standard per incorporare un file video in una pagina Web. I formati di file supportati per l'elemento <video> sono:
• mp4
• WebM
• Ogg
Ecco un esempio pratico dell’utilizzo del tag video :
<video width="320" height="240" controls><source src="file.mp4" type="video/mp4"></video>
Gli attributi di larghezza e altezza definiscono la dimensione. Se l'altezza e la larghezza sono impostate, lo spazio richiesto per il video viene riservato al caricamento della pagina. Tuttavia, senza questi attributi, il browser non può conoscere la dimensione del video e non può riservare lo spazio appropriato ad esso. L'effetto sarà che il layout della pagina cambierà mentre il video viene caricato.
Tag <audio>
HTML5 definisce un nuovo elemento che specifica un modo standard per incorporare un file audio in una pagina Web. I formati di file supportati per l'elemento <audio> sono:
• mp3
• Wav
• Ogg
L'esempio seguente dimostra l'utilizzo dell'elemento <audio> in HTML5.
<audio><source src="file.ogg" type="audio/ogg"></audio>
Tag <article>
L'elemento <article> mostra la parte di una pagina Web che contiene materiali del tipo :
• Un articolo di una rivista o di un giornale
• Un post sul blog
• Qualsiasi commento da parte dell'utente
• Qualunque elemento di contenuto
Tag <mark>
L'elemento <mark> consente di evidenziare il testo in una pagina web. Il tag è stato introdotto in HTML5 e non era presente nelle versioni precedenti.
Quali sono i principali miglioramenti di HTML5 rispetto a HTML4?
Elementi multimediali
HTML5 garnatisce un supporto integrato per file multimediali integrati nella pagina Web tramite tag audio e video. In precedenza, in HTML4, il contenuto multimediale era integrato in pagine Web tramite plug-in di terze parti come Silverlight e Flash.
Accesso alla posizione geografica dell'utente
In precedenza in HTML4, era un compito estremamente ingombrante ottenere le posizioni geografiche dei visitatori che navigavano sul sito. Con l’avvento di HTML5 è estremamente facile ottenere la posizione dell'utente. JS GeoLocation di HTML5 può essere sfruttato per identificare la posizione dell'utente che accede al sito Web.
Memoria lato client
In HTML4, al fine di memorizzare dati importanti sul lato client, veniva utilizzata la cache del browser. Tuttavia, quella cache è limitata e non supporta il meccanismo di archiviazione relazionale. In HTML5, questo problema è stato risolto tramite il database Web SQL e la cache a cui è possibile accedere tramite l'interfaccia JavaScript di HTML5.
Comunicazione client-server
In HTML4 la comunicazione tra client e server veniva effettuata tramite streaming, poiché in HTML4 non erano disponibili socket Web. Al contrario, HTML5 contiene socket Web che consentono la comunicazione full duplex tra client e server.
Meccanismo di threading JavaScript
In HTML4, JavaScript e l'interfaccia del browser con cui l'utente interagisce, vengono eseguiti nello stesso thread con una penalizzazione notevole delle prestazioni. HTML5 contiene l'API JS Web Worker che consente l'esecuzione dell'interfaccia JavaScript e del browser in thread separati.
Compatibilità del browser
Come accennato precedentemente, HTML4 è uno standard consolidato per lo sviluppo di applicazioni browser ed è in uso da oltre 10 anni. Per questo motivo, HTML4 è compatibile con quasi tutti i browser web. D'altra parte, HTML5 è ancora in fase di evoluzione e i tag attualmente disponibili subiscono delle continue variazioni. Pertanto, HTML5 è in ritardo rispetto a HTML4 in termini di compatibilità con i browser.
Vantaggi principali forniti da HTML5 per gli sviluppatori
HTML5 permette agli sviluppatori di avere maggiore flessibilità durante la progettazione di siti web professionali, soprattutto per quanto riguarda :
Gestione persistente degli errori
La maggior parte dei browser ha il supporto per analizzare il codice HTML strutturalmente / sintatticamente errato. Tuttavia, fino a pochi anni fa, non esisteva un processo standardizzato per gestirlo.
Ciò significa che gli sviluppatori dovevano eseguire test di documenti HTML non validi in diversi browser per creare processi di gestione degli errori migliorati attraverso il reverse engineering.
La gestione coerente degli errori in HTML5 ha fatto una differenza enorme in questo senso. Gli algoritmi di analisi migliorati utilizzati in HTML5 hanno un vantaggio non quantificabile nel far risparmiare un sacco di tempo.
Semantica migliorata per elementi
Sono stati apportati miglioramenti ai ruoli semantici di vari elementi esistenti in HTML per migliorare il loro inserimento nel codice.
Elementi come <article>, <nav>, <section> hanno sostituito la maggior parte degli elementi div ormai obsoleti. Ciò rende il processo di scansione degli errori molto meno complicato poiché gli elementi sono più semplici.
Supporto avanzato per le funzionalità dell'applicazione Web
Uno degli obiettivi principali di HTML5 è consentire ai browser Web di funzionare come piattaforme applicative. Pertanto, offre agli sviluppatori un maggiore controllo delle prestazioni dei loro siti Web.
In passato, gli sviluppatori dovevano usare soluzioni alternative perché non erano presenti molte tecnologie lato server ed estensioni del browser.
Attualmente, non è necessario impiegare soluzioni alternative basate su JavaScript o Flash (come precedentemente fatto in HTML4) perché in HTML5 sono presenti elementi che forniscono tutte le funzionalità.
Mobile più semplice
Il gruppo demografico proprietario di smartphone ha visto una crescita costante negli ultimi dieci anni e ciò ha creato la necessità di migliorare gli standard HTML.
Gli utenti finali vogliono poter accedere alle risorse Web in qualsiasi momento tramite qualsiasi dispositivo. In altre parole, avere un sito Web responsive è un requisito fondamentale. Fortunatamente, HTML5 ha reso il supporto mobile molto più semplice essendo in grado di supportare pienamente i dispositivi come tablet e smartphone.
Web storage per sostituire i cookie
HTML5 utilizza il Web storage per sostituire i cookie. Nelle versioni HTML precedenti, se gli sviluppatori volevano archiviare qualcosa, dovevano fare uso di cookie che contenevano una piccola quantità di dati (circa 4 KB).
Tuttavia, i cookie presentano diversi svantaggi: possono essere scaduti, limitare l'uso di dati complessi e rallentare il server Web portando ulteriori script sul server.
Il Web Storage, d'altra parte, consente di archiviare permanentemente i dati sul computer del client (a meno che l'utente non li cancelli) garantendo una una maggiore memorizzazione dei dati (5 MB).
L'HTML viene, sostanzialmente, impiegato per la creazione di siti web (ed e-commerce) e delle pagine che lo compongono.
Il codice HTML garantisce la corretta formattazione di testo e immagini in modo che il browser possa visualizzarli nella loro forma corretta. Senza HTML, un browser non potrebbe visualizzare il testo o caricare immagini o altri elementi.
L'HTML fornisce anche la struttura di base della pagina, sulla quale agiscono i files CSS (Cascading File Sheet) per modificarne l'aspetto.
In termine un po’ semplicistici, si potrebbe affermare che l’HTML rappresenta il sistema scheletrico delle pagine web mentre i fogli di stile potrebbero essere una metafora dell’epidermide e dei tratti caratteristici ed individuali della persona.
Che cos'è l'HTML?
L’Hyper-Text Markup Language (HTML) è la lingua principale del Web in tutto il mondo. Consente agli sviluppatori di progettare il modo in cui gli elementi caratteristici di una pagina Web, come testi, collegamenti ipertestuali e file multimediali, vengono visualizzati dal browser.
Questo linguaggio funziona staticamente, il che significa che non è possibile creare una funzione di pagina Web dinamica o interattiva tramite il linguaggio HTML; questo particolare linguaggio di markup, infatti, è in grado di modificare solo gli elementi statici di una pagina, come intestazioni, posizione dell'immagine, ecc.
Storia ed evoluzione del linguaggio HTML
L'HTML è indubbiamente un linguaggio in continua evoluzione e tanti sono stati i cambiamenti che l’anno contraddistinto fin dai suoi esordi nei primi anni ‘90.
Questo linguaggio di markup è stato infatti presentato per la prima volta da Tim Berners-Lee, il creatore del World Wide Web, nel 1989.
Questa prima versione, nota anche con la sigla HTML 1.0, è stata utilizzata dal 1989 al 1994. Si trattava di una versione molto limitata e includeva solo 20 elementi; di fatto, questo linguaggio ancora in fase acerba non consentiva grandi operazioni e quindi la maggior parte delle pagine web finiva per apparire molto simile a causa dell'incapacità di attuare cambiamenti quali la modifica dell’immagine di sfondo o l’inserimento di tabelle e moduli.
Nel 1995, comparve il cosiddetto HTML 2, una “release” che sancì un netto passo avanti rispetto al predecessore. L’HTML 2.0 diventò il primo set ufficiale di standard per HTML e lo standard di base rispetto al quale sono stati progettati tutti i browser (almeno fino all’avvento della versione 3.2 del suddetto linguaggio di markup.
La seconda versione del linguaggio HTML era in grado di supportare operazioni quali la modifica dello sfondo di una pagina, del colore del testo e del carattere del testo.
E’ curioso scoprire come, proprio in questo periodo, sia stato creato il W3C (The World Wide Web Consortium), un'organizzazione che i occupa di sviluppare standard web.
Dopo la creazione di HTML 2.0, le persone hanno iniziato a scoprire appieno il potenziale di questo linguaggio.
Nel gennaio 1997 l’introduzione dell’HTML 3.2 fu accolta con entusiasmo sia dal W3 Consortium che dal principale browser dell’epoca, ovvero, Netscape.
La versione HTML 4, creata nel 1999, includeva fogli di stile a cascata (CSS) che permettevano di modificare facilmente aspetti come testo, colore, font e sfondi. Invece di essere inclusi direttamente nella pagina Web, questi aspetti (in seguito alla comparsa dell’HTML 4) sono ora separati, rendendo l’utilizzo del linguaggio molto più semplice.
Attualmente, la versione di HTML comunemente utilizzata è la HTML 5; si tratta di una vera e propria rivoluzione, in quanto questa particolare versione può essere utilizzata per scrivere applicazioni web che funzionano anche quando ci si trova offline, per localizzare la nostra posizione, per gestire video ad alta definizione e per molto altro ancora.
HTML 4 VS HTML 5 : differenze sostanziali
Rispetto all'HTML4, l'HTML5 mira ad essere più di una piattaforma di sviluppo di applicazioni, che include non solo la creazione di layout per la disposizione di testo e immagini in una pagina web, ma anche la riproduzione di video e audio, la creazione di grafiche interattive 2D e 3D, e la gestione e l’accesso ai dati e protocolli di rete in tempo reale per lo scambio di dati.
Uno dei punti di forza dell’HTML5 rispetto al predecessore, è quello di avere una sintassi estremamente semplice; se prendiamo ad esempio l’elemento tradizionale “DOCTYPE”, scopriamo che la sintassi corretta in HTML5 è del tipo : <! DOCTYPE html>, laddove per l’HTML4 era necessario inserire una stringa del tipo <! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 // EN" "http://www.w3.org/TR/html4/strict.dtd">.
L’HTML5, inoltre, ha visto e vede costantemente l’aggiunta di nuovi tag relativi ad elementi strutturali e che consentono di definire diversi aspetti del layout che altrimenti sarebbero stati troppo complessi da progettare in HTML4.
Tra i tag di questo tipo più importanti troviamo :
Tag <canvas>
Il tag <canvas> viene utilizzato per disegnare elementi grafici utilizzando JavaScript, fungendo da “contenitore”. Il tag canvas presenta la possibilità di operare graficamente creando tracciati, cerchi, riquadri, caratteri e immagini. Di default non ha bordi né contenuto.
Il markup è simile al seguente:
<canvas id = "canvas1" width = "300" height = "300"> ...</canvas>
L'attributo id viene utilizzato per fare riferimento all'area di disegno nello script e larghezza e altezza vengono utilizzate per definire le dimensioni dell'area di disegno.
E’ possibile usare più volte il tag canvas all’interno di una pagina html.
Tag <video>
HTML5 definisce un nuovo elemento che specifica un modo standard per incorporare un file video in una pagina Web. I formati di file supportati per l'elemento <video> sono:
• mp4
• WebM
• Ogg
Ecco un esempio pratico dell’utilizzo del tag video :
<video width="320" height="240" controls><source src="file.mp4" type="video/mp4"></video>
Gli attributi di larghezza e altezza definiscono la dimensione. Se l'altezza e la larghezza sono impostate, lo spazio richiesto per il video viene riservato al caricamento della pagina. Tuttavia, senza questi attributi, il browser non può conoscere la dimensione del video e non può riservare lo spazio appropriato ad esso. L'effetto sarà che il layout della pagina cambierà mentre il video viene caricato.
Tag <audio>
HTML5 definisce un nuovo elemento che specifica un modo standard per incorporare un file audio in una pagina Web. I formati di file supportati per l'elemento <audio> sono:
• mp3
• Wav
• Ogg
L'esempio seguente dimostra l'utilizzo dell'elemento <audio> in HTML5.
<audio><source src="file.ogg" type="audio/ogg"></audio>
Tag <article>
L'elemento <article> mostra la parte di una pagina Web che contiene materiali del tipo :
• Un articolo di una rivista o di un giornale
• Un post sul blog
• Qualsiasi commento da parte dell'utente
• Qualunque elemento di contenuto
Tag <mark>
L'elemento <mark> consente di evidenziare il testo in una pagina web. Il tag è stato introdotto in HTML5 e non era presente nelle versioni precedenti.
Quali sono i principali miglioramenti di HTML5 rispetto a HTML4?
Elementi multimediali
HTML5 garnatisce un supporto integrato per file multimediali integrati nella pagina Web tramite tag audio e video. In precedenza, in HTML4, il contenuto multimediale era integrato in pagine Web tramite plug-in di terze parti come Silverlight e Flash.
Accesso alla posizione geografica dell'utente
In precedenza in HTML4, era un compito estremamente ingombrante ottenere le posizioni geografiche dei visitatori che navigavano sul sito. Con l’avvento di HTML5 è estremamente facile ottenere la posizione dell'utente. JS GeoLocation di HTML5 può essere sfruttato per identificare la posizione dell'utente che accede al sito Web.
Memoria lato client
In HTML4, al fine di memorizzare dati importanti sul lato client, veniva utilizzata la cache del browser. Tuttavia, quella cache è limitata e non supporta il meccanismo di archiviazione relazionale. In HTML5, questo problema è stato risolto tramite il database Web SQL e la cache a cui è possibile accedere tramite l'interfaccia JavaScript di HTML5.
Comunicazione client-server
In HTML4 la comunicazione tra client e server veniva effettuata tramite streaming, poiché in HTML4 non erano disponibili socket Web. Al contrario, HTML5 contiene socket Web che consentono la comunicazione full duplex tra client e server.
Meccanismo di threading JavaScript
In HTML4, JavaScript e l'interfaccia del browser con cui l'utente interagisce, vengono eseguiti nello stesso thread con una penalizzazione notevole delle prestazioni. HTML5 contiene l'API JS Web Worker che consente l'esecuzione dell'interfaccia JavaScript e del browser in thread separati.
Compatibilità del browser
Come accennato precedentemente, HTML4 è uno standard consolidato per lo sviluppo di applicazioni browser ed è in uso da oltre 10 anni. Per questo motivo, HTML4 è compatibile con quasi tutti i browser web. D'altra parte, HTML5 è ancora in fase di evoluzione e i tag attualmente disponibili subiscono delle continue variazioni. Pertanto, HTML5 è in ritardo rispetto a HTML4 in termini di compatibilità con i browser.
Vantaggi principali forniti da HTML5 per gli sviluppatori
HTML5 permette agli sviluppatori di avere maggiore flessibilità durante la progettazione di siti web professionali, soprattutto per quanto riguarda :
Gestione persistente degli errori
La maggior parte dei browser ha il supporto per analizzare il codice HTML strutturalmente / sintatticamente errato. Tuttavia, fino a pochi anni fa, non esisteva un processo standardizzato per gestirlo.
Ciò significa che gli sviluppatori dovevano eseguire test di documenti HTML non validi in diversi browser per creare processi di gestione degli errori migliorati attraverso il reverse engineering.
La gestione coerente degli errori in HTML5 ha fatto una differenza enorme in questo senso. Gli algoritmi di analisi migliorati utilizzati in HTML5 hanno un vantaggio non quantificabile nel far risparmiare un sacco di tempo.
Semantica migliorata per elementi
Sono stati apportati miglioramenti ai ruoli semantici di vari elementi esistenti in HTML per migliorare il loro inserimento nel codice.
Elementi come <article>, <nav>, <section> hanno sostituito la maggior parte degli elementi div ormai obsoleti. Ciò rende il processo di scansione degli errori molto meno complicato poiché gli elementi sono più semplici.
Supporto avanzato per le funzionalità dell'applicazione Web
Uno degli obiettivi principali di HTML5 è consentire ai browser Web di funzionare come piattaforme applicative. Pertanto, offre agli sviluppatori un maggiore controllo delle prestazioni dei loro siti Web.
In passato, gli sviluppatori dovevano usare soluzioni alternative perché non erano presenti molte tecnologie lato server ed estensioni del browser.
Attualmente, non è necessario impiegare soluzioni alternative basate su JavaScript o Flash (come precedentemente fatto in HTML4) perché in HTML5 sono presenti elementi che forniscono tutte le funzionalità.
Mobile più semplice
Il gruppo demografico proprietario di smartphone ha visto una crescita costante negli ultimi dieci anni e ciò ha creato la necessità di migliorare gli standard HTML.
Gli utenti finali vogliono poter accedere alle risorse Web in qualsiasi momento tramite qualsiasi dispositivo. In altre parole, avere un sito Web responsive è un requisito fondamentale. Fortunatamente, HTML5 ha reso il supporto mobile molto più semplice essendo in grado di supportare pienamente i dispositivi come tablet e smartphone.
Web storage per sostituire i cookie
HTML5 utilizza il Web storage per sostituire i cookie. Nelle versioni HTML precedenti, se gli sviluppatori volevano archiviare qualcosa, dovevano fare uso di cookie che contenevano una piccola quantità di dati (circa 4 KB).
Tuttavia, i cookie presentano diversi svantaggi: possono essere scaduti, limitare l'uso di dati complessi e rallentare il server Web portando ulteriori script sul server.
Il Web Storage, d'altra parte, consente di archiviare permanentemente i dati sul computer del client (a meno che l'utente non li cancelli) garantendo una una maggiore memorizzazione dei dati (5 MB).
