Introduzione
Una dashboard di progetto presenta informazioni diverse ma collegate: lo stato di avanzamento, le attività recenti, le prossime scadenze e i riferimenti del team. Invece di organizzare tutto con contenitori generici come <div>, possiamo usare i principali tag semantici HTML per descrivere con maggiore precisione il ruolo di ogni area.
In questo tutorial realizzeremo la struttura di una dashboard per un progetto software. Useremo <header> per l’intestazione della pagina, <main> per il contenuto centrale, <section> per raggruppare informazioni correlate e <footer> per le informazioni finali.
La semantica non modifica automaticamente l’aspetto grafico della pagina. Il suo scopo principale è rendere il documento più comprensibile per browser, tecnologie assistive, motori di ricerca e sviluppatori che dovranno aggiornarlo in futuro.
Codice completo
<header>
<h1>Dashboard progetto Aurora</h1>
<p>Panoramica dello sviluppo della nuova piattaforma web.</p>
</header>
<main>
<section aria-labelledby="stato-progetto">
<h2 id="stato-progetto">Stato del progetto</h2>
<p>
Il progetto è in fase di sviluppo e ha raggiunto il
<strong>68% di completamento</strong>.
</p>
<ul>
<li>Analisi: completata</li>
<li>Design dell’interfaccia: completato</li>
<li>Sviluppo: in corso</li>
<li>Test finali: da iniziare</li>
</ul>
</section>
<section aria-labelledby="attivita-recenti">
<h2 id="attivita-recenti">Attività recenti</h2>
<section aria-labelledby="attivita-backend">
<h3 id="attivita-backend">Backend</h3>
<p>
È stata completata l’API per la gestione degli account utente.
</p>
</section>
<section aria-labelledby="attivita-frontend">
<h3 id="attivita-frontend">Frontend</h3>
<p>
È stata realizzata la schermata di accesso e validazione del modulo.
</p>
</section>
</section>
<section aria-labelledby="prossime-scadenze">
<h2 id="prossime-scadenze">Prossime scadenze</h2>
<ul>
<li><strong>12 maggio:</strong> revisione del codice</li>
<li><strong>16 maggio:</strong> test di integrazione</li>
<li><strong>20 maggio:</strong> dimostrazione al cliente</li>
</ul>
</section>
</main>
<footer>
<p>Ultimo aggiornamento: 8 maggio 2025</p>
<p>Responsabile progetto: Martina Rossi</p>
</footer>Spiegazione
Il ruolo di <header>
Il tag <header> contiene l’introduzione della dashboard. In questo esempio presenta il titolo del progetto e una breve descrizione. Non deve essere confuso con una semplice area grafica: rappresenta l’intestazione del documento o di una specifica sezione.
Una pagina può contenere più elementi <header>. Per esempio, una singola sezione dedicata a un modulo potrebbe avere una propria intestazione. Tuttavia, nella dashboard utilizziamo un’intestazione principale per introdurre l’intero contenuto.
Il ruolo di <main>
<main> identifica il contenuto principale e unico della pagina. Deve contenere le informazioni direttamente collegate allo scopo della dashboard: stato, attività e scadenze.
In una pagina HTML completa è consigliabile usare un solo elemento <main>. Elementi ripetuti come intestazioni, menu di navigazione o informazioni legali non dovrebbero essere inseriti al suo interno se rappresentano contenuti comuni a più pagine.
Il ruolo di <section>
Ogni <section> raggruppa contenuti che appartengono allo stesso argomento. Le sezioni della dashboard sono indipendenti e riconoscibili grazie ai titoli <h2>. Questa relazione tra contenitore e titolo è importante perché aiuta a comprendere la gerarchia della pagina.
Nel blocco “Attività recenti” sono presenti due sezioni annidate, identificate dai titoli <h3>. L’annidamento comunica che Backend e Frontend sono argomenti secondari rispetto alle attività recenti.
L’attributo aria-labelledby collega ogni sezione al relativo titolo tramite l’attributo id. In questo modo una tecnologia assistiva può determinare con precisione il nome della regione semantica.
Il ruolo di <footer>
<footer> contiene informazioni conclusive, come la data di aggiornamento e il responsabile del progetto. Anche questo elemento può essere usato per una pagina intera o per una singola sezione. La sua posizione non obbliga a usare CSS particolari: il significato dipende dal contenuto inserito.
Best practice
- Usa un solo <main>: identifica il contenuto centrale della pagina senza duplicarlo.
- Associa ogni <section> a un titolo: preferisci un’intestazione chiara come <h2> o <h3>.
- Rispetta la gerarchia dei titoli: dopo un <h2> usa un <h3> per i sottoargomenti, evitando salti arbitrari verso <h4>.
- Non usare <section> solo per creare spazi: se un contenitore non rappresenta un argomento autonomo, probabilmente è più adatto un elemento non semantico.
- Scrivi contenuti descrittivi: titoli come “Stato del progetto” sono più utili di etichette generiche come “Informazioni”.
- Usa ARIA con criterio: l’attributo aria-labelledby è utile quando una sezione deve avere un nome esplicito, ma non sostituisce una struttura HTML corretta.
- Separa struttura e presentazione: HTML descrive il significato, mentre CSS gestisce colori, spaziature, colonne e dimensioni.
Riepilogo
Una dashboard di progetto è un esempio concreto in cui la semantica HTML migliora l’organizzazione dei contenuti. <header> introduce il progetto, <main> delimita l’area informativa principale, <section> separa gli argomenti correlati e <footer> raccoglie i dati conclusivi.
La regola più importante è scegliere il tag in base al significato del contenuto, non alla sua posizione visiva. Una struttura ben progettata sarà più semplice da leggere, manutenere e adattare a nuove funzionalità, come filtri, dati caricati dinamicamente o componenti riutilizzabili.
Approfondisci con risorse ufficiali
- MDN Web Docs: documentazione sugli elementi HTML semantici e sulla struttura dei documenti.
- WHATWG HTML Living Standard: specifica ufficiale del linguaggio HTML.
- W3C WAI: linee guida e risorse per migliorare accessibilità e comprensione dei contenuti web.
- MDN Accessibility: approfondimenti sul rapporto tra semantica HTML e tecnologie assistive.