Quando per la prima volta sentii parlare di HTML5 e di semantica applicata al linguaggio di markup mi si illuminarono gli occhi. Finalmente è stato riportato un pò di ordine all’interno del “progetto” HTML. Pensai, finalmente posso attribuire all’interno di un documento dei tag “personalizzati” che più si avvicinano al mio concetto di pagina web.
Esempi
Cerchiamo di capire cosa è cambiato a cavallo delle due versioni. Ecco due esempi di html 4 e html 5 a confronto, noterete significativi mutamenti semantici. Rispetto alle versioni precedenti, Html5 sfrutta il modello DOM.
Html 4
Html 5
Una struttura a “blocchi”
La nuova concezione di dividere una pagina web in aree sta rivalutando questo linguaggio. L’ordine e la semantica adesso vanno a braccetto mentre prima ognuno posizionava div e tabelle dove più gli piaceva. In questo modo, invece, chiunque anzichè utilizzare convenzioni mnemoniche del tipo id=”header” piuttosto che id=”pippo” sarà costretto ad utilizzare il tag <header>.
I nuovi tag nel dettaglio
Il tag <Header> contraddistingue la parte iniziale di una pagina web o più comunemente intestazione. Al suo interno possono essere utilizzati più tag html come da esempio:
Titolo dell’articolo
Testo dell’articolo
Il tag <nav> è molto importante anche lato indicizzazione in quanto definisce gli elementi che formano ad esempio un menù e quindi una sorta di albero del sito.
<aside> in un tipico disegno di un layout a 2 o più colonne potrebbe rappresentare la parte relativa alla colonna stessa. Questo tag convenzionalmente viene utilizzato per contrassegnare una colonna.
<article> incorpora al suo interno tutto il testo rappresentato dal corpo della pagina. Se ci immedesimiamo nell’ottica spider questi ultimi capiranno automaticamente che bisognerà approfondire l’indicizzazione su aree di testo contrassegnate da questo tag.
Titolo dell’articolo
Testo dell’articolo
Addentrandoci in una struttura più ramificata possiamo utilizzare <section>. Questo tag definisce sezioni e sottosezioni di una pagina. Utile ad esempio per pagine con strutture gerarchiche ad albero.
Sezione 1
Sezione 1 di 1
Sezione 1 di 1 di 1
Per la parte finale della pagina c’è <footer>.
Nuovi tag html5 nei css
Niente di nuovo lato css, tutti i tag sono passibili di personalizzazione grafica cosi come per Html4. Esempio:
Video e audio con semplicità
Con il passare degli anni la crescita del web è divenuta sempre più esponenziale, dai semplici ipertesti si è passati alle immagini e dalle immagini ai contenuti multimediali. Ed è proprio in questa fase che il web si è trovato un pò spiazzato nel gestirli di botto da un momento all’altro. I webmaster hanno cosi dovuto iniziare ad utilizzare flash per “embeddarli”, mettendosi alle strette con lunghi e fastidiosi pezzi di codici difficili da gestire. Con Html5 tutto questo cambia e la facilità con il quale i contenuti si inseriscono in un contenuto web è a dir poco imbarazzante. Un esempio concreto?
Analogamente per un contenuto audio:
Informazioni sul Doctype e w3c
Con Html5 non c’è più la necessità di specificare una “strict” nel doctype ma basterà rappresentarla con questa semplice riga di codice:
Era ora!
Browser che supportano Html5
Un simpatico test sulle performance del vostro browser potete farlo su http://html5test.com che su una scala da 0 a 300 punti valuterà in base alle nuove introduzioni html5 e css3. Buon divertimento 🙂
Html5 e indicizzazione sui motori di ricerca
Come ben saprete il posizionamento di un determinato contenuto web su un motore di ricerca è una scienza del tutto o quasi oscura; certo ci si può avvicinare tantissimo a quello che è lo standard per il posizionamento, cercando di fare le cose per bene, di avere una struttura codice pulita ma il Santo Graal dell’indicizzazione probabilmente rimarrà una chimera per tutti noi.
Uno dei tanti modi di fare le cose per bene ed avvicinarsi il più possibile agli standard è quello di seguire le novità, il web è un mondo in costante aggiornamento ed è quasi paradossale pensare che una data struttura utilizzata fino ad un anno fa oggi potrebbe gia essere vecchia. Beh, purtroppo è cosi.
Google, Yahoo e simili sono totalmente aperti ad ogni tipo di nuova tecnologia e come tale iniziare a parlare Html5 potrebbe essere una spinta in più per salire posizioni nelle serp.
Risorse utili
- » http://html5demos.com: elenca le compatibilità per ogni singolo browser;
- » http://html5test.com: come elencato in precedenza su una classifica da 0 a 300 classifica il vostro browser sull’attinenza agli standard di Html5;
- » http://validator.w3.org: validatore w3c per pagine web;
- » http://blog.whatwg.org/the-road-to-html-5-character-encoding: blog del working group di Html5.
