HTML Academy · Lezione

header nav main e footer

Strutturare le principali aree semantiche di una pagina con i tag semantici

header nav main e footer è una lezione HTML 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 HTML Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso HTML Academy include 4 lezioni in totale.

Elementi landmark di HTML5

HTML5 ha introdotto gli elementi landmark che definiscono le regioni della pagina:

<header> — contenuto introduttivo o navigazione
<nav> — link di navigazione
<main> — contenuto principale univoco
<footer> — informazioni a piè di pagina

Sostituiscono i <div> generici con una struttura significativa.

L'elemento header

L'elemento <header> contiene contenuto introduttivo:

<header>
  <a href="/" class="logo">
    <img src="logo.svg" alt="Company name">
  </a>
  <nav>...</nav>
  <button>Sign In</button>
</header>
<!-- header can appear multiple times: page header, article header -->
<!-- But only one page-level header per page is recommended -->

L'elemento nav

L'elemento <nav> racchiude i link di navigazione:

<nav aria-label="Main navigation">
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/products">Products</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>
<!-- Use aria-label to distinguish multiple navs -->
<!-- Not every group of links is a nav — only major navigation -->

Più elementi nav

Una pagina può contenere più elementi <nav>: assegni un'etichetta a ciascuno:

<nav aria-label="Main navigation">...</nav>
<nav aria-label="Breadcrumb">...</nav>
<nav aria-label="Footer links">...</nav>
<!-- aria-label tells screen reader users what each nav is for -->
<!-- Screen readers list landmarks — unique labels help navigation -->

L'elemento main

L'elemento <main> identifica il contenuto principale univoco della pagina:

<main id="main-content">
  <h1>HTML5 Landmark Elements</h1>
  <p>Learn about semantic page structure...</p>
</main>
<!-- Rules:
  - Only ONE main element per page
  - Should not be a descendant of header, footer, aside, nav
  - id="main-content" enables skip links -->
<!-- Assistive tech users jump directly to main -->

L'elemento footer

L'elemento <footer> racchiude le informazioni a piè di pagina:

<footer>
  <p>&copy; 2025 CoddyKit. All rights reserved.</p>
  <nav aria-label="Footer navigation">
    <a href="/privacy">Privacy Policy</a>
    <a href="/terms">Terms of Service</a>
  </nav>
</footer>
<!-- footer can appear multiple times: page footer, article footer -->
<!-- Page footer typically has copyright, links, contact -->

Struttura della pagina

Una struttura semantica completa della pagina:

<body>
  <header>
    <a href="/"><img src="logo.svg" alt="Site name"></a>
    <nav aria-label="Main">...</nav>
  </header>

  <main id="main-content">
    <h1>Page Title</h1>
    <p>Primary content here.</p>
  </main>

  <aside>Related content</aside>

  <footer>
    <p>&copy; 2025 Company</p>
  </footer>
</body>

Link per saltare la navigazione

Aggiunga un link per consentire agli utenti da tastiera di saltare la navigazione:

<a href="#main-content" class="skip-link">Skip to main content</a>

<header>... navigation ...</header>

<main id="main-content" tabindex="-1">
  <h1>Page Heading</h1>
</main>

/* CSS: */
.skip-link {
  position: absolute; top: -100%;
  background: #0070f3; color: white; padding: 0.5rem;
}
.skip-link:focus { top: 0; }

Ruoli landmark

Gli elementi landmark di HTML5 corrispondono ai ruoli landmark ARIA:

<header> → role="banner" (solo a livello di pagina)
<nav> → role="navigation"
<main> → role="main"
<footer> → role="contentinfo" (solo a livello di pagina)
<aside> → role="complementary"

header e footer nelle sezioni

header e footer possono comparire all'interno di <article> e <section>:

<article>
  <header>
    <h2>Article Title</h2>
    <p>By Jane Smith | March 2024</p>
  </header>
  <p>Article content...</p>
  <footer>
    <p>Tags: HTML, CSS</p>
  </footer>
</article>
<!-- In this context, header/footer are NOT banner/contentinfo roles -->
<!-- They are generic sections within the article -->

Errori comuni

Eviti questi errori comuni nell'uso dei landmark semantici:

Usare <nav> per ogni gruppo di link
Inserire più elementi <main> nella stessa pagina
Inserire <main> all'interno di <header> o <nav>
Usare <footer> per contenuti che non sono a piè di pagina

Verifica rapida

Quanti elementi main dovrebbe contenere una pagina?

Riepilogo: header nav main footer

Concetti essenziali degli elementi landmark:

<header> — contenuto introduttivo; può essere ripetuto per ogni sezione
<nav> — navigazione principale; utilizzi aria-label se ce ne sono più di uno
<main> — contenuto principale univoco; esattamente uno per pagina
<footer> — contenuto a piè di pagina; può essere ripetuto per ogni sezione
Aggiunga un link per saltare la navigazione che punti a id="main-content"

Domande Frequenti

La lezione «header nav main e footer» è gratuita?

Sì — il testo completo di «header nav main e footer» è 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 HTML Academy, passa a CoddyKit PRO. Il corso HTML Academy include 4 lezioni in totale.

Cosa imparerò in «header nav main e footer»?

Strutturare le principali aree semantiche di una pagina con i tag semantici Eserciti HTML 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 HTML Academy?

Non è richiesta alcuna esperienza precedente. HTML 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 e footer»?

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 HTML Academy?

Sì. Ogni lezione HTML 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

← Torna a HTML Academy