Proseguiamo il nostro “tour” per scoprire l‘html5 dopo la panoramica generale sul nuovo standard , e una descrizione del tag <header> e <hgroup>, oggi affrontiamo il tema dei due tag maggiormente usati: article e section.
Ho pensato di creare un articolo a sè per questi due tag, perchè sono fra i più importanti del nuovo standard. Oltre a questo però, data la differenza quasi minima tra questi due tag, sarà molto facile confondersi e usare magari quello meno appropriato.
Dividiamo il nostro sito in sezioni
Il tag <section> secondo la reference guide HTML5, indica porzioni (segmenti) differenti di contenuto non distribuibile. Oltre a questo NON deve essere usato per la delimitazione di contenuto generico. Ebbene si lo sbaglio più grande che potreste fare e’ quello di usare section al posto dei “classici” div. I div non sono spariti, anzi, risultano la soluzione ideale se usati come “box” generici di codice o contenuto.
Analizziamo ora la frase principale della reference guide: indica porzioni (segmenti) differenti di contenuto non distribuibile. Di fatto, il contenuto presente nel section non e’ pensato per essere condiviso (pensiamo ad esempio al social sharing), ma piuttosto il suo uso e’ obbligatorio per suddividere il sito per aree tematiche. Un uso ad esempio potrebbe essere questo:
<section id="news">Tue news qui</section>
<section id="contatti">Form contatti</section>
<section id="benvenuto">Benvenuto nel sito!</section>
Come vedete in questa estrazione di codice, il section divide di fatto il documento in sezioni ben distinte per tematica. E sono di fatto non distribuibili direttamente.
Scriviamo i nostri articoli!
Il tag article e’ invece pensato per rendere il contenuto presente al suo interno distribuibile, ad esempio sui siti di social sharing. Come abbiamo visto con Google Panda, il contenuto farà da padrone, e renderlo distribuibile e condividendolo, il prestigio del sito salirà a dismisura. Oltre a un prestigio “nominale” avremo benefici anche dal punto di vista SEO, con backlink spontanei e VALIDI.
Ricordiamo che dentro ogni article è possibile inserire anche il tag <header> e <hgroup> per definire una “testa” dell’articolo.
Ecco un esempio valido di article:
<article>
<header>
<hgroup>
<h1>Titolo principale</h1>
<h2>Descrizione in sotto titolo</h2>
</hgroup>
</header>
//Ricordatevi di implementare, se possibile un social sharing!
</article>
Spero che questo articolo vi abbia chiarito le idee!
Voi cosa ne pensate usate già i nuovi standard (CSS3 e HTML5) ?
scusatemi ma… posso chiedere qual’è questa grandissima utilità di html5?
alla fine comunque devi dare un formattazione a tutti i tag tramite css per posizionarli dove vuoi… tanto vale usare le solite classi no?
Non riesco a capire tutti questi vantaggi!
Ciao Francesca, domanda più che sensata direi 😉 (me la sono posta anche io). Allora innanzitutto vedi l’html non solo come un classico linguaggio di markup (come era HTMl4/XHTMl). Html5 introduce molte feature come ad esempio il supporto ai canvas che permettono di creare interfacce ed determinate animazioni sempre più vicini (e talvolta migliori) al flash e pertanto crea una user experience davvero unica per il visitatore.
I “creatori” di HTML5 non negano la visione avvenieristica di un WEB sempre più standardizzato, in modo da poter (in un futuro lontano) rendere il cross-browsering davvero completo.
Oltre a questo si offre la possibilità al designer di attuare un design semantico e più ordinato separando le sezioni (section tag) del documento e dividendo lo stesso in contenuti utili (article tag). Il design semantico è un’altro grosso passo in avanti in questo campo, è stato introdotto tra le altre cose, proprio per non abusare troppo dei tanto cari div che in certe realizzazioni erano talvolta inutili e per rendere possibile per il browser di comprendere il “contenuto” del documento, leggendone soltanto la struttura.
Sempre nei vantaggi ti cito alcune altre feature “uniche” davvero utili: video integrati, geolocation (davvero una figata!). Per ultimo sono stati deprecati alcuni tag che non avevano davvero senso di andare avanti.
Ti ringrazio per la risposta molto esauriente!!
Ma ho letto su alcuni forum che non è supportato bene in tutti i browser!
Giusto?
Bhè ovviamente essendo ancora in fase di espansione in alcuni browser come IE (sopratutto IE!) alcuni tag non vanno. Ad ogni modo esistono diversi hack/trucchi/accorgimenti per poter usare fin da subito il nuovo standard per i nuovi progetti senza rischiare di rimanere indietro e risultare “obsoleto”. Ti segnalo un ottimo sito che racchiude una tabella comparativa con i supporto dei vari tag da parte dei vari browser: http://mobilehtml5.org/
Ecco gli hack cross-browser per poter usare da subito HTML5 anche su IE:
http://www.targetweb.it/html5-e-internet-explorer-8-come-farlo-funzionare-in-modo-corretto/
Ciao! 😉
Wow grazie per i suggerimenti!! 🙂 vedrò di dargli un’occhiata per non rimanere indietro!!! grazie ancora !!!
Intanto stavo guardando questo sito che mi sembra molto interessante:
http://www.html5canvastutorials.com/
magari può servire a qualcun’altro!!
ciao!
Salve a tutti…
Vorrei allinearmi in coda alle osservazioni fatte da Francesca.
Sto aggiornando il layout del mio sito con il nuovo linguaggio Html5 e posso affermare che a più della metà dei webdesign questo html5 non serviva proprio.
Il vero passo avanti si è fatto sui canvans, sull’importazione di contenuti video, sui form e altre cosucce, ma che sono di grande utilità ai webdesign in ambito professionale.
Ma allora a cosa servono sti benedetti nuovi tag?
Già… a che serve forzare in questo modo dando un nome specifico ad elementi che prima si chiamavano solo #div?
Semplice… perchè i motori di ricerca vogliono “la pappa pronta”….punto e basta, analogo discorso con l’introduzione delle sitemaps, per le quali non ha senso che io utente debba generare un doc apposito contenete la sruttura dei link, indicandone addirittura il peso! non ha senso, se non quello di far trovare la solita “pappa pronta” ai vari crawler dei motori di ricerca.
Inoltre la forzatura con la qule si introducono elementi come serve ancora una volta a big G per contestualizzare e targhettizzare la pubblicità del circuito adsense… pensateci… ora adsense potra ignorare le possibili keyword “fasulle” (ovvero quelle keyword riportate quà e là dai webmaster per migliorare il CTR di adsense).
Infatti tutte le keyword magari anche in … etc inserite nel , nell’, nel potrebbero così venire in un sol colpo ignorate … e il crawler potra prendere in considerazione solo le keyword e contenuti letti sul tag .
Come si vede l’html5, tanto decantato è un piccolo restyling dell’html4… con pochè novità, ma molti vantaggi per i soliti noti.
ciao.
ops! ho trascritto i tag html e in fase di pubblicazione si sono persi…. colevo scrivere:
“Inoltre la forzatura con la qule si introducono elementi come “header” “footer” “article” “aside” serve ancora una volta a big G per contestualizzare e targhettizzare la pubblicità del circuito adsense… pensateci… ora adsense potra ignorare le possibili keyword “fasulle” (ovvero quelle keyword riportate quà e là dai webmaster per migliorare il CTR di adsense).
Infatti tutte le keyword magari anche in “h1” “h2″… etc inserite nel , nell’”header” “footer” “aside” potrebbero così venire in un sol colpo ignorate … e il crawler potra prendere in considerazione solo le keyword e contenuti letti sul tag “article”.
Come si vede l’html5, tanto decantato è un piccolo restyling dell’html4… con pochè novità, ma molti vantaggi per i soliti noti.”
Hi there, just wanted to mention, I loved this blog post.
It was practical. Keep on posting!
Have you ever considered creating an e-book or guest authoring on other blogs?
I have a blog based upon on the same subjects you discuss and would really like to have you share some stories/information.
I know my visitors would value your work. If you are
even remotely interested, feel free to send me an email.
**autoremovespam**