Layout semantico e tabelle
I tag semantici per la struttura
Nei capitoli iniziali abbiamo visto <div> come contenitore generico.
Ora vediamo i tag che HTML5 offre per dare un nome alle grandi aree di una pagina, invece di usare solo <div> ovunque:
<body>
<!-- l'intestazione della pagina web: loghi, titolo, menù di navigazione -->
<header>
<h1>Il mio sito</h1>
<!-- il menù di navigazione principale -->
<nav>
<a href="index.html">Home</a>
<a href="chi_sono.html">Chi sono</a>
<a href="contatti.html">Contatti</a>
</nav>
</header>
<!-- il contenuto principale della pagina: ovviamente ci sarà un solo main per ogni pagina!!! -->
<main>
<!-- un contenuto autonomo, inserito qui: un articolo, una sezione, un post, una news... -->
<article>
<h2>Titolo articolo</h2>
<p>Contenuto dell'articolo...</p>
</article>
<!-- un contenuto correlato, inserito qui: ad esempio, un articolo secondario o un approfondimento -->
<aside>
<h3>Articoli correlati</h3>
<ul>
<li><a href="#">Un altro articolo</a></li>
</ul>
</aside>
</main>
<!-- il piè di pagina: crediti per l'autore, il copyright, link importanti da evidenziare -->
<footer>
<p>© 2026 Il mio sito</p>
</footer>
</body>
Vediamo una tabella riassuntiva dei tag semantici utilizzati:
| Tag | Descrizione |
|---|---|
<header> | Intestazione della pagina (o di una sezione): loghi, titolo, a volte la navigazione |
<nav> | Un blocco di link di navigazione principali |
<main> | Il contenuto principale della pagina (uno solo per pagina) |
<article> | Un contenuto autonomo, che avrebbe senso anche da solo (un post di blog, una notizia) |
<aside> | Contenuto correlato ma secondario (una sidebar, un box di approfondimento) |
<footer> | Piè di pagina: crediti, copyright, link secondari |
Nessuno di questi tag cambia l’aspetto grafico di default (per quello serve il CSS) — il vantaggio è semantico:
un motore di ricerca o uno screen reader capisce la struttura logica della pagina, non solo un mucchio di <div> indistinguibili.
Tip
Una buona domanda da farsi: “questo blocco di contenuto ha già un nome preciso (intestazione, articolo, barra laterale…)?”
Se sì, usa il tag semantico. Se è davvero solo un contenitore senza ruolo specifico (ad esempio per raggruppare elementi ai fini del CSS), allora
<div>va benissimo.
Tabelle
Le tabelle servono per dati tabellari — righe e colonne di informazioni collegate
Warning
In passato (prima degli smartphone) le tabelle venivano usate per organizzare il layout…
Non vi azzardate!!!
Per i layout si usa il CSS!!!
<table>
<thead>
<tr>
<th>Nome</th>
<th>Voto</th>
</tr>
</thead>
<tbody>
<tr>
<td>Anna</td>
<td>8</td>
</tr>
<tr>
<td>Marco</td>
<td>7</td>
</tr>
</tbody>
</table>
<table>racchiude tutta la tabella<thead>contiene la riga (o le righe) di intestazione<tbody>contiene le righe di dati veri e propri<tr>(table row) è una riga<th>(table header) è una cella di intestazione (in grassetto e centrata di default)<td>(table data) è una cella di dato normale
Una cella può occupare più colonne o più righe con colspan/rowspan:
<tr>
<td colspan="2">Questa cella occupa 2 colonne</td>
</tr>
Esercizi
Esercizio w131
Crea la struttura semantica di una pagina con <header> (contenente un <h1> e una <nav> con 3 link), <main> con un <article>, e <footer> con una riga di copyright.
Esercizio w132
Crea una tabella con intestazione (<thead>) che riporti “Materia” e “Ore settimanali”, e almeno 4 righe di dati (<tbody>) con materie scolastiche a scelta.
Esercizio w133
Nel seguente codice, un blocco che dovrebbe essere una sidebar di approfondimento usa <div> invece del tag semantico corretto, e una tabella usa <div> per le righe invece di <tr>/<td>. Correggi entrambi i problemi:
<div>
<h3>Vedi anche</h3>
<a href="#">Altro articolo</a>
</div>
<table>
<div>
<div>Nome</div>
<div>Anna</div>
</div>
</table>
Esercizio w134
Prendi la pagina del profilo/scheda prodotto dell’esercizio del Progetto 1 (se non l’hai ancora iniziata, va bene anche una pagina qualsiasi con <header>/<main>/<footer>) e aggiungi una tabella con almeno 2 righe e 2 colonne di dati a tua scelta, coerenti col contenuto della pagina.