Andiamo a vedere insieme la nuova struttura che caratterizza l’HTML5, articoli e guide di approfondimento.
Struttura HTML5
In HTML4 siamo stati abituati a scrivere una pagina web utilizzando la seguente sintassi di codice.
In HTML5 sono stati introdotti nuovi elementi, che hanno l’obiettivo di rendere più semantico e significativo la struttura della pagina web.
Il primo colpo d’occhio vi porterà a pensare che i famosi <div> siano stati sostituiti con questi nuovi tag, invece capirete mettendo le mani sul codice di riuscire ad ottimizzare la struttura in modo semplice e molto più chiaro.
Come vediamo dalla struttura qui in alto sono stati sostituiti i tag di HTML4 in altri più semantici e validi.
E’ stato sostituito da HTML4 a HTML5:
La struttura lato codice della bozza qui in alto sarà simile a:
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>HTML5</title> </head> <body> <header> <h1>USIAMO HTML5</h1> </header> <nav> <ul> <li><a href="#">NAV1</a></li> <li><a href="#">NAV2</a></li> <li><a href="#">NAV3</a></li> <li><a href="#">NAV4</a></li> </ul> </nav> <section> </section> <aside> </aside> <footer> </footer> </body> </html>
I Principali Elementi HTML5
Elemento <!doctype html>
Rappresenta la dichiarazione della pagina molto semplificata rispetto all’HTML4 che precede qualsiasi elemento del documento.
Elemento <header>
Rappresenta una sezione della pagina in cui inserire la testata del sito web, qui possiamo inserire un logo o un motto.
Elemento <nav>
Rappresenta una parte della pagina che contiene i link di navigazione del sito, quindi qui inseriremo i menu di navigazione.
Elemento <section>
Rappresenta un’area in cui inserire del contenuto generico.
Elemento <article>
Rappresenta una sezione della pagine indipendente, quindi riferita ad articoli
Elemento <aside>
Rappresenta una sezione della pagina collegata al sito e non obbligatoriamente al contenuto. In questa sezione possiamo riconoscere le famose sidebar di un blog.
Elemento <footer>
Rappresenta la sezione conclusiva del sito in cui inserire alcune informazioni del sito.
Approfondimenti:
HTML5, vuoi dare uno sguardo alle novità che porterà con sè?
HTML5: introduzione alle novità
Un’anteprima di HTML 5
HTML5: L’inizio della fine per i player Flash?
HTML5Rocks
Siti Web in HTML5
HTML5 Compatibilità con i Browser
Creare un blog con HTML5
HTML5 Tag References
HTML5 video for everyone
