Tutti i vantaggi dell’HTML5 – parte 2

Ecco quali sono le principali novità introdotte con l'HTML5 rispetto al suo predecessore HTML4 in termini di elementi e nuovi attributi disponibili

Tutti i vantaggi dell’HTML5

Nella prima parte dell’articolo dedicato all’HTML5 abbiamo posto in evidenza le principali differenze che sono state introdotte con il nuovo linguaggio di programmazione rispetto al suo predecessore HTML4. In questa seconda parte entreremo ancor più nel dettaglio, presentando le differenze tra HTML4 e HTML5 in termini di nuovi elementi e attributi introdotti.

I nuovi elementi introdotti con l’HTML5

Di seguito vi proponiamo un elenco con tutti i nuovi elementi che sono stati inseriti con il nuovo linguaggio di programmazione.

  • section: rappresenta una sezione del documento o una applicazione generica. Può essere utilizzato insieme e h1, h2, h3, e così via per indicare la struttura del documento;
  • article: rappresenta un pezzo di cotenuto indipendente dal documento (esempio articolo di giornale o blog);
  • aside: un pezzo di contenuto che è solo in parte correlato al resto della pagina;
  • hgroup: rappresenta l’intestazione di una sezione;
  • header: rappresenta un gruppo di introduzione o navigazione;
  • footer: rappresenta il piè pagina di una sezione e può contenere informazioni su autore, sito, copyright e così via;
  • nav: rappresenta una sezione del documento destinata alla navigazione;
  • video e audio: utilizzati per i contenuti multimediali. Entrambi forniscono API per permettere agli sviluppatori di creare una propria interfaccia utente;
  • track: offre text tracks per l’elemento video;
  • embed: viene utilizzato per plugin content;
  • mark: rappresenta una sequenza di testo evidenziata e contrassegnata;
  • progress: rappresenta lo stato di completamento di un compito, come ad esempio il dowload;
  • meter: rappresenta una misura;
  • time: rappresenta una data/ora;
  • ruby, rt e rp: consentono di inserire annotazioni ruby;
  • bdi: rappresenta una porzione di testo che deve essere isolata dal suo ambiente;
  • wbr: rappresenta una interruzione di riga;
  • canvas: viene utilizzato per il rendering grafico;
  • command: rappresenta un comando che l’utente può richiamare;
  • details: ulteriori informazioni e controlli che l’utente può ottenere su richiesta;
  • datalist: utilizzato per le combobox;
  • keygen: controllo sulla genereazioni della coppia di chiavi;
  • output: rappresenta un certo tipo di uscita.
  • Input e type: introducono nuovi value come: tel, search, url, email, datatime, date, month, week, time, datatime-local, number- range e color.

I nuovi attributi introdotti nell’HTML5

Agli elementi già presenti in HTML4 sono statti introdotti molti attributi. Di seguito una lista esaustiva.

  • Gli elementi a e area hanno ora un nuovo attributo media per coerenza con l’elemento link;
  • l’elemento area, per coerenza con gli elementi a e link, propone i nuovi attributi hreflang, type e rel.
  • l’elemento base introduce il nuovo attributo target;
  • l’elemento meta introduce il nuovo attributo charset;
  • il nuovo attributo autofocus può essere specificato negli attributi input (tranne quando il type dell’attributo è settato su hidden), select, textarea e button;
  • un nuovo attributo placeholder può essere specificato negli elementi input e textarea.;
  • il nuovo attributo form per input, output, select, textarea, button, label, object e fieldset può essere inserito ovunque nella pagina;
  • il nuovo attributo required può essere applicato agli elementi input (solo se type è associato a hidden, image o qualche tipologia di pulsante), select e textarea. Indica che l’utente deve compilare un valore al fine di inviare il modulo;
  • l’elemento fieldset consente ora l’attributo disable che disabilita tutti i controlli discendenti;
  • l’elemento input introduce una serie di nuovi attributi come autocomplete, min, max, multiple, pattern e step. Introduce anche il nuovo attributo list che può essere utilizzato insieme all’elemento datalist. Quando si utilizza type=image è anche possibile specificare ora gli attributi width e height;
  • gli elementi input e textarea hanno un nuovo atrtibuto chiamato dirname;
  • l’elemento textarea introduce i due nuovi attributi maxLenght e wrap;
  • l’elemento form introduce il nuovo attributo novalidate che può essere utilizzato per disattivare la validazione dei form;
  • gli elementi input e button introducono i nuovi attributi formaction, formentype, formmethod, formvalidate e formtarget;
  • l’elemento menu presenta due nuovi attributi type e label. Questi consentono all’elemento di trasformarsi in menu;
  • l’elemento style presenta il nuovo attributo scoped utilizzato per attivare i fogli di stile che si applicano solo alla struttura locale;
  • l’elemento script presenta il nuovo attributo chiamato async che influenza il caricamento e l’esecuzione dello script;
  • l’elemento html introduce il nuovo attributo manifest utilizzato in concomitanza con API per le applicazioni web offline;
  • l’elemento link presenta il nuovo attributo size. Può essere utilizzato in concomitanza con la relazione icon (impostata tramite l’attributo rel) per indicare la dimensioni dell’icona di riferimento;
  • l’elemento ol presenta il nuovo attributo reserved. Quando presente indica che l’ordine dell’elenco è decrescente;
  • l’elemento iframe introduce tre nuovi attributi: sandbox, seamless e srcdoc;
  • l’elemento object introduce il nuovo attributo typemustmatchche permette l’incorporamento sicuro di risorse esterne;
  • img presenta il nuovo attributo crossorigin che permette di leggere i dati dell’immagine con API canvas;

Le prestazioni dell’HTML5 e le caratteristiche

I punti diforza dell’HTML5 si possono individuare in tre aree principali, ossia l’arricchimento semantico, Rich Internet Applications e Rich Media.

Semantica migliorata.  HTML5 fornisce agli sviluppatori nuovi modi per organizzare i contenuti grazie ai tag header, footer, article e section. Questo significa che i motori di ricerca possono ottenere informazioni più precise per l’indicizzazione rendendo molto più semplice le operazioni di Search Engine Optimization (SEO).

Rich Internet Applications. Le RIA possono essere descritte come delle applicazioni web la cui funzione è quella di colmare il divario tra il browser e il desktop. Esse infatti possono comunicare con il sistema locale dell’utente per fornire un’esperienza che si estende oltre il browser. Tecnologie come Adobe Flash e Microsodt Silverlight hanno offerto queste funzionalità per anni, ma ad esempio nel caso di Flash i plugin non potevano essere visualizzati su alcuni dispositivi come gli Apple. L’HTML5 integra queste nuove funzionalità grazie alla sua capacità di memorizzare e recuperare i file dal computer dell’utente.

Rich media. L’HTML5 fornisce supporto nativo per gli elementi audio e video. Ad esempio per visualizzare i video di Youtube o ascoltare canzoni in streaming sulla radio preferita non c’è più bisogno di scaricare plugin appositi.

Chiunque stia ancora utilizzando il vecchio HTML ha compreso oramai l’importanza di adottare il linguaggio di programmazione di nuova generazione. L’HTML5 non è difficile da comprendere o utilizzare ed anche se ancora non è pienamente adottato ci sono delle ottime ragioni per iniziare ad utilizzarlo.

Facci sapere cosa ne pensi!

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *