HTML5: tag utili per realizzare un sito.

Nell’articolo di Martedi scorso avevo fatto una introduduzione al significato dei tag DIV ID e CLASS nel linguaggio HTML4, in questo articolo andremo a vedere brevemente cosa cambia con l’ arrivo del codice HTML5.

Ma prima una nota fondametale:

HTML5 è il linguaggio evoluto di HTML4, porterà grandi novità nella progettazione di pagine web e nuove regole per i webdesigner, il processo di definizione della semantica di HTML5 dovrebbe terminare entro il 2012 ma prima di soppiantare HTML4 potrebbero passare più di dieci anni.

In realtà, anche se, queste previsioni sembrerebbero un pò scoraggianti, diversi browser supportano alcune caratteristiche di questo nuovo linguaggio, e esistono già molti siti che integrano il linguaggio HTML5 tra le proprie pagine web.

Il nuovo markup di HTML5:

Per dividere una pagina web in diverse sezioni con HTML4 è fondamentale usare il tag DIV associato all’attributo ID o CLASS, in HTML 5 invece i DIV sono sostituiti con dei tag specificici.

Esempio:

il codice

<div id="header"><h1>FMdesign blog - articoli e discussioni su web design e altro.</h1><p>Benvenuti</p></div>

diventa in HTML5

<header><h1>FMdesign blog - articoli e discussioni su web design e altro.</h1><p>Benvenuti</p></header>

Lista di alcuni imporatnti tag in HTML5:

• Header: Questo elemento diventa la prima sezione visibile della pagina web, in generale qui si inserisce il logo, i menu, una ricerca, collegamenti ai social.

• Section: L’ elemento section Include e organizza contenuti comuni, come intestazioni, paragfrafi, immagini header e footer, ma anche molto altro. La particolarità dell’elemento section è che per essere corretto deve contenere tutti elmeneti in relazione tra loro dal punto di vista tematico, quindi un intestazione, un immagine, un paragrafo e una lista di contatti che riguardano tutti lo stesso argomento.
• Article: Sezione dedicata alla raccolta di articoli di blog, newsletter, e commenti, il suo significato è simile a quello di section, ma è più specifico. l’ elemento article oltre a poter contenere elementi come header e footer, può contenere elementi section, e viceversa.

• Nav: Blocchi di link per la navigazione interna a un sito a pagine o articoli, è quello che più comunemente viene chiamato menu

• Aside: Raggruppa sostanzialmente tutti ciò che è una sezione laterale, per esempio di un blog a due o più colonne.

• Figure: Con l’elemento Figure si intende un immagine, un esempio di codice da estrapolare, informazioni mostrate in maniera particolare rispetto alla normale contesto.
• Footer: Nel footer in generale vengono raggruppate le informazioni riguardanti il sito, i crediti, l’ hosting che si utilizza, i twitter, archivi, link, informazioni sul blog e sui contatti

Esempio:
Codice scritto in HTML4:

<div id="news">
   <div class="section">
      <div class="article">
         <div class="header">
            <h1>Div Soup Demonstration</h1>
            <p>Posted on July 11th, 2009</p>
         </div>
         <div class="content">
            <p>Lorem ipsum text blah blah blah.</p>
            <p>Lorem ipsum text blah blah blah.</p>
            <p>Lorem ipsum text blah blah blah.</p>
         </div>
         <div class="footer">
            <p>Tags: HMTL, code, demo</p>
         </div>
      </div>
      <div class="aside">
         <div class="header">
            <h1>Tangential Information</h1>
         </div>
         <div class="content">
            <p>Lorem ipsum text blah blah blah.</p>
            <p>Lorem ipsum text blah blah blah.</p>
            <p>Lorem ipsum text blah blah blah.</p>
         </div>
         <div class="footer">
            <p>Tags: HMTL, code, demo</p>
         </div>
      </div>
   </div>
</div>

lo stesso codice come andrebbe scritto in HTML5:

<section>
   </section><section>
      <article>
         <header>
            <h1>Div Soup Demonstration</h1>
            <p>Posted on July 11th, 2009</p>
         </header>
         <section>
            <p>Lorem ipsum text blah blah blah.</p>
            <p>Lorem ipsum text blah blah blah.</p>
            <p>Lorem ipsum text blah blah blah.</p>
         </section>
         <footer>
            <p>Tags: HMTL, code, demo</p>
         </footer>
      </article>
      <aside>
         <header>
            <h1>Tangential Information</h1>
         </header>
         <section>
            <p>Lorem ipsum text blah blah blah.</p>
            <p>Lorem ipsum text blah blah blah.</p>
            <p>Lorem ipsum text blah blah blah.</p>
         </section>
         <footer>
            <p>Tags: HMTL, code, demo</p>
         </footer>
      </aside>
   </section>

Perchè fidarsi di HTML5?

Per convincere i più scettici bisognerebbe sottolineare che il linguaggio HTML5 è realizzato direttamente dai produttori di browser e non più da sviluppatori geniali solitari.
Questo significa che HTML5 dovrebbe risultare il prodotto da sempre sognato da ogni webdesigner, il linguaggio “perfetto” che ogni browser supporta in uguale maniera, sembra un utopia vero? mi auguro di no.

Per un webdesigner è conveniente utilizzare già HTML5?

Se un cliente ti chiede un sito in HTML5, adesso non ha molto senso soddisfarla, d’altro canto allenarsi a creare pagine web con la nuova semantica HTML5 è un ottimo modo per non rimanere indietro con i tempi.

Altre risorse:

Intervista su HTML5 realizzata dal blogger Fedeweb:
I tag HTML5 con esempi pratici.
lista dei tag in italiano.

Condividi questo articolo:

• Tweet

Info sull' autore:

Nato a Bologna, mi occupo della realizzazione grafica e dello sviluppo front-end di siti web e sono il fondatore di questo blog. Se vuoi segnalare qualche problema o hai qualche richiesta particolare invia una mail tramite il modulo contatti.
Leggi gli altri articoli di Francesco