Struttura e semantica in HTML

2026
Lezione 05

Perché la semantica conta

Fino a qualche anno fa le pagine erano costruite quasi solo con <div> generici. HTML5 ha introdotto elementi che descrivono il significato di una sezione, non solo il suo aspetto. Questo aiuta:

I motori di ricerca a capire meglio la struttura della pagina (SEO).
Le tecnologie assistive (screen reader) a orientare chi naviga con disabilità visive.
Chi legge il codice, incluso te stesso tra sei mesi.

I principali elementi semantici

<header>: intestazione della pagina o di una sezione
<nav>: blocco di navigazione (menu)
<main>: il contenuto principale della pagina (uno solo per pagina)
<section>: una sezione tematica di contenuto
<article>: un contenuto autonomo e riutilizzabile (un post, una scheda prodotto)
<aside>: contenuto collaterale (barra laterale, box di approfondimento)
<footer>: piè di pagina

<body>
  <header>
    <h1>Nome del sito</h1>
    <nav>
      <a href="#">Home</a>
      <a href="#">Chi siamo</a>
    </nav>
  </header>

  <main>
    <article>
      <h2>Titolo articolo</h2>
      <p>Testo dell'articolo...</p>
    </article>
  </main>

  <footer>
    <p>&copy; 2026 Nome del sito</p>
  </footer>
</body>

Meta elements

I tag <meta> vivono nel <head> e forniscono informazioni sulla pagina che non sono visibili nel contenuto, ma sono lette dal browser e dai motori di ricerca:

<meta charset="UTF-8">
<meta name="description" content="Breve descrizione della pagina, mostrata nei risultati di ricerca.">
<meta name="viewport" content="width=device-width, initial-scale=1">

charset: la codifica dei caratteri (UTF-8 gestisce correttamente lettere accentate, simboli, emoji).
description: la meta description che Google spesso mostra sotto il titolo nei risultati di ricerca — è uno dei campi SEO su cui lavoriamo in ogni articolo.
viewport: essenziale per la resa corretta su smartphone — lo ritroveremo quando parleremo di responsive design nel modulo CSS.

iFrame

Un <iframe> incorpora un’altra pagina web dentro la tua, come una finestra — è così che si integrano mappe di Google Maps o video di YouTube su un sito.

<iframe src="https://www.openstreetmap.org/export/embed.html" width="600" height="400"></iframe>

Da usare con attenzione: rallenta il caricamento della pagina e va sempre verificato che la fonte sia affidabile.

Esercitazione pratica

Riscrivi una pagina precedente sostituendo i <div> generici con gli elementi semantici corretti, e aggiungi al <head> i meta tag charset, description e viewport.

Approfondisci

MDN — HTML semantico