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?