Skip to main content

Introduzione a HTML 5: costruire la pagina web

HTML 5 e le tecnologie collegate rappresentano una rivoluzione importante nel mondo del web design.

Nello scorso articolo abbiamo offerto una panoramica sull’argomento; in questo articolo cominciamo a vedere il nuovo codice.

Una pagina scritta in HTML 5

Partiamo subito con un esempio.

<!DOCTYPE html>  <html lang="it">    <head>      <meta charset="utf-8">      <meta name="description" content="Esempio di pagina web costruita con HTML 5">      <meta name="keywords" content="html5, web design">      <title>Pagina web HTML 5</title>      <link rel="stylesheet" href="style.css">    </head>    <body>      <!-- contenuto della pagina -->      </body>  </html>

Le novità più importanti sono evidenti e mirano soprattutto a semplificare e accorciare il codice.

  • la dichiarazione del DOCTYPE è ridotta al minimo necessario.
  • l’elemento html è altrettanto breve, contenendo solo (opzionalmente) la lingua di riferimento per la pagina
  • il nuovo elemento meta “charset” abbrevia l’indicazione dell’encoding
  • l’attributo “type” per i file inclusi con “link” o “script” non è più necessario
  • possiamo omettere la barra di chiusura per i self closing tags.

In merito all’ultimo punto, significa che in HTML 5 possiamo ad esempio tornare a scrivere <br> anzichè <br/>.

Consigliamo comunque di non adottare subito questa nuova modalità, per mantenere maggior compatibilità con i browser più vecchi.

I nuovi elementi all’interno del body

Vediamo ora tutti i nuovi elementi che caratterizzano semanticamente la nostra pagina, espandendo il contenuto del body.

  <body>      <header>        <h1>GiBiLogic</h1>      </header>      <nav>        <ul>          <li><a href="#">Azienda</a></li>          <li><a href="#">Servizi</a></li>          <li><a href="#">Contatti</a></li>        </ul>      </nav>      <section>        <!-- contenuto principale della pagina -->      </section>      <aside>        <!-- banner, in evidenza, altro -->      </aside>      <footer>        Copyright 2012 GiBiLogic      </footer>    </body>

Come possiamo vedere, molte DIV possono essere sostituite da elementi più specifici che indicano con più chiarezza la propria funzione e che quindi potranno facilitare:

  • l’indicizzazione della pagina da parte dei motori
  • la ricerca di contenuti nel sito
  • la creazione di versioni mobile e/o ad alta accessibilità delle nostre pagine

Retrocompatibilità

Prima che vi spaventiate, ricordatevi che non siamo obbligati a usare i nuovi elementi.

Gli elementi DIV valgono ancora e questo garantisce che le pagine web compatibili con XHTML siano correttamente interpretate anche secondo lo standard HTML 5.

E’ solo nel nostro interesse che vale la pena di aggiornarle utilizzando i nuovi tag, in modo da ottenere i benefici riportati nella sezione precedente.

Dettaglio degli elementi

I nuovi elementi presentati fin qui non hanno bisogno di lunghe spiegazioni. Riepiloghiamoli rapidamente:

  • header include l’intestazione del sito, che tipicamente contiene un logo, il nome del sito, un motto o una descrizione, talvolta anche un banner promozionale.
  • nav include come è ovvio il menù di navigazione principale
  • aside include un menù secondario e/o altre informazioni quali i contatti, gli ultimi articoli scritti, un blogroll…
  • section identifica una macroarea della pagina; è molto probabile che una pagina web ne contenga più di una
  • footer include solitamente i credits e/o un piccolo riassunto dei dati anagrafici e geografici

Questi elementi riguardano la struttura generale della pagina.

Article

Un altro interessante elemento introdotto da HTML 5 è article, che identifica uno specifico contenuto (un articolo, il post di un forum, un commento, e cosi via).

Riprendendo il codice di esempio illustrato sopra, la nostra section potrebbe contenere:

<section>    <article>      Questo è il primo articolo    </article>    <article>      Questo è il secondo articolo    </article>  </section>

E ora facciamo un altro passo avanti:

<section>    <article>      <header>        <h1>Titolo del primo articolo</h1>      </header>      Questo è il primo articolo      <footer>        <p>Commenti (0)</p>      </footer>    </article>    <article>      <header>        <h1>Titolo del secondo articolo</h1>      </header>      Questo è il secondo articolo      <footer>        <p>Commenti (0)</p>      </footer>    </article>  </section>

Come potete vedere, possiamo utilizzare header e footer per identificare l’intestazione e il piè di pagina di ciascun articolo, oltre che della pagina intera.

Vi sembra abbastanza semantico?