HTML vs HTML5. Che differenza c’è? Se volete entrare nel mondo dello sviluppo frontend o lavorare con il codice in WordPress, dovete conoscere la differenza. Può essere un po’ complicato distinguere le due cose, perché qualcuno potrebbe usare i due termini in modo intercambiabile, ma sono tecnicamente due cose diverse – anche se sono tra loro collegate.
Scopriamo le differenze tra HTML e HTML5 e cosa è cambiato con il più grande aggiornamento del popolare linguaggio di markup.
Cos’è HTML?
HTML sta per HyperText Markup Language. Costituisce gli elementi del web ed è probabilmente il linguaggio di codifica più utilizzato e conosciuto.
L’HTML è il linguaggio standard usato per lo sviluppo del web. Permette di creare la struttura di base di una pagina web usando etichette chiamate tag di markup. Ad esempio, per mettere in corsivo un blocco di testo, lo si può racchiudere in tag HTML come questo:
<i>Testo in corsivo.</i>
Gran parte del codice HTML è semplice e leggibile dall’uomo, così è semplice anche per chi non sviluppa di mestiere. Per quanto sia importante per il World Wide Web, imparare l’HTML è incredibilmente facile.
È impossibile fare un sito web senza usare l’HTML. Anche se ci sono costruttori di siti web che vi permettono di progettare un sito senza toccare in alcun modo il codice, WordPress incluso, questi software gestiscono il codice HTML per voi dietro le quinte.
Quindi, se volete diventare uno sviluppatore web o approfondire la vostra conoscenza di strumenti come WordPress, avrete naturalmente bisogno di imparare l’HTML.
L’HTML è spesso abbinato ad altri linguaggi, come CSS e JavaScript, che ne estendono la funzionalità. I CSS vi aiutano a dare uno stile al codice HTML aggiungendo colori, layout e altro, mentre JavaScript è un linguaggio di programmazione più tradizionale che vi permette di aggiungere funzioni avanzate.
Anche se questi due linguaggi si integrano bene con l’HTML, non sono strettamente necessari per creare un sito web. L’HTML è certamente necessario, ed è per questo che è il linguaggio web più importante.
Cos’è HTML5?
HTML5 non è un sistema separato, ma piuttosto l’ultima versione della tecnologia HTML. Il suo predecessore, HTML4, ha avuto il suo primo e ultimo aggiornamento nel dicembre del 1999. HTML5 in realtà non proprio nuovo, essendo stato rilasciato diversi anni fa, nel 2014.
Allora qual è la differenza? Perché tutto questo clamore? Anche se molti dei tag di markup rimangono invariati (non bisogna aggiustare ciò che non è rotto, dopo tutto), molti sono stati semplificati, quindi è molto più facile e veloce scrivere codice. È basato su uno standard completamente nuovo e anche il parsing è completamente diverso.
A differenza delle vecchie versioni di HTML, che permettevano di creare principalmente siti statici che avevano bisogno di essere conditi con CSS e JavaScript, HTML5 è molto più dinamico e include elementi multimediali. Supporta nativamente il video e l’audio e permette anche di creare giochi o animazioni.
In altre parole, HTML5 è pienamente in grado di fare cose che prima dovevate fare usando vecchi strumenti come JavaScript, Flash o Silverlight. Questo significa che il vostro sito è più sicuro e meno aperto agli exploit degli aggressori che cercano di entrare.
E, anche se CSS e JavaScript sono certamente ancora necessari per creare un sito web completo, non sono più indispensabili per creare qualcosa di dinamico.
HTML5 non è più solo un costruttore di siti web. È un costruttore di applicazioni.
Non dovremo attendere il prossimo aggiornamento ad “HTML6”, perché HTML5 è continuamente aggiornato come un living standard che evolve secondo le esigenze del web. È la più recente e più importante versione di questa tecnologia di lunga durata, e sarà qui per molto tempo.
HTML vs HTML5: Pesiamo le differenze
Quando la maggior parte delle persone parla di “HTML”, si riferisce alla tecnologia nel suo complesso, compresa la sua ultima versione: HTML5. Anche se è molto diverso sotto molti aspetti, HTML5 è in realtà solo un aggiornamento raffinato del vecchio standard.
Mentre HTML e HTML5 fanno parte dello stesso sistema, il grande aggiornamento ha portato diversi miglioramenti al vecchio linguaggio di codifica, rendendolo ancora più efficiente. Qui ci sono solo alcuni esempi di ciò che è stato aggiunto.
Compatibilità
Quando è stato rilasciato HTML5, la compatibilità era una grande preoccupazione e una delle ragioni principali per cui molti hanno scelto di non aggiornare ancora il loro sito. Se il browser non sapeva come analizzare un tag HTML5, si potevano generare pagine rotte o dall’aspetto strano.
È vero il contrario: i siti web scritti nei vecchi standard HTML4 spesso si romperanno nei browser moderni, perché i browser hanno abbandonato da tempo il supporto delle funzioni obsolete. Se volete che le vostre pagine rimangano compatibili con i browser utilizzati dalla maggior parte delle persone, HTML5 è la strada da percorrere.
Anche se le vecchie versioni di HTML funzionano bene su browser come Internet Explorer, queste versioni obsolete non sono più supportate o utilizzate dalla maggioranza degli utenti. Per molti non ci sarà bisogno di codificare un sito web per browser così vecchi, quindi non c’è bisogno di utilizzare HTML4.
Come potete vedere qui, HTML5 e la maggior parte delle sue funzioni sono supportate su tutti i browser moderni. I nuovi tag sono completamente o parzialmente supportati in tutti i browser tranne che in Internet Explorer versione 6-8 e Firefox 2, che sono tutti dell’inizio degli anni 2000 e oggi sono utilizzati raramente.
Mentre tutti i browser moderni supportano tecnicamente l’HTML4, il supporto dei tag obsoleti nel migliore dei casi è discontinuo. Dovreste evitare di utilizzare standard obsoleti e passare ad HTML5.
Supporto Multimedia
Una delle cose migliori che HTML5 porta sul tavolo è il supporto di elementi multimediali come audio, video, grafica vettoriale, animazioni e giochi.
Ai vecchi tempi del Web, mettere anche solo una semplice animazione sul vostro sito avrebbe richiesto l’uso di JavaScript, Flash o qualche altra tecnologia. Ora potete farlo in HTML o CSS senza dovervi aprire a potenziali exploit.
Con video e audio, per incorporare un player basta inserire un semplice tag. È possibile configurare gli elementi, come attivare l’autoplay o aggiungere i controlli del lettore.
HTML5 supporta anche l’incorporazione di grafica vettoriale SVG – immagini che possono ridimensionarsi a qualsiasi risoluzione senza pixel. Gli SVG stanno diventando sempre più popolari per la visualizzazione di grafica online poiché si allargano bene e si adattano a qualsiasi dimensione dello schermo.
Infine, con HTML5 è possibile creare dei veri e propri videogiochi, specialmente se lo si combina con JavaScript. Molti strumenti di creazione di giochi fanno anche il porting su HTML5 e vi permettono di incorporare il risultato sul vostro sito web.
Questo supporto multimediale rende HTML5 il candidato ideale per sostituire molte tecnologie obsolete, tra cui Java Web Start, Silverlight e, più recentemente, Flash. Quasi tutto quello che si può fare con questi sistemi può essere fatto in modo più semplice ed efficiente in HTML5.
SGML
Il linguaggio HTML originale (fino alla versione 4) era basato sullo standard SGML o Standard Generalized Markup Language.
SGML ha lo scopo di standardizzare il markup, eliminare la confusione e ha ispirato sia HTML che XML, ma discende da un linguaggio creato negli anni ’60. È antiquato e quindi non è stato progettato per le moderne applicazioni web.
HTML5 non è più conforme a SGML; invece effettua il parsing secondo le sue specifiche regole. Sebbene le origini sono ancora in SGML, e HTML5 è solo un’estensione della tecnologia esistente, non è più conforme a quegli standard.
Un risultato è che ora la gestione degli errori è molto più indulgente. Un piccolo errore non si tradurrà più in un problema evidente per chi visualizza la pagina, o in una pagina che non si carica affatto.
Anche la semantica, o i tag, sono migliorati drasticamente. Prima, strutturare una pagina richiedeva un uso costante dei tag <div>, <div id=“header”>, <div id=“menu”>, e <div class=“post”>.
In HTML5, questi elementi sono sostituiti con i tag <header>, <nav>, e <article>, che sono sia più puliti che più reattivi.
Sono stati introdotti anche diversi nuovi tag. Molti sono stati creati per sostituire div e frame precedentemente utilizzati per strutturare le pagine.
Molti dei vecchi tag di markup sono rimasti completamente invariati, quindi HTML5 è parzialmente retrocompatibile con le vecchie versioni. Ma un documento HTML4 non modificato non verrà più analizzato correttamente secondo i nuovi standard.
Quindi, anche se ci sono alcune differenze tra HTML e HTML5, le modifiche sono generalmente in meglio e sono destinate a rendere il linguaggio di markup più accessibile.
Migliori Prestazioni e Supporto Mobile
Uno dei maggiori vantaggi di HTML5 è che è molto più veloce e reattivo rispetto alla versione precedente. Nell’era del primo HTML, i dispositivi diversi dai computer che accedevano a Internet non erano ancora nemmeno un sogno; ora è tutto accessibile dai nostri telefoni, orologi e televisori, grazie in parte alla velocità di HTML5.
La nuova versione ha portato migliori standard che permettono di mantenere i siti web più fluidi sui dispositivi più piccoli e meno potenti. Molti problemi di prestazioni dipenderanno ancora da voi e dalla qualità del vostro codice. Ma con l’aggiornamento di HTML5 sono state risolte un sacco di questioni in sospeso sul lato HTML.
Ad esempio, HTML5 supporta il multi-threading con JavaScript Web Workers, permettendo al processore del vostro dispositivo di utilizzare una maggiore potenza di elaborazione per eseguire gli script. Il codice che prima impantanava una pagina ora verrà eseguito senza problemi.
Con HTML5 è anche molto più facile creare siti web reattivi. HTML4 aveva molti elementi non reattivi, come i div, sostituiti da tag di struttura che funzionano meglio su mobile.
Anche i frame sono stati rimossi in quanto causavano problemi di usabilità e accessibilità. Anche se sono ancora supportati, sono stati deprecati e non dovrebbero essere utilizzati a meno che non si abbia motivo di lavorare con una tecnologia obsoleta.
Non c’è una sostituzione diretta in HTML5 per i frame, ma si raccomanda di utilizzare elementi CSS come flex box o iframe (che sono supportati in HTML5) per sostituire i precedenti tag.
Migliore Controllo dei Moduli
I nuovi controlli dei moduli equivalgono a un nuovo livello di controllo sul sito. Anche se questa può sembrare una piccola funzionalità, implica invece il non dover fare affidamento su una tecnologia esterna per creare un modulo funzionante.
In origin, HTML supportava solo i tipi di campi di testo, password, nascosto, checkbox/radio e caricamento file. Anche se questi sono sufficienti per creare un modulo di input di base, ora è possibile fare molto di più con i tipi di input disponibili in HTML5.
I nuovi input includono e-mail, numero di telefono, URL, casella di ricerca, slider, numerico, data e ora e colore.
Questa gamma diversificata di tipi di input permette di creare moduli migliori che possono accettare una maggiore varietà di tipi di contenuto, con la convalida inclusa per garantire che i dati inseriti siano corretti. Per maggiori informazioni, date un’occhiata all’elenco completo degli input HTML.
Web Storage
Per quel che riguarda il web storage, HTML4 e precedenti supportano essenzialmente i cookie e poco altro. Memorizzare qualsiasi informazione, oltre al tracciamento di base dell’utente in un minuscolo cookie di 4 kilobyte, era praticamente impossibile.
Al contrario, il web storage consente di memorizzare 5-10 megabyte di dati a seconda del browser. Questo permette di salvare informazioni lato client sulle sessioni precedenti, dati di accesso offline, personalizzazioni e altro ancora. Inoltre, la memoria locale non viene cancellata automaticamente, a differenza dei cookie.
Un esempio di ciò che si può fare con il web storage è la memorizzazione della preferenza di un utente per il tema chiaro o scuro del vostro sito, con la certezza che l’utente alla visita successiva continui a vedere il sito come lo preferisce. Anche se è possibile salvare le preferenze dell’utente con i cookie, il browser inevitabilmente li cancellerà dopo un po’ di tempo.
HTML5 supporta l’archiviazione locale attraverso la Web Storage API. Inoltre, supporta l’archiviazione su database Web SQL, l’archiviazione su database indicizzati e anche l’accesso ai file con la File API. Molte di queste funzionalità si integrano con JavaScript attraverso le API. Prima era estremamente complicato da fare o, in alcuni casi, semplicemente non era possibile o era estremamente complesso.
Cosa è Meglio: HTML o HTML5?
Se volete imparare a codificare, dovreste assolutamente evitare di utilizzare standard obsoleti. HTML5 è la versione più recente di HTML e dovrebbe sempre essere preferito rispetto alle versioni più vecchie del linguaggio.
Come detto sopra, HTML5 migliora diversi aspetti di HTML4 che erano obsoleti e con cui era difficile lavorare. Inoltre, HTML5 può fare molte cose in modo nativo, mentre HTML4 si basa interamente su sistemi da tempo deprecati come Silverlight, Java Web Start e Flash.
Anche se HTML5 non sempre viene visualizzato correttamente su browser e sistemi operativi obsoleti (come Internet Explorer o vecchie versioni di telefoni cellulari), questi sono raramente utilizzati. Non ci sono più buone ragioni per utilizzare versioni obsolete di HTML rispetto agli standard moderni.
Sfortunatamente, ci sono molte informazioni su Internet e nei libri sulle vecchie versioni di HTML. Ogni volta che cercate una guida o imparate da un corso o da un libro, assicuratevi che parli di HTML5 e che sia stato rilasciato o aggiornato dopo il 2014. È inutile imparare standard obsoleti risalenti al 1999.
Come Convertire il Codice HTML in HTML5
Se avete un vecchio sito web, dovete aggiornarlo. Purtroppo non c’è modo di fare una conversione totale senza fare del lavoro manuale.
La cosa migliore da fare è leggere le specifiche di HTML5 (o fare un corso di HTML se siete completamente nuovi al linguaggio) e familiarizzare con le novità. Dopo di che, potrete riscrivere il codice e aggiungere le nuove funzionalità di HTML5.
Potreste anche dare un’occhiata a questa guida per migrare da HTML4 a HTML5. Descrive ampiamente le modifiche manuali da fare al codice.
Potreste anche provare questo convertitore da XHTML a HTML5, ma assicuratevi di rivedere il codice manualmente o di inserirlo in un validatore prima di importarlo in un sito live.
Per fortuna, HTML5 è per lo più nuovo. Ci sono alcuni tag deprecati che dovrete sostituire ma, a parte questo, l’aggiornamento del codice di solito non richied grandi sforzi, a meno che il vostro sito si basi pesantemente su una tecnologia deprecata come i frame.
Riepilogo
HTML e HTML5 sono solo due parti della stessa tecnologia, anche se significano cose leggermente diverse. HTML si riferisce al linguaggio di markup nel suo complesso, spesso alla versione più recente, mentre HTML5 è l’ultimo aggiornamento.
Se volete imparare l’HTML, è importante seguire l’ultima edizione: HTML5. È migliore da tutti i punti di vista e, anche se doveste convertire manualmente il vecchio codice, ne vale sicuramente la pena.
HTML5 ha ormai diversi anni e come living standard del linguaggio nel suo complesso, continuerà ad essere aggiornato per funzionare al meglio con il web moderno.
Lascia un commento