🗓️ Scaletta della lezione
0–5'Perché la semantica
5–17'I tag semantici
17–23'Cartelle e file
23–26'Validare il codice
26–35'Laboratorio finale
35–40'Quiz
📋 Cosa devi sapere alla fine della lezione
- <header> intestazione, <nav> menu di navigazione, <main> contenuto principale (uno per pagina), <footer> piè di pagina.
- <section> raggruppa un tema con un titolo; <article> è un contenuto autonomo; <aside> è un contenuto secondario.
- La semantica aiuta accessibilità, motori di ricerca e la leggibilità del codice.
- Un progetto ordinato ha
index.htmlcome pagina iniziale e cartelle separate (img/,css/), con nomi minuscoli senza spazi. - Il validatore W3C (validator.w3.org) controlla che il codice rispetti lo standard.
1. Da <div> anonimi a zone con un nome
Un lettore vocale, un motore di ricerca o un compagno che legge il tuo codice devono capire subito dov'è il menu e dov'è il contenuto. I tag semantici di HTML5 dicono proprio questo.
struttura semantica<body>
<header>
<h1>Appunti di Informatica</h1>
<nav>
<a href="index.html">Home</a>
<a href="glossario.html">Glossario</a>
</nav>
</header>
<main>
<section id="lezione-1">
<h2>Lezione 1 – Struttura del documento</h2>
<article>
<h3>Il DOCTYPE</h3>
<p>...</p>
</article>
</section>
<aside>
<h3>Da ripassare</h3>
<p>Annidamento dei tag</p>
</aside>
</main>
<footer>
<p>Mario Rossi · 3ª AG · IIS Olivetti</p>
</footer>
</body>| Tag | Ruolo | Quanti per pagina |
|---|---|---|
<header> | Intestazione della pagina o di una sezione | Anche più di uno |
<nav> | Blocco di link di navigazione principale | Di solito uno o due |
<main> | Contenuto principale, unico della pagina | Uno solo |
<section> | Parte tematica con un proprio titolo | Quante servono |
<article> | Contenuto autonomo (post, scheda, notizia) | Quanti servono |
<aside> | Contenuto collaterale (box, approfondimento) | Quanti servono |
<footer> | Piè di pagina: autore, contatti, note | Anche più di uno |
2. Organizzare cartelle e file
progetto ordinatoappunti-informatica/
├── index.html ← pagina iniziale (si apre per prima)
├── glossario.html
├── css/
│ └── style.css ← (dalla 4ª: lo stile)
└── img/
├── von-neumann.png
└── cpu.jpgindex.htmlè il nome che il server apre automaticamente.- Nomi di file e cartelle: minuscoli, senza spazi né accenti, parole separate da trattino.
- Per consegnare un progetto con più file: comprimi l'intera cartella in uno .zip.
3. Validare il codice
Un browser “perdona” molti errori e mostra la pagina lo stesso, ma un altro browser potrebbe mostrarla diversamente. Un professionista valida sempre il codice:
- Apri validator.w3.org e scegli Validate by Direct Input.
- Incolla il codice completo (nel playground: 📋 Copia).
- Correggi gli errori dall'alto verso il basso: spesso un tag non chiuso ne genera molti altri.
4. Laboratorio finale: il sito degli appunti
✍️ Compito (9 minuti + casa)
- Ristruttura i tuoi appunti con
header,nav,main, unasectionper lezione e unfooter. - Sposta il glossario in un file separato
glossario.htmle collegalo dal menu. - Valida entrambe le pagine con il validatore W3C fino a zero errori.
- Comprimi la cartella
appunti-informaticain .zip e consegnala dalla pagina Consegna Elaborati.
Il codice che scrivi resta salvato in questo browser. Usa 💾 Esporta .html per scaricarlo e consegnarlo.
🎯 Quiz di Autovalutazione (10 Domande)
Seleziona una risposta per ogni domanda e premi il pulsante finale per vedere il punteggio, l'esito e le spiegazioni.
Esito Finale del Questionario
0 / 10