Html5

Ingrandisci il Font ingrandisci font | Riduci il Font riduci font | stampa documentosalva documento in pdf

Che cos'è che differenzia l'HTML5 dalle vecchie versioni HTML, come ad esempio l'Html4?

Risposta: la semantica.

L'HTML5 introduce nuovi elementi che rendono più semplice il markup della pagina web.

Qui di seguito potete vedere l'immagine di un layout a 2 colonne, in html4, con: header, menù di navigazione, sezione per articoli, sidebar,  footer in html.

html4 immagine

 Come potete notate tutti gli elementi sono identificati con i div e le classi. 

Perchè nell'html 4 mancano elementi semantici per definire questi elemti, infatti i Div indicano contenitori generici.

l'HTML5 invece, inntroduce elementi semantici più semplici e nello stesso tempo, specifici per ciascuna sezione sopra-elencata. 

Questi elementi sono: header, nav, section, article, aside, footer.

Guarda l'immgine sotto-riportata. 

immmagine htm5 semanticaLa struttura html5 di una pagina sarebbe quindi la seguente:

[...]
<body>
<header>.....</header>
<nav>.....</nav>
<article>
<section>
<h1>...</h1>
</section>
</article>
<aside>.....</aside>
<footer>.....</footer>
</body>
[...]

Ogni sezione section deve contenere i tag "h1", se inseriemo più "section", ecco la corretta sintassi:

[....]
<section>
<h1>sezione livello 1</h1>
<section>
<h1>sezione livello 2</h1>
<section>
<h1> sezione livello 3</h1>
</section>
</section>
</section>
[...]

Questo sarebbe il CSS per ottener un layout simile all'esempio sopra riportato:

header,
section,
aside,
footer {
margin: 0 1.5% 24px 1.5%;
}

nav {
width: 100%;
clear: both;
}

section {
float: left;
width: 63%;
}
aside {
float: right;
width: 30%;
}
footer {
clear: both;
margin-bottom: 0;
}