📋 Struttura base di una tabella HTML
Una tabella HTML è composta da tag annidati con ruoli precisi. I tag fondamentali sono <table>, <tr> (riga), <th> (intestazione) e <td> (cella dati).
<table>
<caption>Prezzi corsi 2026</caption> <!-- titolo tabella (SEO + accessibilità) -->
<thead> <!-- intestazione tabella -->
<tr>
<th scope="col">Corso</th>
<th scope="col">Durata</th>
<th scope="col">Prezzo</th>
</tr>
</thead>
<tbody> <!-- corpo dati -->
<tr>
<td>Web Design</td>
<td>60h</td>
<td>€ 490</td>
</tr>
<tr>
<td>E-commerce</td>
<td>80h</td>
<td>€ 690</td>
</tr>
</tbody>
<tfoot> <!-- piè di pagina (totali, note) -->
<tr>
<td colspan="2">Totale</td> <!-- unisce 2 colonne -->
<td>€ 1.180</td>
</tr>
</tfoot>
</table>
Prezzi corsi 2026
| Corso | Durata | Prezzo |
|---|
| Web Design | 60h | € 490 |
| E-commerce | 80h | € 690 |
| Totale | € 1.180 |
✅ Regola d'oro: usa le tabelle SOLO per dati tabulari (confronti, prezzi, orari). Non usarle per il layout della pagina — per quello esistono CSS Flexbox e Grid.
🔗 Unione di celle — colspan e rowspan
colspan unisce celle orizzontalmente (su più colonne). rowspan unisce celle verticalmente (su più righe).
<table>
<thead>
<tr>
<th rowspan="2">Studente</th> <!-- occupa 2 righe in verticale -->
<th colspan="2">Voti</th> <!-- occupa 2 colonne -->
</tr>
<tr>
<th>Teoria</th>
<th>Pratica</th>
</tr>
</thead>
<tbody>
<tr>
<td>Marco</td>
<td>28</td>
<td>30</td>
</tr>
</tbody>
</table>
| Attributo | Direzione | Esempio |
|---|
colspan="2" | ↔ orizzontale | Cella larga 2 colonne |
rowspan="3" | ↕ verticale | Cella alta 3 righe |
scope="col" | — accessibilità | th si riferisce alla colonna |
scope="row" | — accessibilità | th si riferisce alla riga |
💡 Mnemonica: colspan = colonne-span (orizzontale). rowspan = row-span (verticale). Pensa a "span" come "allungarsi".
📊 colgroup e col — stilare colonne intere
<colgroup> e <col> permettono di applicare stili a colonne intere senza ripetere la classe su ogni cella.
<table>
<colgroup>
<col style="width:50%"> <!-- prima colonna: 50% -->
<col style="background:#FEF3C7"> <!-- seconda: sfondo giallo -->
<col span="2" style="width:25%"> <!-- terza e quarta: 25% cad. -->
</colgroup>
<!-- resto della tabella -->
</table>
⚠️ <col> è un tag vuoto (non ha tag di chiusura separato). Accetta solo gli attributi span e style.
📝 ul — Lista non ordinata
<ul> (unordered list) crea elenchi puntati. Ogni voce è un <li> (list item). Si usa quando l'ordine degli elementi NON è rilevante.
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript
<ul> <!-- lista annidata -->
<li>React</li>
<li>Vue</li>
</ul>
</li>
</ul>
🔢 ol — Lista ordinata
<ol> (ordered list) crea elenchi numerati. Si usa quando la sequenza degli elementi È rilevante (istruzioni, step, classifiche).
<ol type="1" start="1"> <!-- type: 1 A a I i -->
<li>Apri il browser</li>
<li>Vai su volta.it</li>
<li value="5">Iscriviti</li> <!-- forza il numero a 5 -->
</ol>
<!-- ol con lettere maiuscole -->
<ol type="A">
<li>Prima scelta</li>
<li>Seconda scelta</li>
</ol>
- Apri il browser
- Vai su volta.it
- Iscriviti
- Prima scelta
- Seconda scelta
| Attributo | Valori | Risultato |
|---|
| type | "1" "A" "a" "I" "i" | Numeri, maiuscole, minuscole, romani |
| start | numero intero | Da quale numero partire |
| reversed | (booleano) | Conta al contrario: 3, 2, 1 |
| value (su li) | numero intero | Forza il numero di quel singolo elemento |
📖 dl — Lista di definizioni
<dl> (description list) è usata per coppie termine–definizione: glossari, FAQ, metadati, specifiche tecniche.
<dl>
<dt>HTML</dt> <!-- dt = description term -->
<dd>HyperText Markup Language</dd> <!-- dd = description detail -->
<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>
<dd>Gestisce lo stile visivo della pagina</dd> <!-- più dd per lo stesso dt -->
</dl>
- HTML
- HyperText Markup Language
- CSS
- Cascading Style Sheets
- Gestisce lo stile visivo della pagina
✅ Un <dt> può avere più <dd> associati. Più <dt> consecutivi possono condividere lo stesso <dd>.
🏗️ Cos'è l'HTML semantico — e perché conta
L'HTML semantico usa tag il cui nome descrive il significato del contenuto, non solo il suo aspetto. Prima di HTML5 si usavano solo <div> per tutto. I tag semantici dicono al browser, ai motori di ricerca e agli screen reader cosa fa ogni parte della pagina.
| Tag | Significato | Uso tipico |
|---|
<header> | Intestazione | Logo, nav principale, titolo sezione |
<nav> | Navigazione | Menu principale, breadcrumb, paginazione |
<main> | Contenuto principale | Il contenuto unico della pagina (uno solo per pagina) |
<section> | Sezione tematica | Capitolo, blocco argomento, tab |
<article> | Contenuto autonomo | Post blog, news, commento, scheda prodotto |
<aside> | Contenuto correlato | Sidebar, widget, pubblicità, note |
<footer> | Piè di pagina | Copyright, link legali, contatti |
✅ Vantaggi dell'HTML semantico: SEO migliore (Google capisce meglio la struttura), accessibilità (screen reader navigano per landmark), manutenibilità del codice, conformità agli standard W3C.
🖼️ Struttura semantica tipica di una pagina
<body>
<header> <!-- intestazione sito -->
<img src="logo.png" alt="Volta Institute">
<nav> <!-- menu principale -->
<ul>
<li><a href="/">Home</a></li>
<li><a href="/corsi">Corsi</a></li>
</ul>
</nav>
</header>
<main> <!-- contenuto principale — solo 1 per pagina -->
<section> <!-- sezione tematica -->
<h2>I nostri corsi</h2>
<article> <!-- contenuto autonomo -->
<h3>Web Design</h3>
<p>Descrizione del corso...</p>
</article>
<article>
<h3>E-commerce</h3>
<p>Descrizione del corso...</p>
</article>
</section>
<aside> <!-- sidebar correlata -->
<h3>Prossime sessioni</h3>
<p>Settembre 2026...</p>
</aside>
</main>
<footer> <!-- piè di pagina -->
<p>© 2026 Volta Institute — P.IVA 01234567890</p>
</footer>
</body>
<main>
<section> I nostri corsi
<article> Web Design
<article> E-commerce
<aside>
Prossime
sessioni
📰 <article> — contenuto autonomo e riutilizzabile
<article> rappresenta un contenuto autonomo e auto-sufficiente: ha senso anche se estratto dalla pagina e pubblicato altrove (un feed RSS, un'app, un altro sito). Deve avere un titolo (<h1>–<h6>).
| Uso corretto di <article> | NON usare <article> per |
|---|
| Post del blog | Sezioni generiche di layout |
| Articolo di notizie | Contenitore di navigazione |
| Commento utente | Widget senza contenuto testuale autonomo |
| Scheda prodotto e-commerce | Paragrafi senza significato standalone |
| Widget meteo, previsione del tempo | Form di ricerca (usa <section> o <div>) |
<article>
<header> <!-- header DENTRO article — è valido -->
<h2>Come aprire un e-commerce nel 2026</h2>
<p>Di <strong>Marco Consiglio</strong> — 10 luglio 2026</p>
</header>
<p>Scegliere la piattaforma giusta è il primo passo...</p>
<section> <!-- section DENTRO article: capitolo -->
<h3>1. Scegli la piattaforma</h3>
<p>Shopify è ideale per...</p>
</section>
<footer> <!-- footer DENTRO article: tag, condivisione -->
<p>Tag: e-commerce, shopify, 2026</p>
</footer>
</article>
💡 <header>, <footer> e <section> possono stare dentro <article>. I tag semantici si annidano tra loro — non sono solo "blocchi di pagina".
🗂️ <section> — sezione tematica con titolo
<section> raggruppa contenuti correlati attorno a un tema comune. A differenza di <article>, il suo contenuto non ha senso da solo fuori contesto. Deve quasi sempre avere un titolo.
<!-- CORRETTO -->
<section>
<h2>Testimonianze degli studenti</h2> <!-- titolo obbligatorio -->
<article><p>"Corso eccellente!" — Giulia</p></article>
<article><p>"Ho trovato lavoro in 2 mesi." — Luca</p></article>
</section>
<!-- SBAGLIATO — section senza titolo, meglio usare div -->
<section>
<p>Testo generico senza tema specifico...</p>
</section> <!-- qui usa <div> invece -->
⚠️ section vs div: usa <section> quando il blocco ha un titolo e un tema preciso. Usa <div> per raggruppamenti puramente stilistici senza significato semantico.
↔️ <aside> — contenuto tangenzialmente correlato
<aside> contiene informazioni correlate al contenuto principale ma non essenziali per capirlo. Tipicamente è la sidebar, ma non deve essere necessariamente visivamente "laterale".
| Uso corretto di <aside> | NON usare <aside> per |
|---|
| Biografie dell'autore | Contenuto centrale della pagina |
| Articoli correlati / suggeriti | Navigazione principale (usa <nav>) |
| Widget social / tweet recenti | Footer del sito (usa <footer>) |
| Note a margine, citazioni | Sezioni tematiche (usa <section>) |
| Pubblicità banner | Layout puramente decorativo |
<main>
<article>
<h1>Guida a Shopify 2026</h1>
<p>Shopify è la piattaforma...</p>
</article>
<aside> <!-- correlato ma non essenziale -->
<h3>Risorse correlate</h3>
<ul>
<li><a href="#">Guida Wix</a></li>
<li><a href="#">Guida PrestaShop</a></li>
</ul>
</aside>
</main>
🧭 <nav> — blocchi di navigazione
<nav> racchiude blocchi di link di navigazione significativi. Non ogni lista di link è un <nav> — solo le navigazioni principali.
<!-- nav principale nel header -->
<header>
<nav aria-label="Menu principale">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/corsi">Corsi</a></li>
<li><a href="/contatti">Contatti</a></li>
</ul>
</nav>
</header>
<!-- seconda nav nella pagina: breadcrumb -->
<nav aria-label="Breadcrumb">
<ol>
<li><a href="/">Home</a></li>
<li><a href="/corsi">Corsi</a></li>
<li aria-current="page">Web Design</li>
</ol>
</nav>
💡 Se la pagina ha più <nav>, usa aria-label per distinguerli ("Menu principale", "Breadcrumb", "Paginazione") — aiuta gli screen reader.
📌 <header> e <footer> — globali e locali
Questi tag possono apparire sia a livello di pagina (dentro <body>) che dentro <article> o <section>.
| Tag | Dentro <body> | Dentro <article> |
|---|
<header> | Intestazione del sito (logo, nav) | Titolo + autore + data del post |
<footer> | Copyright, link legali, contatti | Tag, condivisione, note legali dell'articolo |
⚠️ <header> e <footer> non possono essere annidati dentro un altro <header> o <footer>. Non possono nemmeno contenere <main>.
♿ Accessibilità — perché i tag semantici non bastano da soli
I tag semantici migliorano l'accessibilità, ma per uno standard WCAG 2.1 completo servono anche attributi ARIA (Accessible Rich Internet Applications) e alcune buone pratiche.
| Elemento | Buona pratica | Esempio |
|---|
| Tabelle dati | Sempre <caption> e scope su th | <th scope="col"> |
| Liste di navigazione | aria-label su ogni <nav> | aria-label="Menu principale" |
| Pagina corrente | aria-current su link attivo | aria-current="page" |
| main | Una sola per pagina, no aria-label | <main> (uno solo) |
| Immagini decorative | alt vuoto per img decorative | alt="" |
| Lingue | lang su <html> | <html lang="it"> |
🧠 Riepilogo — scegliere il tag giusto
DOMANDA: Questo contenuto ha senso da solo fuori contesto?
SÌ → <article> (post, news, scheda prodotto, commento)
NO → continua...
DOMANDA: Raggruppa contenuti con un tema e un titolo?
SÌ → <section> (capitolo, blocco tematico)
NO → continua...
DOMANDA: È correlato ma non essenziale al contenuto principale?
SÌ → <aside> (sidebar, articoli correlati)
NO → continua...
DOMANDA: È intestazione del sito o di una sezione?
SÌ → <header> (logo, nav, titolo sezione)
DOMANDA: È piè di pagina del sito o di un articolo?
SÌ → <footer> (copyright, tag, info autore)
DOMANDA: È un blocco di link di navigazione significativa?
SÌ → <nav> (menu principale, breadcrumb)
DOMANDA: È il contenuto principale univoco della pagina?
SÌ → <main> (uno solo per pagina)
Nessuna delle precedenti → usa <div> (senza significato semantico)
✅ <main> deve essere unico: una sola per pagina, non dentro header/footer/nav/aside. Gli screen reader la usano per saltare direttamente al contenuto principale.