Nella scorsa lezione siamo stati introdotti agli aggiornamenti che porta con sé il linguaggio HTML5, molte sono state le caratteristiche aggiunte, ma da questa lezione in poi andremo a controllare nel dettaglio quelle principali.
Per imparare un nuovo linguaggio di markup, esiste forse un metodo migliore se non quello di andare a conoscere i nuovi elementi che potremmo utilizzare?!?
Nuovi Elementi Semantici
Ecco un piccolo elenco di elementi che sono stati creati:
- header - questo nuovo elemento sarà molto utile per identificare le intestazioni presenti all’interno del nostro sito. La bellezza di questo nuovo elemento è che non dovrà essere presente soltanto una volta, ma sarà in grado di identificare tutte quelle sezioni della pagina che sono significanti a livello di intestazione. Un primo esempio di utilizzo di questo elemento sarà, sicuramente, quello di essere utilizzato come elemento contenitore dell’intestazione della pagina web, dove generalmente troviamo titolo, logo e navigazione principale. Ma lo potremo utilizzare anche per le intestazioni degli articoli.
- nav - visto che abbiamo parlato di link di navigazione, ecco un altro elemento molto utile. Grazie a questo saremo in grado di definire delle aree dedicate alle navigazioni principali, quindi non sarà necessario andare ad inserire al suo interno tutti i link presenti all’interno della pagina, ma quelle strutture di link che si ritengono più imporanti; come ad esempio i link alle pagine interne, ma anche link che puntano a parte interne alla pagina stessa.
- section - uno tra gli elementi più discussi risulta essere proprio questo! Inizialmente molti sviluppatori pensavano che questo elemento fosse il nuovo div, ma si sbagliavano.
Questo elemento rappresenta una parte generica della pagina che raggruppa un determinato tipo di contenuto. Ad esempio potremmo utilizzare questo elemento più volte all’interno di una homepage separando le sezioni di introduzione, contatti e news. - article - elemento molto utile per i blogger che gli permetterà di definire semanticamente ogni loro articolo ma, generalmente, ci permette di indicare qualsiasi tipo di contenuto che può essere riutilizzato singolarmente. Altri esempi di utilizzo potrebbero essere nella definizione di un messaggio all’interno di un forum, un commento di un utente, una widget e altro ancora.
- aside - elemento che ci permetterà di evidenziare del contenuto che presenta delle informazioni di supporto all’elemento article; tendenzialmente utilizzato per definire le sidebar di una pagina web.
- footer - con questo invece saremo in grado di definire il pié di pagina di un intero documento HTML come quello di un qualsiasi articolo presente al suo interno.
I nuovi elementi HTML5 sono ancora molti e con questo corso andremo ad approfondire le nostre conoscenze a riguardo, ma prima di concludere vorrei parlarvi anche di altri interessanti elementi semantici come <time>, che ci permette di definire delle date attraverso diversi formati, e </time> <hgroup> , che ci permetterà di definire un gruppo di titoli.