HTML5: differenze tra le versioni

Contenuto cancellato Contenuto aggiunto
m Novità: +wl
 
(12 versioni intermedie di 8 utenti non mostrate)
Riga 1:
{{Formato file
{{Linguaggio di programmazione
| nome = HTML 5HTML5
|immagine = HTML5 logo and= wordmark.svg
| immagine =
|autore = Tim Berners Lee
|data didascalia = 1989
| estensione = .html, .htm
|versione = HTML5
| mime = text/html
|utilizzo = Programmazione dei siti WEB
| sviluppatore = [[WHATWG]], [[World Wide Web Consortium|W3C]]
|paradigmi =
| proprietario =
|tipizzazione = Forte
| data_pubblicazione = 22 gennaio 2008
|sistema_operativo = Windows, macOS, Android, iOS, Linux.
| ultima_versione = 5.2 (2ª revisione)
|licenza = Open Source
| data_ultima_versione = 14 dicembre 2017
| genere = [[Linguaggio di markup]]
| estensione_di = [[Standard Generalized Markup Language|SGML]]
| esteso_a =
| standard = [https://www.w3.org/standards/history/html52/ 5.2] (14 dicembre 2017)<br/>[https://html.spec.whatwg.org/ living standard]
| aperto = sì
| magic_number =
| uniform_type_identifier = public.html
}}
 
L'''HTML5''' è la quinta versione del linguaggio di formattazione [[HTML]] (acronimoraccomandata didal HyperText[[World MarkupWide Language)Web èConsortium]],<ref>{{Cita ilweb|url=https://www.zdnet.com/article/browser-vendors-win-war-with-w3c-over-html-and-dom-standards/|titolo=Browser linguaggiovendors utilizzatowin perwar lawith creazioneW3C deiover sitiHTML Web.and Dall'ottobreDOM [[2014]]standards|sito=ZDNET|lingua=en|accesso=2023-11-08}}</ref> èdistribuita stataa rilasciatapartire ladall'ottobre versione2014 5,e concepita per definire standard funzionali (es. Video/Audioriproduzione playeraudio/video) e [[Application programming interface|API]]. È in continua fase di evoluzione.
 
== Storia ==
Lo sviluppo venne avviato dal gruppo di lavoro [[WHATWG]], fondato nel [[2004]] da sviluppatori appartenenti ad [[Apple]], [[Mozilla Foundation]] ede [[Opera Software]]. L'obiettivo era la progettazione delle specifiche per lo sviluppo di applicazioni web, con particolare attenzione per i miglioramenti da apportare sia ad [[HTML]] che alle tecnologie correlate.
 
Inizialmente in contrasto con il [[World Wide Web Consortium]] per le lungaggini nel processo di evoluzione dello standard html e per la decisione del [[W3C]] di orientare la standardizzazione verso l'[[XHTML#XHTML 2.0|XHTML 2]] che non garantiva retro compatibilità, lo stesso W3C ha poi riconosciuto valide tali motivazioni, annunciando di creare un apposito gruppo per la standardizzazione dell'HTML5 e abbandonare l'XHTML 2.0<ref>{{cita web | url = https://www.w3.org/News/2009#entry-6601 | titolo = XHTML 2 Working Group Expected to Stop Work End of 2009, W3C to Increase Resources on HTML5 | editore = World Wide Web Consortium | lingua = en | accesso = 15 febbraio 2011}}</ref>.
Line 32 ⟶ 40:
HTML5 ha deprecato i seguenti tag e attributi presenti in HTML4 poiché la loro funzione è ora gestita dai CSS3<ref>{{Cita web|url=https://www.c-sharpcorner.com/blogs/html-tags-which-are-deprecated-in-html5|titolo=HTML Tags Which Are Deprecated In HTML5|lingua=en|accesso=3 febbraio 2021}}</ref>:
[[File:Deprecated-HTML.png|alt=Elementi HTML4 deprecati in HTML5|centro|miniatura|390x390px|Elementi HTML4 deprecati in HTML5]]
 
=== CSS3 ===
{{Vedi anche|CSS}}
 
HTML5 e [[CSS|CSS3]] (l'evoluzione di CSS2) costituiscono un linguaggio [[turing completo]]<ref>{{Cita web|url=https://github.com/elitheeli/stupid-machines|titolo=Stupid Machines - rule 110|autore=|data=|accesso=}}</ref><ref>{{Cita web|url=http://eli.fox-epste.in/rule110-full.html|titolo=Rule 110 OnLine Demonstration|autore=|data=|accesso=}}</ref>, condizione sufficiente per un linguaggio per essere considerato un [[linguaggio di programmazione]].
 
=== SEO ===
{{S sezione|informatica}}
{{Vedi anche|Ottimizzazione per i motori di ricerca}}
 
Line 50 ⟶ 54:
{{Vedi anche|WebGL|Canvas (elemento HTML)|Scalable Vector Graphics|HTML5 video}}
 
Le novità introdotte dall'HTML5 rispetto all'[[HTML 4.0|HTML4]] sono finalizzate soprattutto a migliorare il disaccoppiamento fra struttura, definita dal markup, caratteristiche di resa ([[tipo di carattere]], [[Colori Web|colori]], ecceteraecc.), definite dalle [[foglio di stile|direttive di stile]], e contenuti di una pagina web, definiti dal testo vero e proprio. Inoltre l'HTML5 prevede il supporto per la memorizzazione locale di grandi quantità di dati scaricati dal [[web browser]], per consentire l'utilizzo di applicazioni basate su web (come per esempio le caselle di posta di [[Google]] o altri servizi analoghi) anche in assenza di collegamento a Internet.
 
In particolare<ref name="html.it">{{Cita web|url=https://www.html.it/guide/guida-html5/|titolo=HTML5: guida completa|sito=HTML.it|accesso=29 gennaio 2021}}</ref>:
Line 57 ⟶ 61:
* vengono migliorati ed estesi gli elementi di controllo per i moduli elettronici, cioè nuovi attributi e tipi di input per i form (moduli di iscrizione e contatto);
* vengono introdotti elementi specifici per il controllo di contenuti multimediali (tag <code>[[HTML5 video|<video>]]</code> e <code><audio></code>), con HTML4 incorporabili solo attraverso [[Adobe Flash]].
* vengono estesi a tutti i tag una serie di attributi, specialmente quelli finalizzati all'accessibilità ([[Wai-aria|WAI-ARIA]]), finora previsti solo per alcuni tag;
* viene supportato [[Canvas (elemento HTML)|Canvas]] che permette di utilizzare [[JavaScript]] per creare animazioni (possibili solo con [[Adobe Flash]] ai tempi di HTML4) e grafica bitmap;
[[File:Html5notesapp.png|alt=Un esempio di HTML5 Storage. L'utente può creare note e, anche in caso di refresh del browser, esse rimarranno salvate.|miniatura|Un esempio di HTML5 Storage. L'utente può creare note e, anche in caso di refresh del browser, esse rimarranno salvate<ref>{{Cita web|url=https://code.tutsplus.com/tutorials/create-a-sticky-note-effect-in-5-easy-steps-with-css3-and-html5--net-13934|titolo=Create a Sticky Note Effect in 5 Easy Steps With CSS3 and HTML5|sito=Code Envato Tuts+|accesso=2021-10-08}}</ref>.]]
 
* introduzione della [[geolocalizzazione]], dovuta ad una forte espansione di sistemi operativi mobili (quali [[Android]] e [[iOS]], tra i più diffusi);
 
* sistema alternativo ai normali [[cookie]], chiamato Web Storage, più efficiente, il quale consente un notevole risparmio di banda;
* standardizzazione di programmi JavaScript, chiamati [[Web worker|Web Workers]] e possibilità di utilizzare alcuni siti offline;
* sostituzione del lungo e complesso [[doctype]], con un semplice <code><!DOCTYPE html></code>.
 
* Nuovi [[Microdato|microdati]] che descrivono il contenuto dei tag (ad esempio se è un nome, un cognome, un indirizzo, un numero di telefono, una mail eccetera);
* [[WebSocket]] API: la possibilità di stabilire e mantenere una connessione dati tra browser e server remoto sulla quale far transitare messaggi in entrambe le direzioni;
* [[Drag and drop|Drag and Drop]] (trascinamento e rilascio di oggetti all'interno di un contenitore, ad esempio nel caso di videogiochi o prodotti da inserire nel carrello nei siti [[Commercio elettronico|ecommerce]]);
* [[Scalable Vector Graphics|SVG]] e [[MathML]]: possibilità di inserire in HTML [[grafica vettoriale]] e formule matematiche, le quali in HTML4 potevano essere importate solo come immagini o creabili in [[Adobe Flash]].
{| class="wikitable"
|'''TAG'''<ref name="html.it" />
Line 225 ⟶ 227:
 
== WAI ARIA ==
{{Vedi anche|Accessibilità (web)|Accessibilità (design)|WaiWAI-ariaARIA}}

'''WAI-ARIA (''Web Accessibility Initiative - Accessible Rich Internet Applications'')''' è un insieme di documenti pubblicati dal W3C ([[World Wide Web Consortium]]) che specificano come aumentare l'[[Accessibilità (design)|accessibilità]] dei contenuti dinamici e dei componenti per l'interfaccia utente sviluppati con [[AJAX]], [[HTML]], [[JavaScript]] e altre tecnologie collegate. HTML5 ha aggiunto nuove regole [[Wai-aria|WAI ARIA]]<ref>{{Cita web|url=https://www.w3.org/TR/wai-aria-1.1/|titolo=Accessible Rich Internet Applications (WAI-ARIA) 1.1|lingua=en|accesso=2021-02-22}}</ref>.
 
== Orientamento del dispositivo ==
[[File:Deviceorientation.png|alt=Esempio di deviceorientation e devicemotion|miniatura|Esempio di ''deviceorientation'' e ''devicemotion'']]
L'evento<code>deviceorientation</code>viene generato quando sono disponibili nuovi dati da un sensore di orientamento sull'orientamento corrente del dispositivo rispetto al riquadro delle [[Coordinate geografiche|coordinate]] terrestri. Questi dati vengono raccolti da un [[magnetometro]] all'interno del dispositivo. In pratica, quando si ruota il dispositivo su cui la pagina web viene visualizzata, l'oggetto che contiene questa API ruota in base all'asse x, y o z del dispositivo<ref>{{Cita web|url=https://developer.mozilla.org/en-US/docs/Web/API/Window/deviceorientation_event|titolo=Window: deviceorientation event - Web APIs {{!}} MDN|sito=developer.mozilla.org|lingua=en-US|accesso=2021-10-08}}</ref><ref>{{Cita web|url=https://www.w3.org/TR/orientation-event/Overview.html|titolo=DeviceOrientation Event Specification|accesso=2021-10-08}}</ref>.
 
Codice base:<syntaxhighlight lang="javascript">
Line 240 ⟶ 244:
 
=== Movimento ===
Gli eventi di movimento vengono gestiti allo stesso modo degli eventi di orientamento, tranne per il fatto che hanno il proprio nome di evento: <code>devicemotion</code><ref>{{Cita web|url=https://www.html.it/articoli/html5-device-orientation-api-e-websocket/|titolo=HTML5 Device Orientation API e WebSocket|autore=Sandro Paganotti|sito=HTML.it|lingua=it-IT|accesso=2021-10-08}}</ref><ref>{{Cita web|url=https://www.sitepoint.com/using-device-orientation-html5/|titolo=Using Device Orientation in HTML5 - SitePoint|lingua=en|accesso=2021-10-08}}</ref>.
 
Esempio:<syntaxhighlight lang="javascript">
Line 254 ⟶ 258:
 
==== Valori di movimento ====
Gli oggetti<code>DeviceMotionEvent</code>forniscono informazioni sulla velocità dei cambiamenti della posizione e dell'orientamento del dispositivo. Le modifiche vengono fornite lungo tre assi<ref>{{Cita web|url=https://www.html.it/articoli/video-html5-deviceorientation-websocket-api/|titolo=Video: HTML5, DeviceOrientation & WebSocket API|autore=Sandro Paganotti|sito=HTML.it|lingua=it-IT|accesso=2021-10-08}}</ref>.
 
Per <code>acceleration</code>e <code>accelerationIncludingGravity</code> tali assi corrispondono a:
Line 272 ⟶ 276:
== HTML5test ==
[[File:Tizen 2 score.png|alt=Pagina di HTML5test vista in un browser Chrome|miniatura|Pagina di HTML5test vista nel browser [[Google Chrome|Chrome]]|237x237px]]
HTML5test è un'applicazione web per valutare l'accuratezza di un [[Browser|browser web]] nell'implementazione degli standard web HTML5 e Web SQL Database (sviluppato dal [[World Wide Web Consortium]]), così come lo standard [[WebGL]] (sviluppato da [[Mozilla Foundation]] e [[Khronos Group]])<ref>{{Cita web|url=http://html5test.com/about.html|titolo=HTML5test Frequently Asked Questions|cognome=Leenheer|nome=Niels|sito=HTML5test.com|editore=Niels Leenheer|accesso=10 luglio 2014}}</ref>.
 
La suite di test è stata sviluppata dal programmatore web olandese Niels Leenheer e pubblicata nel marzo 2010. Per testare un browser web, l'utente deve visitare la [[home page]] del sito web che si trova all'indirizzo <code>html5test.com<ref>{{Cita web|url=http://www.ghacks.net/2010/06/06/html5-test-your-web-browser/|titolo=HTML5 Test Your Web Browser|cognome=Brinkmann|nome=Martin|sito=gHacks Technology News|accesso=10 luglio 2014}}</ref></code>. L'applicazione restituisce un punteggio intero su un massimo di 555 punti. Il totale dei punti è cambiato più volte attraverso l'evoluzione del software; Leenheer ha introdotto successivamente un sistema di punteggio come parte di un'importante riprogettazione del test introdotta nel novembre 2013<ref>{{Cita web|url=http://blog.html5test.com/2013/11/the-new-html5test-is-here/|titolo=The new HTML5test is here!|cognome=Leenheer|nome=Niels|sito=blog.html5test.com|data=13 novembre 2013|accesso=12 luglio 2014|dataarchivio=26 giugno 2014|urlarchivio=https://web.archive.org/web/20140626033522/http://blog.html5test.com/2013/11/the-new-html5test-is-here/|urlmorto=sì}}</ref>.
 
HTML5test valuta il supporto del browser per l'archiviazione Web, l'API di geolocalizzazione W3C, gli elementi HTML specifici per HTML5 (incluso l'elemento [[Canvas (elemento HTML)|Canvas]]) e altre funzionalità<ref>{{Cita web|url=http://cybernetnews.com/html5-test/|titolo=Test Your Browser for HTML5 Compatibility|autore=Staff writer|wkautore=Staff writer|data=|sito=CyberNet News|accesso=10 luglio 2014}}</ref><ref>{{Cita web|url=http://downloadsquad.switched.com/2010/08/08/test-your-browsers-html5-prowess-with-the-html5-test/|titolo=Test your browser's HTML5 prowess with the HTML5 test|cognome=Zukerman|nome=Erez|data=8 agosto 2010|sito=Switched|editore=[[AOL]]|accesso=10 luglio 2014|dataarchivio=26 aprile 2019|urlarchivio=https://web.archive.org/web/20190426061727/http://downloadsquad.switched.com/2010/08/08/test-your-browsers-html5-prowess-with-the-html5-test/|urlmorto=sì}}</ref>. Non valuta la conformità di un browser ad altri standard web, come [[CSS|Cascading Style Sheets]], [[ECMAScript]], [[Scalable Vector Graphics]] o [[Document Object Model]]. I test di conformità per questi standard sono di competenza di [[Acid3]], un test automatizzato pubblicato da Ian Hickson nel 2008<ref>{{Cita web|url=http://www.webstandards.org/press/releases/2008-03-03/|titolo=Acid3: Putting Browser Makers on Notice, Again.|data=3 marzo 2008|editore=[[Web Standards Project]]|accesso=10 luglio 2014}}</ref>. Allo stesso modo, [[Acid3]] non valuta la conformità HTML5 di un browser. L'ambito del test di HTML5test e l'ambito del test di Acid3 si escludono a vicenda.
Line 303 ⟶ 307:
 
== Altri progetti ==
{{interprogetto|preposizione=sull'}}
 
== Collegamenti esterni ==
* {{Collegamenti esterni}}
* {{cita web|https://www.whatwg.org/|Sito del WHATWG|lingua=en}}
* {{cita web|https://www.w3.org/html/wg/|Sito del W3C HTML Working Group|lingua=en}}
Line 321 ⟶ 326:
{{Portale|internet|informatica}}
 
[[Categoria:Standard W3C]]
[[Categoria:HTML5| ]]