Lo standard HTML5 è stato finalizzato e rilasciato nel 2014, ed è quello che avrebbe dovuto essere l'HTML quando la prima versione è stata lanciata tanti anni fa. HTML 2.0 è stato il primo vero "standard", pubblicato nel lontano 1995. Due anni dopo, HTML 3 è stato pubblicato. Altri due anni dopo, è stato introdotto HTML 4.01 ed è da allora il cavallo di lavoro di Internet.
La prima "bozza di lavoro" di HTML5 è stata introdotta nel lontano 2008, con un supporto sorprendentemente ampio per i browser di allora. L'HTML5 che conosciamo oggi è molto diverso dall'HTML del passato, e qui discuteremo di cosa è cambiato l'ultimo standard con la sua versione. Da quando è stato lanciato HTML5, è stato ampiamente accettato e tutte le sue caratteristiche e capacità sono ora supportate da tutti i principali browser. Ci sono ancora alcuni singhiozzi qua e là, ma nel complesso HTML5 si è ben integrato con la moderna esperienza online.
Come sviluppatore web, potresti essere un vecchio professionista che ha padroneggiato gli standard più vecchi o un neofita curiosamente guardando lo sviluppo di nuovi standard a margine. Ad ogni modo, alla fine devi iniziare a passare a HTML5.
HTML Vs HTML5 Infographic
Il primo passo per passare a HTML5 o apprendere è capire la differenza tra lo standard precedente e quello più recente. Ecco alcune differenze chiave tra HTML e HTML5:
-
HTML5 è un linguaggio vivente
HTML5 è una lingua viva, un lavoro in corso. È sorprendente vedere cosa può fare HTML5, ma è anche importante sapere che HTML5 non è una versione completamente standardizzata come HTML4, che ha più di dieci anni e uno standard fisso, immutabile.
Se stai entrando in HTML5, dovrai fare alcuni aggiornamenti. Attributi ed elementi vengono aggiunti e modificati regolarmente ogni anno. Questo dipende anche da quanto utilizzi elementi ricchi, ma è sicuramente uno dei rischi associati all'utilizzo di un linguaggio fluido e mutevole come HTML5.
-
HTML5 è più semplice
Sebbene HTML5 presenti rischi come aggiornamenti costanti, in genere è facile tenere il passo con le modifiche e gli aggiornamenti a causa della sintassi più semplice rispetto a HTML4. Ad esempio, hai una dichiarazione molto semplice all'inizio della pagina per impostarla come pagina HTML5:
La semplice dichiarazione Doctype è una delle semplificazioni apportate nella sintassi HTML, che è compatibile con tutte le versioni da HTML4 e fino a XHTML1. Tuttavia, HTML5 non è compatibile con SGML.
Corsi consigliati
- Formazione gratuita sulla programmazione Python
- Corso di certificazione di test del software libero
- Corsi di programmazione Java gratuiti
- Corso PERL completo
-
Il nuovo elemento
HTML5 viene fornito con una serie di nuovi elementi ed elimina molti altri (di cui parleremo tra poco), ma uno dei suoi elementi chiave aggiunti è, che ha avuto un impatto enorme sull'uso di Adobe Flash nei siti Web. Sebbene Flash sia ancora utilizzato da diversi siti Web, HTML5 è stato adottato da molti e molte persone pensano che alla fine renderà Flash obsoleto. Solo il tempo lo deciderà; fino ad allora, l'elemento a cascata di HTML5 si è dimostrato una buona alternativa a Flash.
L'elemento può essere utilizzato per disegnare grafici con varie forme e colori tramite script, in genere JavaScript. L'elemento è semplicemente un contenitore per la grafica; è necessario utilizzare uno script per definire la grafica. Per impostazione predefinita, una tela è un'area rettangolare senza contenuto o bordi. Il mercato è così:
È importante specificare un attributo id, nonché larghezza e altezza per definire le dimensioni della tela. È possibile aggiungere un attributo di stile per definire i bordi.
Puoi usare anche JavaScript, come nel seguente esempio:
var c = document.getElementById (“myCanvas”);
var ctx = c.getContext (“2d”);
ctx.fillStyle = “# FF0000”;
ctx.fillRect (0, 0, 150, 75);
-
Il nuovo e gli elementi
Un'altra grande aggiunta di HTML5 sono il nuovo e gli elementi, che indicano una nuova anatomia web. Con questi nuovi tag, non è più necessario identificare i due elementi con un tag.
Le specifiche definiscono l'elemento header come rappresentante di un gruppo di aiuti "di navigazione" o "introduttivi". Pertanto, l'elemento può essere utilizzato per definire un'introduzione a una sezione di una pagina o all'intera pagina stessa. Ecco uno snippet di codice che utilizza l'elemento header.
Titolo
Per autore Archiviato in Web 2.0
Corpo del testo
Le specifiche HTML5 si riferiscono all'elemento foot come rappresentante "un piè di pagina per il contenuto di sezionamento o l'elemento radice di sezionamento più vicino" e in genere contenente informazioni relative alla sezione, come il nome dell'autore, i dati sul copyright, i collegamenti ai documenti e così via.
Logicamente, il piè di pagina viene posizionato nella parte inferiore della pagina Web. Ma può anche essere posizionato alla fine di una sezione di pagina. Ecco alcuni esempi di codifica che utilizza l'elemento footer:
Titolo del contenuto
Per autore Archiviato in Web 2.0
Corpo del testo.
Tag: Prompt dei comandi, Bussola, CSS, Sass, Terminale
10 mi piace
Qui, il piè di pagina contiene tag post e il post "Mi piace di Facebook".
-
Gli elementi e
Ora, se avessi esaminato gli esempi precedenti, avresti notato alcuni nuovi elementi, come il. Questo elemento, insieme all'elemento, ti consente di contrassegnare sezioni specifiche del layout e sono estremamente utili per l'ottimizzazione dei motori di ricerca. L'elemento articolo viene specificato come rappresentante di un componente autonomo di una pagina Web per essere riutilizzabile o distribuibile in modo indipendente. Questo potrebbe essere un giornale, un post sul forum, un articolo di una rivista, un post di blog o qualsiasi altra cosa.
L'elemento articolo ha generalmente una propria intestazione in un elemento header, e forse anche un piè di pagina, come hai visto nell'esempio sopra. Puoi semplicemente pensare all'elemento come un post di blog o un contenuto indipendente; la parte difficile è identificare ciò che è indipendente. In poche parole, un contenuto indipendente è uno che ha senso da solo.
Un buon modo per sapere se un contenuto è indipendente è chiedere se ha senso all'interno di un feed RSS. Gli articoli di blog e le pagine statiche hanno senso e alcuni siti hanno feed di commenti. Ma un paragrafo nell'articolo non avrebbe alcun senso separato dal resto del contenuto. Ecco uno snippet di codice con piè di pagina e tag di pubblicazione.
Titolo del contenuto
Pubblicato: 24/02/2016
Corpo del testo
Licenza Creative Commons Attribution-ShareAlike
L'elemento sezione, in base alle specifiche del W3C, che rappresenta una "sezione generica" di un'applicazione o documento. Potrebbe essere confuso con il tag, quindi chiariamo subito la confusione. Il tag di sezione viene utilizzato quando il contenuto al suo interno deve essere raggruppato separatamente dal resto della pagina con un singolo tema e quando dovrebbe essere visto come una voce nel contorno della pagina. L'elemento div, tuttavia, è specificato come "contenitore generico", il che significa che non è separato dalla pagina principale stessa, a parte il suo stesso titolo, lingua e attributi di classe.
-
Nuovo ed elementi
I nuovi elementi e gli elementi HTML5 fanno parte delle specifiche di Interactive Elements ma sono tra gli elementi meno chiacchierati dagli sviluppatori. Dato che il Web è diventato più semplicemente pagine e documenti collegati, questi elementi sono una gradita aggiunta per una maggiore interattività web.
L'elemento non deve essere confuso con l'elemento, che è definito come un tag di navigazione HTML che rappresenta il blocco di navigazione della pagina. In genere contiene collegamenti che consentono agli utenti di saltare attraverso le sezioni all'interno della pagina o verso un'altra pagina. D'altra parte, il tag menu rappresenta i comandi di menu per semplicità nelle applicazioni desktop e mobili. Ecco un esempio dell'elemento in azione:
Ciao mondo
Nel frattempo, l'elemento è un altro modo per organizzare immagini e testo. Viene utilizzato insieme all'elemento per contrassegnare illustrazioni, diagrammi e foto. Di seguito è riportato uno snippet di codice breve che presenta entrambi gli elementi in azione.
-
Nuovo ed elementi
Queste sono due importanti aggiunte allo standard HTML5. Il tag audio, come il tag video, consente agli sviluppatori di incorporare musica e audio sul proprio sito Web. A differenza dello standard precedente, non sei limitato all'aggiunta di musica midi, anche se ci sono ancora alcune limitazioni sul tipo di file utilizzati. La maggior parte dei browser relativi a Webkit supporta normali file MP3, ma altri supportano solo il formato OGG. La buona notizia è che ci sono tonnellate di convertitori di file e puoi semplicemente fornire due versioni del file audio; la versione giusta verrà prelevata automaticamente.
Puoi usare il tag audio come qualsiasi altro elemento. Ecco un esempio di frammento:
Il tag audio ha anche una serie di attributi per controlli aggiuntivi, inclusi gli attributi di evento, e gli eventi includono eventi finestra, eventi modulo, eventi multimediali ed eventi del mouse. L'elemento video ha anche una serie di attributi di contenuto, inclusi SRC, attributi globali, loop, controllo, precarico e poster. Gli attributi SRC, loop, autoplay e controlli sono abbastanza autoesplicativi e sono gli stessi per tutti gli elementi multimediali, mentre gli attributi globali sono comuni per tutti gli elementi. Includono dir, nascosto, menu di scelta rapida e altro.
Esistono alcuni altri attributi ed elementi multimediali forniti con HTML5, come l'elemento traccia che fornisce tracce di testo per l'elemento video.
-
Nuove forme
HTML5 ora viene fornito con forma ed elementi. Se non prevedi di utilizzare molte tabelle nella pagina, puoi anche rimuovere l'attributo e dare un'occhiata alle modifiche apportate prima di procedere.
-
Niente più ed elementi
Ciò significa che tutti gli attributi che consentono agli sviluppatori di creare una tabella colorata, perfettamente disposta, come bordo, bgcolor, allineamento, altezza, regole e altro ancora. Tutti questi attributi sono sostituiti da CSS.
-
No More, e
Questo è ottimo per quegli sviluppatori che hanno lavorato ai primi tempi dell'HTML. Gli attributi frameset, frame e noframes sono stati completamente rimossi, insieme ad altri come blink, basefont e altri. Dovrai gestire senza utilizzare le tabelle per il layout. Le tabelle fanno ancora parte di HTML5, ma non sono più destinate ai pixel. Le specifiche indicano che le tabelle non devono essere utilizzate per gli aiuti al layout e per controllare il layout della pagina.
Conclusione
Come puoi vedere chiaramente, ci sono molte modifiche a HTML5 e devi usarlo con cura e cautela. È inoltre necessario aggiornare le tue conoscenze sulla lingua man mano che cambia nel tempo e ottiene più aggiornamenti. Devi interrompere l'uso di elementi che HTML5 ha rimosso da se stesso e utilizzare i nuovi elementi HTML5 che rimarranno sicuramente, come i tag di intestazione o piè di pagina.
Quello che hai visto sopra è solo la versione semplificata di quante modifiche ha apportato HTML5 con il suo lancio. Ma siamo onesti qui; non c'è nulla di semplice o lento nel modo in cui viene adottato HTML5 e il nuovo standard aggiunge molte funzionalità che sono cruciali per un'esperienza utente moderna. Devi stare al passo con la nuova lingua e anche imparare alcuni CSS, che ha un ruolo più importante di prima.
La cosa positiva di questi cambiamenti è che, sebbene siano grandi, sono in meglio e questo è compreso da tutti gli stakeholder coinvolti qui. I browser saranno più potenti man mano che si spostano verso il cloud, con la possibilità di gestirne di più da soli. Con cose come Ajax e con incorporamento di video e audio e così via, sarà molto più facile codificare in modo semplice e consentire al browser di assumere il compito più pesante. Ad esempio, nuovi elementi di struttura come figura, piè di pagina, riepilogo e sezione sono tutti riferiti alla struttura del documento e il rendering viene lasciato al browser.
Articoli Correlati:-
Ecco alcuni articoli che ti aiuteranno a ottenere maggiori dettagli sull'HTML rispetto all'HTML5, quindi passa attraverso il link.
- HTML e XML
- Principali differenze tra HTML5 e Flash (con infografica)
- HTML vs XHTML
- HTML5 vs Flash
- Differenze incredibili tra HTML5 e JavaScript
- 10 suggerimenti utili sulla programmazione Python (trucchi)