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:
<!doctype html>
<html>
<head>
<title></title>
</head>
<body>
<header>
<h1></h1>
<nav>
<ul>
<li><a href="#">link 1</a></li>
<li><a href="#">link 2</a></li>
<li><a href="#">link 3</a></li>
</ul>
</nav>
</header>
<section>
<article>
<hgroup>
<h1>Post titolo</h1>
<h2>Sottotitolo e info</h2>
</hgroup>
<p>Contenuto</p>
</article>
<article>
<!-- Altro contenuto -->
</article>
</section>
<aside>
<!-- Sidebar -->
</aside>
<footer></footer>
</body>
</html>
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>.
<!-- uso sbagliato di hgroup -->
<article>
<hgroup>
<h1>Titolo</h1>
</hgroup>
<!-- contenuto -->
</article>
<!-- uso corretto di hgroup -->
<article>
<hgroup>
<h1>Titolo 1</h1>
<h2>Titolo 2</h2>
<h3>Titolo 3</h3>
</hgroup>
<!-- contenuto -->
</article>
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:
<!-- uso sbagliato di header -->
<article>
<header>
<h1>Titolo</h1>
</header>
<!-- contenuto -->
</article>
<!-- uso corretto di header -->
<article>
<header>
<hgroup>
<h1>Titolo 1</h1>
<h2>Titolo 2</h2>
</hgroup>
<p>Data e informazioni Autore</p>
</header>
<!-- contenuto -->
</article>
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.
<!-- aside fuori da article -->
<div>
<aside>
<!-- utilizzo come sidebar -->
</aside>
</div>
<!-- aside dentro article -->
<article>
<!-- contenuto principale -->
<aside>
<!-- contenuto secondario -->
</aside>
</article>
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.
article, aside, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
Per quanto riguarda IE questo non basta, dobbiamo inserire lo script html5shiv
<!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->
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
