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
Paginare i risultati con QuickGrid in Blazor
Usare il versioning con i controller di ASP.NET Core Web API
Come migrare da una form non tipizzata a una form tipizzata in Angular
Sostituire la GitHub Action di login su private registry
Utilizzare la libreria Benchmark.NET per misurare le performance
Autenticarsi in modo sicuro su Azure tramite GitHub Actions
Disabilitare automaticamente un workflow di GitHub (parte 2)
Determinare lo stato di un pod in Kubernetes
Implementare l'infinite scroll con QuickGrid in Blazor Server
Utilizzare Tailwind CSS all'interno di React: installazione
Utilizzare HiLo per ottimizzare le insert in un database con Entity Framework
Usare Refit e Polly in Blazor per creare client affidabili e fortemente tipizzati
I più letti di oggi
- Miglioramenti nelle performance di Angular 16
- Ottimizzare le performance delle collection con le classi FrozenSet e FrozenDictionary
- HTML5 con CSS e JavaScript
- Ottimizzazione dei block template in Angular 17
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!