Cos’è HTML5?
HTML5 è un linguaggio di markup (e non un linguaggio di programmazione, come spesso erroneamente si pensa); esso è utile per la strutturazione delle pagine web, in base alle cosiddette raccomandazioni espresse dal W3C a partire dal 2014. Ogni sito moderno dovrebbe essere fatto in HTML5, che è anche lo standard maggiormente compatibile con crawler dei motori di ricerca e browser moderni.
Novità di HTML5
HTML dentro una pagina web viene introdotto da uno specifico DOCTYPE, che è la prima dichiarazione del markup in qualsiasi pagina web che ne faccia uso. àˆ molto semplice da definire ed identificare, e non possiede attributi come il suo predecessero HTML4.
Ecco il doctype di HTML5:
<!DOCTYPE html>
I nuovi tag che sono stati introdotti in HTML5 sono i seguenti:
<header>
serve ad delimitare la sezione in alto, comune a tutte le pagine, della pagina web. Può contenere a sua volta widget, menu ed altri tipi di elementi.
<footer>
serve ad delimitare la sezione in basso, comune a tutte le pagine, della pagina web. Può contenere a sua volta widget, menu ed altri tipi di elementi.
<article>
serve ad indicare un articolo (ad esempio di un blog) della pagina web.
<section>
serve ad indicare una sezione generica della pagina web.
Form. All’interno dei form è supportato sia il GET che il POST come metodo di invio, e sono disponibili gli attributi:
- number: indica un campo numerico
- date: indica un campo data
- time: indica un campo relativo al tempo
- calendar: indica una data (giorno, mese, anno) sul calendario
- range: indica un intervallo (ad esempio di prezzo)
<svg>
Indica un’immagine in formato SVG (vettoriale).
<canvas>
Indica una canvas, cioè una “lavagna” in cui è possibile disegnare (utile, ad esempio, per i videogame per browser fatti in JS).
<audio>
Indica un contenuto audio, come ad esempio un file MP3 in streaming / download con annesso player.
<video>
Indica un contenuto video, come ad esempio un file AVI in streaming con annesso player.
La codifica della pagina viene indicata semplicemente con il meta tag charset, che in questo caso ad esempio è impostato su UTF-8 (la codifica universale utile per risolvere, nella maggioranza dei casi, il problema dei caratteri accentati non visibili correttamente).
<meta charset=”UTF-8″>
Esempio di HTML5 (template base o boilerplate)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> Titolo della pagina </title> </head> <body> Â Corpo del documento </body> </html>
La codifica standard per le pagine in HTML5 è la UTF-8, consigliata ma non obbligatoria.
Vantaggi di HTML5
Graficamente non c’è troppa differenza ed è difficile accorgersi dei vantaggi di questo formato; possiamo comunque considerare una lista di compatibilità maggiori ed una maggiore flessibilità del markup per le webapp moderne.
Consistenza
HTML5 ha introdotto un approccio più ragionato alla gestione degli errori nel markup, in particolare per i documenti HTML5 malformed (scritti male, ad esempio con tag aperti e mai chiusi).
Pensato per le web app
HTML5 è in gergo un vero e proprio application platform, poichè può essere utilizzato anche per realizzare applicazioni mobile moderne e compatibili con vari tipologie di dispositivi. L’uso dei tag canvas, video e audio lo conferma, cosଠcome quello del Local Storage, l’uso di form più facili da scrivere ed applicazioni più veloci e rispondenti alle necessità di developer e utenti.
Semantica
Molti tag sono stati sostituiti: <b> non è più consigliato per il grassetto (al suo posto meglio <strong>), <i> idem (meglio <em>), e l’uso dei tag em e strong serve a conferire un “significato” alle parole inserite dentro quei tag, cioè una certa rilevanza. Si è molto fantasticato in ambito SEO su questo argomento, negli anni: pare che usare un tag strong sia un’enfatizzazione forte per la SEO della pagina, ma questo ovviamente da solo non basta (altrimenti sarebbe fin troppo facile per chiunque, posizionarsi bene su Google).
La semantica serve soprattutto a rendere più intuitiva e manutenibile nel tempo, lato sviluppatori web, la pagina nel suo insieme.
Funzioni avanzate di HTML5
HTML5 è molto comodo perchè, tra l’altro, supporta nativamente varie API:
- Geolocalizzazione: permette di geolocalizzare il visitatore in modo approssimato
- Drag and Drop: permette di supportare direttamente il drag’n drop (ad es. per inviare file via trascinamento nel browser)
- Local Storage: utile per le funzionalità legate ai cookie
- Application Cache: una cache nativa interna al markup
- Web Workers: servono per potenziare la velocità di caricamento di JS, ed includono il supporto al caricamento asincrono degli script
- Server Sent Events: supporto ad eventi automatici, come ad esempio quelli nella versione web di Twitter, le notifiche push e via dicendo.
Tag non più supportati in HTML5
Ci sono vari tag HTML4 che su HTML5 hanno smesso di funzionare: vediamo quali sono.
| Vecchio tag | Tag da usare in alternativa |
|---|---|
| <acronym> | <abbr> |
| <applet> | <object> |
| <basefont> | Usare CSS |
| <big> | Usare CSS |
| <center> | Usare CSS |
| <dir> | <ul> |
| <font> | Usare CSS |
| <frame> | Non disponibile |
| <frameset> | Non disponibile |
| <noframes> | Non disponibile |
| <strike> | Usare CSS oppure <s>, <del> |
| <tt> | Usare CSS |
Storia di HTML5
HTML5 è stato pensato con l’idea di abbattere i limiti, le complicazioni e le lungaggini della versione precedente (HTML4), tra cui molti tag considerati ormai sconsigliati e non più compatibili con gli standard moderni.HTML5 ha incontrato varie resistenze, e tuttora ne incontra per la verità , prima di essere adottato come standard web universale. Questa versione del markup deriva e corregge i difetti della versione HTML 4.01, e non supporta più Silverlight e Adobe Flash.
Può essere utilizzato ed è compatibile con browser quali Google Chrome, Apple Safari, Mozilla Firefox, Opera, Edge, e funziona indifferentemente su Android, iPhone, iPad, PC, Mac. L’idea base dietro un uso corretto di HTML5 è quella di separare la struttura presentativa della pagina (il layout, cioè la forma) dal suo comportamento lato codice (che è invece definito da un mix di linguaggio server side e client side, come JS e PHP) e dalla sua forma grafica (definita a parte dal CSS e dalle immagini).
👇 Da non perdere 👇
- 📈 Analizza Cellulari 📱
- 🔐 AI che dolor, Chat
- 🎯 Targetizza Database SQL 🗄
- 📊 Analizza Errori più comuni 📛
- 🚧 Costruisci Evergreen 📟
- 👩💻 Programma Gratis 🎉
- 💻 Configura Hosting a confronto 💑
- 🔒 Conosci Hosting reti e domini 💻
- 👩💻 Tapioca Informatica 🖥
- 💻 Iconizza Internet 💻
- 🔒 Gestisci Lavoro 🔧
- 💡 Mostra Marketing & SEO 🌪
- 🔑 Apprendi Meteo ⛅
- 🤯 Visiona Mondo Apple 🍎
- 🔍 Supervisiona Mondo Domini 🌐
- 🚀 Metti in cloud monitoraggio servizi online 📈
- 🔮 Anatomizza Nuove tecnologie 🖥
- 🔒 Antani PEC e firma digitale 📩
- 👀 Prematura Programmare 🖥
- 🎮 Lonfa Scrivere 🖋
- 🔒 Conosci Servizi di SMS 📶
- 👀 Guarda Sicurezza informatica e privacy digitale 🖥
- 🎮 Ricorda Siti web 🌎
- 🤖 Ottimizza Spiegoni 🎓
- 🧠 Neuralizza Svago 🎈
- 📡 Quantizza Usare Excel 🌀
- 🤖 Sovrascrivi Windows 😲
- 🎨 Personalizza Wireless 🚁
- 🔑 Decifra WordPress 🤵
- 💬 Il nostro canale Telegram: iscriviti
- 🟠 Come riavviare l’iPhone
- 🟠 Come riavviare l’iPhone
- 🔵 Come scoprire i nomi di accesso (username) di qualsiasi sito WP
