HTML 5.1

Tutto ciò che vedi all’interno di un sito web è creato da numeri, parole, funzioni, parentesi angolari, tag e formule. Non è un carnevale… È un linguaggio di markup, o meglio, quello che alle origini era noto ai più come ipertesto.

HTML crea tutto ciò che vedi all’interno di un sito web: testi, immagini, video, link, bottoni e tanto altro!
Nel tempo è stato aggiornato e cambiato in diverse nuove versioni, per facilitare ai web developer ed ottimizzare anche l’usabilità e l’aspetto lato utente. Le immagini, le animazioni e le funzionalità dinamiche sono state messe in primo piano, e la resa da mobile è di fondamentale importanza. L’ultimo linguaggio rilasciato è HTML5, uscito nel 2016 e di recente aggiornato alla versione 5.1.

Sei curioso di scoprire tutte le novità dell’ultimo aggiornamento di questo linguaggio mark up? → continua la lettura!

Nelle pagine di e-commerce o siti istituzionali piuttosto strutturati, potremmo aver bisogno di inserire un sottomenù che si apra al click con il tasto destro.
Prima di HTML5.1 era necessario lavorare con blocchi e sottoelementi lato CSS e Javascript. La nuova versione del linguaggio markup semplifica il tutto dando la possibilità di creare dei sotto-menu che estendono il menu contestuale del browser cliccando con il tasto destro sull’elemento.

I tag preposti sono per creare contenitore principale e che crea le sottovoci. Per impostare questa funzionalità dovremo mettere i due attributi: type=”context” e l’id. L’id è ciò che collega il menù al click su un elemento, al quale va aggiunto l’attributo contextmenu valorizzato con l’id del menù contestuale, a sua volta composto da uno o più (checkbox, radio e command).

Vuoi attivare sul tuo sito la funzionalità della prenotazione online? Con questa nuova versione è possibile attraverso degli input di data e orario.

Attraverso type=”week” possiamo impostare la settimana di un determinato anno, con “month” il mese e con “datetime-local” la data e l’ora col fuso orario della zona del device che ha richiesto la pagina. Impostando una settimana, un mese o una data con l’orario, nei rispettivi input, sarà possibile leggere il valore nel formato in cui viene impostato.

Per rendere una pagina con diversi approfondimenti (ma anche FAQ) più funzionale e leggibile dall’utente, possiamo ora sviluppare i contenuti all’interno di menù a tendina con <details> e <summary> In questo modo, possiamo mostrare in prima battuta solo il titolo e non tutto il testo, che sarà a disposizione del cliente solo se clicca sulla call to action di espansione.

Non riceveremo più form compilati dall’utente con dati mancanti o sbagliati!
Già con la versione HTML5 precedente, erano stati inseriti attributi per evidenziare i campi non validi se incompleti o con errori al momento dell’invio.
Con .reportValidity() possiamo fare questo tipo di operazione ancor prima che l’utente abbia inviato il form se ha compilato almeno un campo perchè ferma l’utente ancora prima che proceda con il tentativo di invio, quando passa il mouse sul tasto “invia” segnalando cosa non è corretto.

Il tema delle immagini responsive è forse quello che ha impegnato di più gli sviluppatori della versione 5.1 di HTML. Era di fondamentale importanza fare in modo che le immagini si potessero ridimensionare per essere adattabili alle varie grandezze dei dispositivi mobile. Prima di questo aggiornamento bisognava rimboccarsi le maniche e impiegare una discreta quantità di codice css!

C’è poi anche la questione del peso. Quando l’immagine è troppo grande il caricamento viene rallentato, se è troppo piccola risulta invece sgranata.Finalmente HTML5.1 risolve la questione e mette tutti d’accordo! Come? Ha aggiunto due attributi al tag .

Scrset dà la possibilità di impostare diverse sorgenti di immagine in base al pixel ratio o al breakpoint. Questo componente va di pari passo con  <picture>, un contenitore in cui sono inseriti diversi file immagine e che carica solo gli elementi sorgente adatti alla dimensione dello schermo e alla risoluzione.

Sizes, ci permette invece di stabilire la dimensione dell’immagine rispetto al viewport.
Ed è così che ridimensionando la finestra o vedendo un’immagine da dispositivi diversi, il contenuto si stringe o si allarga, a seconda del rapporto tra i pixel del viewport e quelli fisici dell’immagine.

Le nuove funzionalità elencate sono già entrate negli usi comuni dei web developers. Puoi rimanere aggiornato su tutte le novità rilasciate dalla pagina ufficiale di WSC, sulla quale è già stata fornita un’anteprima della nuova versione HTML5.2 che risolverà diversi bug di quella attuale.

Tramite la piattaforma GitHub, inoltre, gli sviluppatori hanno la possibilità di dire la propria opinione e aiutare nei processi di miglioramento. E tu, amico geek, Se dovessi ideare la nuova versione HTML5.2, che cosa inseriresti?