Inserire i contenuti in main e usare un solo main
Definisca l'unica area principale dei contenuti.
Inserire i contenuti in main e usare un solo main è una lezione Web Accessibility Academy gratuita su CoddyKit. Questa è la lezione 2 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.
main è il protagonista
Ogni pagina ha una stella: il suo contenuto unico. L'elemento main è il luogo in cui si trova questo contenuto, separato da intestazioni e piè di pagina.
Un solo main, sempre
Una pagina dovrebbe avere esattamente un landmark main. Due elementi main confondono gli utenti, che si aspettano un'unica destinazione principale.
Cosa inserire al suo interno
Inserisca il contenuto principale della pagina in main: l'articolo, il modulo, il dashboard. Ciò per cui l'utente è effettivamente arrivato.
<main>
<h1>Your dashboard</h1>
<p>Today's stats...</p>
</main>Cosa lasciare all'esterno
Gli elementi ripetuti, come il logo del sito, la navigazione globale e i link del piè di pagina, si trovano all'esterno di main, perché non sono unici di questa pagina.
La destinazione del link per saltare
Un link per saltare punta a main, così gli utenti che usano la tastiera possono passare direttamente al contenuto, oltrepassando l'intestazione ripetuta in ogni pagina.
<a href="#main">Skip to content</a>
<main id="main">...</main>Rendere main focalizzabile
Aggiunga a main un tabindex pari a -1, così un link per saltare può spostare lo stato attivo al suo interno senza renderlo raggiungibile autonomamente con Tab.
<main id="main" tabindex="-1">
...
</main>Due main, una regola nascosta
Se ha davvero bisogno di un secondo main, tutti tranne uno devono essere hidden e quindi non visibili. Alla volta è consentito un solo main visibile.
Non annidare main
L'elemento main non può trovarsi all'interno di article, aside, nav, header o footer. Si trova al livello superiore del body della pagina.
Il fallback role main
Per browser molto datati può aggiungere role con valore main come soluzione di riserva, ma l'elemento main nativo è la scelta moderna corretta.
<main role="main">...</main>Perché un solo main è utile
Con un solo main, chi usa uno screen reader preme un tasto e raggiunge esattamente il contenuto, in ogni pagina e ogni volta. 🎯
Una struttura di pagina ordinata
Header, poi nav, poi un solo main, infine footer. Questa struttura prevedibile rende la pagina facile da esplorare ascoltandola.
Verifica rapida
Quanti landmark main visibili dovrebbe esporre una singola pagina?
Riepilogo: un main chiaro
Ha imparato a inserire il contenuto unico in un solo main, a lasciare all'esterno le parti ripetute e a usarlo come destinazione del link per saltare. 🙌
Domande Frequenti
La lezione «Inserire i contenuti in main e usare un solo main» è gratuita?
Sì — il testo completo di «Inserire i contenuti in main e usare un solo main» è 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 «Inserire i contenuti in main e usare un solo main»?
Definisca l'unica area principale dei contenuti. 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 2 di 4.
Quanto tempo richiede la lezione «Inserire i contenuti in main e usare un solo main»?
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