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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!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>