Creare sito web in HTML5: la struttura semantica

Vediamo da cosa è composta la struttura semantica di una pagina web in HTML5.

La creazione di siti web in HTML5 dovrebbe permettere a progettisti e sviluppatori il conseguimento del seguente obiettivo: la realizzazione di un markup snello, robusto e funzionale.

E una pagina web in HTML5 appare in questo modo: una codifica lineare, scalabile e definita, strutturata in modo preciso grazie a tag sviluppati per soddisfare specifici obiettivi di realizzazione.

Un documento web redatto in HTML5 ai “raggi X” appare orientativamente così:

<!DOCTYPE html><html>    <head>Contenuto della testata    </head>    <body>  <header><h1>Titolo pagina</h1>  </header>  <nav><ul>    <li>Home</li>    <li>Chi siamo</li>    <li>Contatti</li></ul>  </nav>  <section><h1>Titolo articolo</h1><article>    <p> qui va il contenuto del paragrafo</p></article>  </section>  <footer><p>contenuto del footer</p>  </footer>    </body></html>

Come si evince, la pagina è suddivisa in precise porzioni modulari, ognuna della quali ha un compito informativo e semantico specifico. Questo cosa significa? Significa che ogni tag determina il grado di valore dei contenuti presenti. La struttura di una pagina HTML è immaginabile un po’ come una composizione letteraria, dispone infatti di:

un “inizio”, dove sono presenti le metainformazioni e il menu di navigazione;
una “parte centrale”, che rappresenta il cuore pulsante dei contenuti utili al navigatore;
una “fine”, che ingloba informazioni supplementari o di contorno.