Tag semantici HTML5

Obiettivo della lezione

Usare header, nav, main, section, article, aside e footer per dare significato alla pagina.

Spiegazione

I tag semantici aiutano browser, motori di ricerca e tecnologie assistive a capire le parti della pagina. Non cambiano automaticamente l’aspetto, ma migliorano struttura e manutenzione.

Una pagina moderna dovrebbe avere un solo main, una navigazione chiara e sezioni organizzate.

Idea chiave: in HTML devi scegliere il tag in base al significato del contenuto. La grafica verrà gestita in seguito con CSS.

Codice di esempio

Studia il blocco seguente e prova a copiarlo in un file HTML, modificando testi e contenuti.

<header>Logo e titolo</header>
<nav>Menu principale</nav>
<main>
  <article>
    <h1>Titolo articolo</h1>
    <p>Testo dell’articolo.</p>
  </article>
</main>
<footer>Informazioni finali</footer>

Errori comuni

Usare solo div per qualsiasi cosa.
Inserire più main nella stessa pagina.
Usare section senza un titolo logico.

Esercizio pratico

Crea una nuova pagina partendo dalla struttura base. Applica l’argomento di questa lezione a un contenuto reale: una pagina corso, una scheda personale o una piccola pagina informativa.

Apri il tuo editor.
Crea o aggiorna un file .html o .asp.
Inserisci il codice della lezione.
Modifica testi e attributi.
Apri la pagina nel browser e controlla il risultato.

Lezioni collegate

Continua il laboratorio

Procedi con la lezione successiva oppure passa agli esercizi per consolidare subito i concetti.

Precedente Successiva