HTML5 introduce una serie di nuovi tag semantici, che hanno l'obiettivo di rendere più immediata la composizione della pagina, indicando in maniera rapida la tipologia di informazioni presenti una determinata parte della pagina.
In particolare, HTML5 dispone dei tag header, footer e nav, che servono per delimitare le rispettive aree:
<!DOCTYPE html><html> <body> <header> <h1>Intestazione</h1> <nav> <ul> <li><a href="/link1/">Link 1</a></li> <li><a href="/link2/">Link 2</a></li> <li><a href="/link3/">Link 3</a></li> </ul> </nav> </header> ... contenuto ... <footer> <p>Footer di pagina</p> </footer> </body> </html>
L'idea alla base di questi tag è quello di rendere più chiaro ciascuna area a cosa serve, rendendo la vita più semplice a browser non convenzionali (vocali, spider di motori di ricerca).
Oltre a questi tag, sono presenti anche section ed article, che indicano, rispettivamente, una sezione ed un contenuto. Eccone un esempio:
<section> <header> <h1>Intestazione di sezione</h1> </header> <article> <header> <h1>Intestazione contenuto</h1> </header> <p>Corpo contenuto</p> <footer> <p>Footer contenuto</p> </footer> </article> <article> <header> <h1>Intestazione contenuto</h1> </header> <p>Corpo contenuto</p> <footer> <p>Footer contenuto</p> </footer> </article> </section>
Ciascuna section può contenere uno o più article. Possiamo notare che ciascun article ha, a propria volta, header e footer, all'interno dei quali la numerazione degli hn riprende da 1.
Le section, generalmente, delimitano gruppi di informazioni, mentre con article si introduce un contenuto vero e proprio.
L'utilizzo di questi tag non disturba eventuali vecchi browser che non li supportano. In questo caso, però, è necessario continuare ad utilizzare i div all'interno dei CSS, altrimenti le istruzioni saranno ignorate e l'effetto potrebbe essere quello di non visualizzare formattato correttamente il markup che abbiamo prodotto.
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Utilizzare la parola chiave var con lambda eExpression e method group in C# 10
Gestire query string lunghe in ASP.NET Core
Aumentare le prestazioni di Blazor con la compilazione Ahead of Time
Offline first con Blazor e IndexedDB
Tracciare gli eventi tramite i DevTools di Chrome
Controllare lo stato di un servizio gRPC in ASP.NET Core tramite Health Check
Integrare dive nelle pipeline di Azure DevOps e GitHub
Esecuzione a matrici nei workflow di GitHub Action
Utilizzare una sequence per generare numeri sequenziali con Entity Framework Core
Indicizzare e ricercare i blob di Azure Storage
Le novità di Angular 13 e del suo ecosistema
I più letti di oggi
- Monitorare contemporaneamente i cambiamenti di più proprietà dello scope di AngularJS
- "welcome to the modern web development" con @dbochicchio e @kasuken, ora live per iniziare #PWAConfIT parleremo di #PWA e di come costruire applicazioni web moderne per tutto il pomeriggio. Seguiteci live su https://aspit.co/PWAConf-20 #aspilive
- Sfruttare le dipendenze con il model binding di ASP.NET Web Forms
- rilasciato #vs2017.5, con importanti aggiornamenti sulla velocità di caricamento dei progetti, supporto a C# 7.2 e nuove feature di Xamarin.disponibile inoltre anche #VS for #Mac, con sign integrato delle app iOS.altre informazioni su https://aspit.co/bkk
- Disabilitare un pulsante in Blazor durante il salvataggio