HTML5 definisce una semantica precisa per descrivere le varie sezioni di una pagina web.
Questi tag non definiscono una posizione o delle regole di stile per gli elementi che comprendono, questo compito resta comunque demandato ai fogli CSS.
Lo scopo di questa marcatura è di creare un codice più standard ed ordinato. Il vantaggio risiede nel fatto che i vari contenuti saranno più facilmente riconoscibili dai motori di ricerca, dagli aggregatori e… dai noi stessi qualora riprendessimo in mano il codice a distanza di anni :)

Qui sotto la struttura “ufficiale” di una pagina HTML5:


<!DOCTYPE html>
<html>

<head>
<title>Il titolo della pagina</title>
</head>

<body>


<!-- Intestazione INIZIO -->
<header>
<h1>Intestazione della pagina</h1>
</header>
<!-- Intestazione FINE -->

<!-- Menu di navigazione INIZIO -->
<nav>
<ul>
<li><a href="#">Chi Siamo</a></li>
<li><a href="#">Servizi</a></li>
<li><a href="#">Contatti</a></li>
</ul>
</nav>
<!-- Menu di navigazione FINE -->

<!-- Sezione INIZIO -->
<section>

<article>Il primo articolo</article>
<article>Il secondo articolo</article>

<aside>Materiale a margine</aside>

</section>
<!-- Sezione FINE -->


<!-- Piè pagina INIZIO -->
<footer>
<h2>Piè pagina</h2>
</footer>
<!-- Piè pagina FINE -->

</body>

</html>

Focalizziamo la nostra attenzione all’interno del tag – body – che definisce i contenuti visivi e discorsivi della pagine html, vedremo:

– header
Qui inseriremo il logo e il titolo del nostro sito, magari l’ultima data di modifica e il nostro slogan.

– nav
Qui trova il suo spazio ideale il menù che ci permette di navigare tra le varie pagine del sito.

– section
Una sezione è un contenitore per i vari articoli

– article
Un articolo è un testo dal senso compiuto, come un articolo di un giornale.

– aside
Viene posizionato a lato rispetto agli articoli.
E’ un testo breve che evidenzia un testo estrapolato da un articolo e rappresentato a grandi lettere. In – aside – possiamo alloggiare anche gli spazi pubblicitari.

Il mio sito ufficiale>