Html 5: la semantica non è più un optional

Html 5: la semantica non è più un optional

1620
9
CONDIVIDI

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.

Ma, c’è sempre un “ma”. Non tutti i browser supportano questa nuova tecnologia, di chi stiamo parlando? Di Firefox 3.4 o inferiori e, naturalmente di Internet Explorer versione 6,7 e 8.

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

1
 
1
 

 

 

Html 5

1
 
1
 

 

 

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:

1
 

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.

1
 

<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.

1
 

<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.

1
 

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.

1
 

Sezione 1

 

Sezione 1 di 1

 

Sezione 1 di 1 di 1

 

Per la parte finale della pagina c’è <footer>.

1
 
    • Credits
  • Privacy
  • Termini e condizioni
  • Nuovi tag html5 nei css

    Niente di nuovo lato css, tutti i tag sono passibili di personalizzazione grafica cosi come per Html4. Esempio:

    1
    
     

     

    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?

    1
    2
    
    <video src="video.3gp" poster="thumb.jpg" controls="controls" width="320" height="240">
        <a href="video.3gp">Scarica video</a></video>

    Analogamente per un contenuto audio:

    1
    2
    
    <audio src="musica.mp3" controls="controls">
        <a href="musica.mp3">Download musica</a></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:

    1
    
     

    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

    • Gran bell’articolo. Come sempre! 😉

    • Francesco

      Molto completo come articolo, davvero. Unico appunto da farti è quello del meta charset che non hai descritto. Con Html5 basterà inserire la seguente sintassi <meta charset=utf-8 /> al posto della noiosissima meta http-equiv ecc..

    • Paki Romita

      senti. mi hai convinto a realizzare il prossimo sito web con html5!!! 😉

    • gwebInspiration

      Io sinceramente sono a metà. Sono un SEO Specialist e questa nuova introduzione dell’html5 non fa altro che facilitarmi il lavoro perchè gli spider sanno già in quali tag indicizzare i nostri contenuti ma dall’altro lato pochi browser ancora supportano tutta questa meraviglia. perche?

    • GIULIOSENIOR

      IO GIA L’HO USATO PER UN PAIO DI PROGETTINI . ORMAI FREGHIAMOCENE DELLA COMPATIBILITà

    • Sara design

      Ne faccio uso da 1 paio di mesetti ormai. Gira benissimo sui browser webkit, firefox ed anche explorer 8 (che però nn supporta tutti i tag), sul 9 invece nn ci sono problemi. Sul SEO nn sei il primo ke ne parla bene, ho sentito parecchi addetti ai lavori e ne parlano anche loro molto bene! Ormai explorer 6 e 7 hanno fatto il loro tempo.

    • GraQ

      HTML 5 è il futuro!

    • Sergio Masotti

      un motivo in più per utilizzare HTML 5: http://www.ie6countdown.com/

    • Sara design

      Finalmente.