HTML5 basi e giuste procedure

html-5
Tempo stimato di lettura: 4 minuti, 58 secondi
Pubblicato il 16 aprile 2012

In quest’articolo parleremo di HTML5 e delle nuove funzioni che esso mette a disposizione degli sviluppatori per la produzione di applicazioni moderne. Cercherò di darvi le basi e i giusti consigli per iniziare a realizzare i vostri progetti in HTML5.

Cos’è l’HTML5?

L’HTML5 è la generazione successiva dell’HTML, che soppianta l’HTML 4.01, l’XHTML 1.0 e l’XHTML 1.1. Esso è progettato per essere multipiattaforma, infatti, le più recenti versioni di Apple Safari, Google Chrome, Mozilla Firefox e Opera supportano molte funzionalità dell’HTML5. I browser web mobile che sono preinstallati su Iphone, Ipad e sui dispositivi Android non sono da meno.

Ecco come si presenta il markup di una pagina in HTML5:

Con un pò di formattazione Css la nostra pagina dovrebbe essere più o meno come questa:

Il Doctype

Il doctype deve apparire nella prima riga del file HTML. Altrimenti il browser esegue un rendering della pagina in “modalità quirk”. Il vecchio Doctype <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> diventa <!DOCTYPE html> Davvero semplicissimo da ricordare e da scrivere soprattutto a mano.

Elementi strutturali e semantici

L’HTML5 introduce nuovi elementi strutturali quindi possiamo abbandonare definitivamente i vecchi “div-itis” come <div id=”header”> e <div id=”footer”> per dar spazio a <header> e <footer>.  Il primo rappresenta l’intestazione della pagina, mentre il secondo rappresenta il piè di pagina. Essi funzionano come i div ma aggiungono un valore sematico alla struttura.

Sono stati introdotti molti altri elementi come, <section> <article> <nav> <aside> <hgroup> <figure> e <figcaption>. Il tag <nav> è utilizzato per i link all’interno della nostra pagina invece di usare <div id=”navigation”>. Il tag <aside> è utilizzato per separare un contenuto dal contenuto principale della pagina.

Il tag <section> è utilizzato per rappresentare una sezione generica di un documento o di un’applicazione. Il tag <article> è utilizzato per contenere un post su un blog, un commento inviato da un utente, ecc. Il tag <hgroup> è utilizzato per raggruppare più intestazioni da <h1> a <h6>. Il tag <figure> è utilizzato come contenitore per un’immagine rappresentativa, correlata al contenuto. L’elemento <figure> può anche contenere una didascalia utilizzando l’elemento <figcaption>.

Elementi inline

Html5 introduce anche nuovi elementi inline come <time> e <mark> e anch’essi contribuiscono ad avere un markup più semantico. <time> è utilizzato per esprimere il tempo in modo semantico. <time datetime=”20:00”>8pm</time> <mark> è utilizzato per evidenziare parti del contenuto, la differenza con <strong> o <em> è che attribuisce all’elemento una maggiore rilevanza.

Media

HTML5 introduce nuovi media da inserire nei nostri progetti. I nuovi tag introdotti sono <audio>, <video> e <embed> insieme al tag <source> dove viene dichiara la fonte/sorgente. Il modo più semplice per utilizzare questi tag è questo: <!– semplice utilizzo audio –> <audio src=”audio-file.ogg” controls> </audio> <!– semplice utilizzo video con sorgenti multiple–> <video controls> <source src=”video-file.mp4″ type=”video/mp4″/> <source src=”video-file.ogv” type=”video/ogg”/> </video> Sfortunatamente non sono supportati da molti browser, perciò dovremmo ricorrere a flash per rendere il video visibile anche ai vecchi browser.

L’elemento Canvas

L’HTML5 definisce l’elemento <canvas> come una tela bitmap che dipende dalla risoluzione e che può essere usata per effettuare il rendering di elementi grafici. All’interno dell’elemento <canvas> si può disegnare tutto ciò che si vuole usando JavaScript.

Giuste procedure

Con tutti questi nuovi elementi qualcuno potrebbe confondersi. Ecco allora alcune giuste procedure ! Ad esempio quando si ha un <h1> all’interno di un <article> non c’è bisogno di avvolgerlo dentro un <hgroup>, mentre se all’interno di un <article> ci sono più voci è giusto che esse siano racchiuse all’interno di un <hgroup>.

All’interno di un <article> potremmo avere bisogno di inserire un <header> o un <footer>. Se abbiamo molte informazioni, quindi molte voci è corretto racchiuderle all’interno di un <header>. Ecco l’esempio:

La scelta di utilizzare <section> o <article> dipende tutto dai contenuti che abbiamo, all’interno di <section> troviamo informazioni correlate, mentre all’interno di  un <article> troviamo un contenuto indipendente. Possiamo avere sia un <article> all’ interno di un <section> che un <section> all’interno di un <article>.

Per quanto riguarda <aside> esso assume un significato diverso se si trova dentro o fuori un <article>.  Quando viene utilizzato dentro un <article> il contenuto deve essere specifico all’articolo nel quale si trova, mentre quando viene utilizzato fuori da un <article> il contenuto deve essere relativo all’intero sito.

Supporto Browsers

La maggior parte dei tag HTML5 viene supportata dai vari browser moderni, soprattutto gli elementi in blocco. Per far si che anche gli altri browser  supportino tutto ciò dobbiamo inserire nel file CSS questo codice.

Per quanto riguarda IE questo non basta, dobbiamo inserire lo script html5shiv

Naturalmente è possibile iniziare ad usare tutti i tag HTML5 semantici e di conseguenza rendere il markup dei vostri progetti al passo con questa evoluzion.

Tu hai già avuto modo di imbatterti in qualche tag “incompreso”? Come ne sei uscito?

Ispirato a:  HTML5 Essentials and Good Practices

  • aledesign.it

    Un buon inizio…ridurre pezzi di codici in sole 5/6 lettere è troppo bello! Speriamo di impararlo presto! Buon inizio a tutti!

    • Secondo me Ale il codice non si riduce anzi… Ho già avuto modo di constatare che sia HTML che CSS diventano più lunghi in quanto aumenta maggiormente la diversificazione tra le parti. Se è un vantaggio per la semantica non lo è per certi versi se si cercare di realizzare fogli stile ordinati e con elementi ripetibili. Ma tant’è… Non è un grosso problema secondo me 🙂

      • Secondo me l’arrivo di HTML5 cerca di evitare (e forse è solo una conseguenza indiretta) l’suo di “trucchetti” HTML per ottenere determinati effetti, ad esempio quando si innestano i div per ottenere gli angoli arrotondati “old school”. Senza contare che viene offerto il nuovo tag canvas, che ospita elementi grafici avanzati di vario genere (animazioni incluse) e su cui stanno basando migliaia di splendidi browser-game 🙂

        In questo modo, oltre alla semantica che i motori teoricamente dovrebbero apprezzare, si forza l’uso di CSS3 e framework più compatti come il diffusissimo jQuery. Di fatto la semplificazione in termini di lunghezza – come suggerito da Davide – è solo apparente, probabile che l’unica vera comodità sia il doctype compatto ed i tag “delimitatori” article, footer e via dicendo, che rendono identificabili i pezzi della pagina al volo.

  • Manuel

    Ottimo articolo, sto iniziando ora ad utilizzare questo nuovo tipo di linguaggio (semplificato di un bel po’.
    Che sia compatibile in IE?

    • Ciao Manuel, per rendere la lettura dei nuovi tag compatibile su ie8 ed inferiori puoi usare html5shiv e dichiarare (se usi un css reset come quello di Meyer lo fa già) display:block a tutti i tag nuovi.

      • Manuel

        l’html5shiv l’ho già conosciuto :), per quel che riguarda i fogli stile ti ringrazio!

Shares