header, nav, main, footer: i quattro grandi elementi
Racchiuda la pagina nelle aree che gli utenti si aspettano.
header, nav, main, footer: i quattro grandi elementi è una lezione Web Accessibility Academy gratuita su CoddyKit. Questa è la lezione 1 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Web Accessibility Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Web Accessibility Academy include 4 lezioni in totale.
Una mappa per la sua pagina
Gli utenti vedenti esaminano una pagina in un attimo. Chi usa uno screen reader ha bisogno di una mappa, e gli elementi landmark di HTML5 la tracciano per lui.
I quattro grandi elementi
Quattro elementi coprono la maggior parte delle pagine: header, nav, main e footer. Insieme dividono il layout in regioni tra cui gli utenti possono spostarsi. 🗺️
header: il banner superiore
Un header a livello di pagina contiene il nome del sito, il logo e il contenuto introduttivo. Gli screen reader lo espongono come regione banner.
<header>
<h1>CoddyKit</h1>
</header>nav: dove si trovano i collegamenti
Racchiuda il gruppo principale di collegamenti in nav. Indica alle tecnologie assistive che questo blocco è una navigazione, così gli utenti possono trovarlo o saltarlo rapidamente.
<nav>
<a href="/">Home</a>
<a href="/docs">Docs</a>
</nav>main: il contenuto principale
L’elemento main racchiude il contenuto specifico della pagina. È la destinazione che interessa maggiormente agli utenti.
<main>
<h1>Article title</h1>
<p>Body...</p>
</main>footer: la regione inferiore
Un footer a livello di pagina contiene informazioni sul copyright, collegamenti legali e contatti. Gli screen reader lo annunciano come regione contentinfo.
<footer>
<p>© 2026 CoddyKit</p>
</footer>Ruoli impliciti inclusi
Questi tag includono roles ARIA predefiniti: header diventa banner e nav diventa navigation senza attributi aggiuntivi.
Il contesto modifica il ruolo
Un header all’interno di un article è semplicemente l’intestazione di una sezione, non il banner della pagina. Solo un header di livello superiore viene considerato il landmark banner.
Perché div non può farlo
Un div non ha alcun ruolo, quindi uno screen reader non vede nulla a cui passare. I tag landmark trasformano una struttura invisibile in una vera navigazione.
<div class="nav">...</div>L’intera pagina in una mappa
Disponendo insieme i quattro elementi, chi usa uno screen reader percepisce immediatamente la forma della sua page prima ancora di leggere una parola. 🎯
<header>...</header>
<nav>...</nav>
<main>...</main>
<footer>...</footer>Un salto in avanti gratuito
Con i landmark presenti, gli utenti possono jumpare oltre l’header e passare direttamente a main, evitando i collegamenti ripetuti su ogni pagina.
Verifica rapida
Quale landmark racchiude il contenuto specifico e principale di una pagina?
Riepilogo: i quattro grandi elementi
Ha imparato che header, nav, main e footer offrono agli utenti di screen reader una mappa. I tag nativi forniscono gratuitamente i ruoli landmark. 🙌
Domande Frequenti
La lezione «header, nav, main, footer: i quattro grandi elementi» è gratuita?
Sì — il testo completo di «header, nav, main, footer: i quattro grandi elementi» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Web Accessibility Academy, passa a CoddyKit PRO. Il corso Web Accessibility Academy include 4 lezioni in totale.
Cosa imparerò in «header, nav, main, footer: i quattro grandi elementi»?
Racchiuda la pagina nelle aree che gli utenti si aspettano. Eserciti Web Accessibility Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare Web Accessibility Academy?
Non è richiesta alcuna esperienza precedente. Web Accessibility Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 1 di 4.
Quanto tempo richiede la lezione «header, nav, main, footer: i quattro grandi elementi»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione Web Accessibility Academy?
Sì. Ogni lezione Web Accessibility Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- header, nav, main, footer: i quattro grandi elementi
- Inserire i contenuti in main e usare un solo main
- Dare un nome a più aree con aria-label
- Navigazione tra landmark: come si spostano gli utenti