HTML: struttura e senso

Partiamo da un punto fondamentale: HTML non è un linguaggio di programmazione. Non compie calcoli, non prende decisioni logiche e non sa fare operazioni matematiche. HTML sta per HyperText Markup Language (Linguaggio di Marcatura Ipertestuale).

Il suo unico scopo è "marcare" il testo puro per dire al browser: "Questo pezzo è un titolo, questa frase è un paragrafo e questo elemento è un pulsante".

Quando scrivi un file HTML e lo apri, il browser lo legge e crea una struttura ad albero chiamata DOM (Document Object Model). Immaginalo come una ramificazione di scatole: la scatola principale contiene scatole più piccole, che a loro volta contengono testi o altre scatole. CSS e JavaScript agiranno in seguito proprio su questo albero. Senza un HTML solido, non avrebbero nulla da stilizzare o animare.

Ora che abbiamo un'idea di come il browser organizza le informazioni in scatole (il DOM), iniziamo a creare la nostra prima scatola. Per farlo, partiamo dall'elemento base dell'HTML: il tag.

Per dare una struttura a una pagina web, HTML usa i tag (che in inglese significa letteralmente "etichette"). Immagina di avere del testo semplice e di voler dire al browser: "Questo pezzo di testo è un paragrafo, mentre quest'altro è un titolo". Per farlo, "incolli" un'etichetta prima e dopo il testo.

Queste etichette si scrivono racchiuse tra parentesi angolari (i simboli di minore < e maggiore >) e, nella maggior parte dei casi, lavorano sempre in coppia:

• Il tag di apertura (l'inizio): indica l'inizio del nostro elemento. Si scrive inserendo il nome dell'etichetta tra le parentesi angolari. Ad esempio, per iniziare un paragrafo usiamo il tag <p> (la "p" sta per paragraph).
• Il contenuto: è tutto ciò che si trova racchiuso tra l'etichetta iniziale e quella finale (ad esempio, il testo del paragrafo).
• Il tag di chiusura (la fine): indica al browser dove finisce l'elemento. È identico a quello di apertura, ma contiene una barra obliqua / (chiamata slash) posizionata subito dopo la prima parentesi angolare, in questo modo: </p>. Pensa alla barra come a un cartello di "stop".

L'unione di queste tre parti (tag di apertura + contenuto + tag di chiusura) forma quello che in gergo si chiama elemento HTML.

I tag possono contenere anche degli attributi, ovvero delle informazioni extra inserite esclusivamente all'interno del tag di apertura. Gli attributi servono a specificare caratteristiche o comportamenti dell'elemento (come la destinazione di un link o la sorgente di un'immagine) e si scrivono sempre nella forma nome-attributo="valore" (detta anche coppia chiave="valore").

Vediamo l'esempio di un link (il tag <a>):

In questo esempio:

• La chiave (o nome dell'attributo) è href, che indica al browser: "Voglio impostare un indirizzo web di destinazione".
• Il valore è "https://codedge.it" (scritto sempre tra virgolette dopo il segno di uguale =), che definisce l'indirizzo web specifico.

Alcuni tag rari non contengono testo e non racchiudono nulla, quindi non hanno bisogno di un tag di chiusura. Vengono chiamati tag vuoti (o auto-chiudenti). Un esempio è il tag <img> per mostrare un'immagine o <br> per andare a capo.

La regola del Nesting (Annidamento)

In HTML, quando inseriamo un tag all'interno di un altro, parliamo di Nesting (annidamento). Immagina questa struttura come una serie di scatole cinesi o matrioske: una scatola più piccola deve essere inserita interamente dentro una scatola più grande.

C'è una regola d'oro semplicissima da ricordare per non sbagliare mai:

Per capire questo concetto in modo semplicissimo, pensa alle parentesi che usi quando scrivi a mano. Se apri una parentesi tonda ( e poi una parentesi quadra [, devi obbligatoriamente chiudere prima la quadra e poi la tonda. Non puoi incrociarle in questo modo: ( [ ) ].

Vediamo il confronto diretto tra la struttura errata e quella corretta.

<p>Questo testo è <strong>molto importante.</p></strong>

<p>Questo testo è <strong>molto importante.</strong></p>

Sebbene i browser moderni facciano del loro meglio per "correggere" da soli gli errori di nesting, farlo li costringe a rallentare e a indovinare le tue intenzioni. Questo porta spesso a bug grafici inaspettati, problemi sui dispositivi mobili o difficoltà per le persone che usano lettori di schermo per non vedenti.

Ora che sai come scrivere un singolo tag, come impostare gli attributi e come incastrare le scatole l'una dentro l'altra senza fare errori, proviamo a unire tutti questi pezzi. Nel prossimo capitolo vedremo lo scheletro di partenza comune a qualsiasi pagina internet esistente.

Nei capitoli precedenti abbiamo visto come il browser costruisce l'albero e come i tag si annidano senza incrociarsi. Ora apriamo un file vero.

Lo scheletro di una pagina è l'intero documento HTML: ogni tag che il browser trasformerà nel DOM. Il boilerplate è più stretto. È solo il kit di partenza: i pochi tag principali già annidati al posto giusto. In VS Code lo ottieni digitando ! e premendo Invio.

Il file inizia con una dichiarazione (DOCTYPE), poi il tag radice <html>. Dentro ci stanno due scatole: <head>, invisibile in pagina, con i meta e il title; e <body>, quello che si vede. Il widget sotto le smonta una alla volta.

La regola da portarsi dietro è quella del capitolo 2: l'ultimo tag aperto è il primo che chiudi. <head> e <body> stanno interamente dentro <html>; i tag meta e il title stanno interamente dentro <head>.

Ora entriamo nel <body> e iniziamo a riempirlo. Il primo mattone è il testo.

Che cos'è il tag <body>?

Il tag <body> (che in inglese significa "corpo") rappresenta a tutti gli effetti la tela visibile del tuo sito web. Tutto ciò che un utente vede, legge, clicca o con cui interagisce all'interno della finestra del browser — testi, titoli, immagini, video, pulsanti, menu di navigazione, form per i contatti — deve essere posizionato tassativamente all'interno di questa scatola.

Nel capitolo precedente abbiamo visto che una pagina HTML è divisa in due aree principali: l'<head>, che contiene informazioni per il browser, e il <body>, che contiene ciò che appare nella pagina. Per distinguerle meglio, pensa alla struttura di una lettera cartacea:

• Il <body> è il foglio di carta interno: contiene il messaggio vero e proprio, le parole scritte, i disegni o gli allegati. È la parte che il lettore vede e consulta.
• L'<head>, invece, è paragonabile alla busta: contiene informazioni necessarie per identificare e gestire la lettera, ma non il messaggio destinato al lettore.

Ci sono tre regole d'oro da tenere sempre a mente quando si lavora con il <body>:

Ora che abbiamo chiaro cos'è questo spazio e perché esiste, iniziamo a riempirlo. Il caso più comune è il testo.

Se scrivi le frasi nude nel <body> e vai a capo nell'editor, il browser le unisce in una riga sola: gli a capo del file non contano. Per fare un blocco serve il tag <p>.

Per spezzare un testo lungo servono i titoli, da <h1> a <h6>. Il numero non è la grandezza del carattere: è il livello nell'indice della pagina. Il widget sotto mostra le stesse parole in quattro strutture.

<body>
  Corso di cucina
  Questa è la prima frase.
  Questa dovrebbe essere una frase separata.
</body>

<body>
  <p>Questa è la prima frase.</p>
  <p>Questa è una frase separata.</p>
</body>

<h1>Corso di cucina</h1>
<h2>Gli attrezzi</h2>
<h3>I coltelli</h3>
<h3>Le pentole</h3>
<h2>Le prime ricette</h2>

<!-- «h2 è troppo grosso, uso h4» -->
<h1>Corso di cucina</h1>
<h4>Gli attrezzi</h4>

Il paragrafo: <p>

Un <p> racchiude un pensiero compiuto. Hai già visto che è il tag, non Invio, a creare il blocco. Una regola in più, perché il browser non ti avvisa:

I titoli: da <h1> a <h6>

Ci sono sei tag di intestazione. Il widget ha mostrato l'idea: il numero è la profondità nell'indice, come i numeri del sommario di un libro. Quell'indice è ciò che Google e gli screen reader usano per saltare da una sezione all'altra.

Le tre regole dei titoli

• Un solo <h1> per pagina. È il titolo del documento, quindi ce n'è uno solo, come il titolo di un libro.
• Non saltare i livelli. Dopo un <h2> puoi mettere un <h3>, non direttamente un <h4>: nell'indice apparirebbe un buco.
• Scegli il livello in base alla logica, mai in base a quanto è grande a schermo. Il browser dà ai titoli una dimensione predefinita solo per comodità: quella dimensione la cambierai con il CSS, senza toccare il tag.

Con titoli e paragrafi si stabilisce l'ossatura generale di una pagina. Avrai però notato che questi elementi iniziano su una nuova riga, mentre altri tag possono marcare singole parole senza interrompere il testo. Nel prossimo capitolo mettiamo a confronto questi due comportamenti — a blocco e in linea — prima di scoprire i tag che lavorano dentro le frasi.

Prima di imparare altri tag serve una mappa di come il browser li dispone nella pagina.

Un elemento a blocco (block) inizia su una nuova riga e prende tutta la larghezza disponibile. Per questo due paragrafi o due titoli finiscono uno sotto l'altro, anche quando il testo è corto.

Un elemento in linea (inline) non apre una nuova riga: occupa solo lo spazio delle sue lettere e resta nel flusso della frase. Serve a marcare una parola senza spezzare il paragrafo. Esempi: <strong>, <em>, <code>, <a>.

L'in linea vive dentro un blocco, non il contrario. E <br> non serve a fare spazio tra due scatole: serve quando l'a capo è parte del testo, come in un indirizzo. Il widget sotto mostra questi quattro punti.

<p>Corto.</p>
<p>Corto anche questo.</p>

<p>
  Il tag <strong>title</strong>
   è <code>obbligatorio</code>.
</p>

<p>Primo blocco.</p>
<p>
  Qui dentro <strong>resto in linea</strong>.
</p>

<!-- sbagliato: fare spazio -->
<p>Sopra</p>
<br><br><br>
<p>Sotto</p>

<!-- giusto: l'a capo è il contenuto -->
<p>
  Codedge S.r.l.<br>
  Via Roma 12
</p>

Gli elementi a blocco che userai davvero

Elementi in linea

Oltre a quelli già visti, restano in linea anche <span>, <abbr> e <img>.

Marcare le parole con i tag in linea

Ora concentriamoci sugli elementi in linea che servono a dare un significato preciso a una o più parole senza interrompere il flusso del paragrafo.

<p>Ricorda: il tag <code>&lt;title&gt;</code> è <strong>obbligatorio</strong> in ogni pagina.</p>

La frase resta una frase sola: <strong> e <code> non creano un nuovo blocco, marcano una porzione di testo esistente.

I tag in linea che userai davvero

<p>
  L'<abbr title="HyperText Markup Language">HTML</abbr> nasce nel
  <time datetime="1991">1991</time>. La formula dell'acqua è
  H<sub>2</sub>O e il prezzo è <del>20 €</del> <ins>15 €</ins>.
</p>

<strong> o <b>? <em> o <i>?

Esistono anche <b> e <i>, che a schermo danno lo stesso identico risultato (grassetto e corsivo). Non sono tag eliminati dallo standard, ma hanno un significato diverso: indicano un testo graficamente distinto senza attribuirgli importanza (per esempio un nome scientifico in corsivo, o le parole chiave di un articolo in neretto).

Andare a capo per davvero: <br> e <hr>

Abbiamo detto che premere Invio nel codice non manda a capo. Quando l'andata a capo fa parte del contenuto — un indirizzo postale, i versi di una poesia — si usa il tag vuoto <br>:

<p>
  Codedge S.r.l.<br>
  Via Roma 12<br>
  00100 Roma
</p>

Il tag <hr>, anch'esso vuoto, segna invece uno stacco tematico tra due parti di contenuto (il browser lo disegna come una linea orizzontale). Anche qui: se ti serve solo una linea decorativa, usa il CSS.

Scrivere caratteri speciali: le entità

Cosa succede se vuoi mostrare a schermo proprio il simbolo <? Il browser penserebbe che stai aprendo un tag. Per questo esistono le entità HTML: sequenze che iniziano con & e finiscono con ;.

Per lettere accentate ed emoji non servono entità: basta che il file dichiari <meta charset="UTF-8">, come nel boilerplate del capitolo 3.

I commenti

Puoi lasciare note nel codice che il browser ignora completamente, racchiudendole tra <!-- e -->:

<!-- Sezione offerte: da aggiornare ogni lunedì -->
<p>Sconto del 20% su tutto il catalogo.</p>

Blocco e in linea non decidono da soli l'annidamento

La disposizione sullo schermo non basta a stabilire quali tag possano stare dentro altri tag. Ogni elemento HTML ammette determinati tipi di contenuto: per esempio, un <p> può contenere testo ed elementi che marcano le parole, ma non strutture come titoli, altri paragrafi o <div>.

Il tag <a> è un caso particolare: può racchiudere sia una porzione di testo sia, quando il contesto lo consente, un intero blocco di contenuto. Questo permette di rendere cliccabile un'intera scheda anziché soltanto le sue parole:

<a href="/prodotti/tazza/">
  <h3>Tazza Codedge</h3>
  <p>Ceramica smaltata, 350 ml.</p>
</a>

Ora sai riconoscere i due comportamenti più comuni, usare i tag che marcano il testo e non confondere la resa grafica con la struttura del documento. Manca un pezzo trasversale: gli attributi che puoi mettere sui tag e che useremo di continuo nei prossimi capitoli.

Fino ad ora abbiamo visto attributi che funzionano solo su alcuni tag: href, per esempio, ha senso su un link ma non su un paragrafo. L'HTML mette anche degli attributi globali: li puoi scrivere su qualsiasi elemento.

I due che contano di più sono id e class. Entrambi sono etichette, così puoi ritrovare un elemento più avanti. Cambia solo quante volte l'etichetta può comparire:

• id è un nome unico, come un numero di matricola. In una pagina può esistere una sola volta.
• class è un nome di gruppo. La stessa classe può stare su quanti elementi vuoi, e un elemento può avere più classi separate da uno spazio.

Da soli non cambiano colore, misura o posizione. Preparano il terreno per un link, un foglio di stile o del JavaScript. Nell'HTML si scrive solo il nome: niente # e niente .. Il widget sotto mostra questi quattro punti.

<p id="contatti">Dove trovarci</p>
<p class="avviso">Spedizioni regolari.</p>
<p>Nessuna etichetta.</p>

<h2 id="contatti">Dove trovarci</h2>
<p>Via Roma 12.</p>

<p class="avviso">Spedizioni regolari.</p>
<p class="avviso urgente">Ultimo giorno per ordinare.</p>
<p>Fuori dal gruppo.</p>

<!-- sbagliato -->
<h2 id="#contatti">
<p class=".avviso">

<!-- giusto -->
<h2 id="contatti">
<p class="avviso">

1. L'attributo id: un nome unico

L'id assegna un nome che identifica un singolo elemento della pagina. Si scrive come qualunque altro attributo, dentro il tag di apertura:

<h2 id="contatti">Dove trovarci</h2>
<p>Siamo in via Roma 12, aperti dal lunedì al venerdì.</p>

A cosa serve avere un nome unico?

• Nell'HTML: per creare link che portano a un punto preciso della pagina (le ancore, che vedremo nel prossimo capitolo) e per collegare l'etichetta di un modulo al suo campo di inserimento.
• Nel CSS: per applicare uno stile a quell'unico elemento.
• In JavaScript: per raggiungere quell'elemento specifico e modificarlo, per esempio in risposta a un clic.

2. L'attributo class: un'etichetta di gruppo

La class raggruppa elementi sotto una categoria comune. La stessa classe può comparire su quanti elementi vuoi:

<p class="avviso">Le spedizioni sono regolari.</p>
<p class="avviso">Ultimo giorno utile per ordinare!</p>
<p>Questo paragrafo non ha classi: non fa parte del gruppo.</p>

Un elemento può anche appartenere a più gruppi contemporaneamente: basta scrivere i nomi separati da uno spazio. Non è "una classe con lo spazio dentro", sono due classi distinte:

<p class="avviso urgente">Consegne sospese oggi.</p>

A cosa serve raggruppare?

• Nel CSS: per dare lo stesso aspetto a tutti gli elementi del gruppo scrivendo la regola una volta sola.
• In JavaScript: per agire su tutti gli elementi del gruppo con una sola istruzione.
• Per chi legge il codice: un nome come scheda-prodotto racconta a colpo d'occhio che ruolo ha quell'elemento.

Altri attributi globali utili

Oltre a questi due, ce ne sono altri che ti capiterà di incontrare spesso:

Ad esempio, se in una pagina scritta in italiano inserisci una frase o una citazione in inglese, è un'ottima pratica segnalarlo così:

<p>Il motto dell'azienda è <span lang="en">think different</span>.</p>

In questo modo i lettori vocali usati da chi ha difficoltà visive pronunceranno la frase all'inglese, anziché leggerla all'italiana.

Ora che sai dare un id a un elemento, possiamo affrontare il tag che ha reso il web una rete: il link.

Il collegamento ipertestuale è ciò che trasforma pagine isolate in un sito, e i siti in un web. Si crea con il tag <a> (anchor, ancora) e il suo attributo href (hypertext reference), che indica la destinazione.

<a href="https://codedge.it">Vai al sito di Codedge</a>

Il testo tra i due tag è la parte cliccabile e visibile; href è l'indirizzo, che l'utente non vede. Un <a> senza href non è un link: è solo testo.

Le destinazioni possibili

I percorsi relativi, spiegati una volta per tutte

È il punto in cui si inciampa spesso per un motivo preciso: guardando il progetto viene naturale leggere ogni percorso dalla cartella principale sito/. Il browser, invece, usa come punto di partenza la cartella della pagina che contiene il link.

Aprire in una nuova scheda

L'attributo target="_blank" apre la destinazione in una scheda nuova, lasciando aperta la pagina di partenza.

<a href="https://github.com" target="_blank" rel="noopener noreferrer">
  Apri GitHub in una nuova scheda
</a>

L'attributo rel="noopener" impedisce alla pagina di destinazione di manipolare quella di partenza tramite JavaScript; noreferrer evita anche di comunicarle da dove arriva il visitatore. I browser recenti applicano noopener da soli con target="_blank", ma scriverlo resta l'abitudine corretta e copre i browser più vecchi.

Scrivere un buon testo di link

Chi usa uno screen reader può chiedere l'elenco di tutti i link della pagina, letti fuori dal contesto. Una lista di dodici voci "clicca qui" è inutilizzabile.

Il testo del link deve descrivere la destinazione anche letto da solo. È la regola di accessibilità sui link, e vale anche come buona pratica SEO.

Le pagine ora si parlano tra loro. Aggiungiamo il contenuto visivo.

Le immagini si inseriscono con <img>, un tag vuoto: non racchiude nulla e non ha tag di chiusura, quindi tutte le informazioni passano dagli attributi.

<img src="/images/gatto-rosso.webp"
     alt="Gatto rosso addormentato su un divano grigio"
     width="800" height="600">

Scrivere l'alt giusto

L'attributo alt viene letto dagli screen reader, appare se il file non si carica e viene usato dai motori di ricerca. Non esiste un testo "giusto" in assoluto: dipende dal ruolo che l'immagine ha nella pagina.

• L'immagine porta informazione → descrivi l'informazione: alt="Grafico: le vendite crescono del 30% nel 2025".
• L'immagine è dentro un link o un pulsante → descrivi la destinazione, non il disegno: alt="Torna alla home", non alt="logo".
• L'immagine è puramente decorativa → lascia l'attributo vuoto: alt="". Così lo screen reader la salta, invece di leggere il nome del file.
• Il testo è già scritto accanto all'immagine → alt="", per non far ripetere due volte la stessa cosa.

Perché indicare width e height

Il browser disegna la pagina prima di aver finito di scaricare le immagini. Se non sa quanto spazio riservare, dispone il testo e poi lo fa saltare via quando l'immagine arriva: è il fastidioso layout shift, che ti fa perdere il punto in cui stavi leggendo. Indicando le dimensioni reali del file, lo spazio viene riservato subito.

Quale formato scegliere

• WebP / AVIF: la scelta predefinita oggi. Stessa qualità di JPEG e PNG con file molto più leggeri.
• JPEG: fotografie, quando serve la massima compatibilità.
• PNG: immagini con sfondo trasparente o grafica a tinte piatte.
• SVG: loghi, icone e diagrammi. È un formato vettoriale: resta nitido a qualsiasi dimensione e pesa pochissimo.

Immagine con didascalia: <figure>

Quando l'immagine ha una didascalia, non metterla in un <p> qualsiasi: non ci sarebbe alcun legame tra le due. Usa <figure> per raggruppare e <figcaption> per la didascalia.

<figure>
  <img src="/immagini/schema-client-server.png"
       alt="Il browser invia una richiesta al server, che risponde con la pagina"
       width="600" height="400" loading="lazy">
  <figcaption>Figura 1 — Il ciclo richiesta/risposta tra client e server.</figcaption>
</figure>

La didascalia descrive l'immagine per chi la vede; alt la sostituisce per chi non la vede. Sono due testi diversi con due scopi diversi: evita di copiare l'uno nell'altro.

Video e audio

Video e audio funzionano allo stesso modo, con l'attributo controls che mostra i comandi di riproduzione:

<video src="/media/demo.mp4" controls width="640" poster="/media/anteprima.jpg">
  Il tuo browser non supporta i video. <a href="/media/demo.mp4">Scarica il file</a>.
</video>

Il testo dentro il tag appare solo se il browser non riesce a riprodurre il file. L'attributo poster indica l'immagine da mostrare prima dell'avvio. Evita autoplay: un video che parte da solo con l'audio è il modo più rapido per far chiudere la pagina.

Testo e immagini sono a posto. Passiamo a organizzare le informazioni in elenchi.

Nel linguaggio di tutti i giorni, una "lista" fa pensare alla lista della spesa o a una lista di cose da fare. Sul web, però, il concetto è molto più ampio: qualsiasi gruppo di elementi correlati e dello stesso tipo è una lista.

Un menu di navigazione è una lista di link, una galleria e-commerce è una lista di prodotti, e i post di un social network sono una lista di messaggi. Raggrupparli con i tag corretti aiuta i browser e le tecnologie assistive a interpretare la pagina nel modo corretto.

Vediamo ora come sono fatti i tag per creare e personalizzare questi elenchi.

Lista non ordinata: <ul>

Quando l'ordine degli elementi non cambia il significato. Il contenitore è <ul> (unordered list), ogni voce è un <li> (list item).

<ul>
  <li>Farina</li>
  <li>Zucchero</li>
  <li>Uova</li>
</ul>

Lista ordinata: <ol>

Quando l'ordine conta: istruzioni, classifiche, passaggi. La numerazione la gestisce il browser, tu non scrivi i numeri.

<ol>
  <li>Accendi il forno a 180 °C</li>
  <li>Mescola gli ingredienti</li>
  <li>Inforna per 40 minuti</li>
</ol>

Su <ol> puoi usare start="5" per iniziare da un numero diverso, reversed per contare all'indietro e type="a" per numerare con le lettere.

Liste dentro liste

Qui si annida l'errore più comune. La lista figlia va messa dentro il <li> a cui appartiene, non tra un <li> e l'altro:

<ul>
  <li>Bevande
    <ul>
      <li>Acqua</li>
      <li>Vino</li>
    </ul>
  </li>
  <li>Dolci</li>
</ul>

Lista di descrizioni: <dl>

Per coppie termine/spiegazione: glossari, FAQ, schede tecniche. Il contenitore è <dl>, il termine <dt>, la descrizione <dd>.

<dl>
  <dt>URL</dt>
  <dd>L'indirizzo univoco di una risorsa sul web.</dd>

  <dt>DOM</dt>
  <dd>L'albero che il browser costruisce leggendo l'HTML.</dd>
</dl>

Un <dt> può avere più <dd> (un termine con più significati), e più <dt> possono condividere un <dd> (sinonimi).

Il caso pratico: un menu di navigazione

Un menu è una lista di link. Scritto così, uno screen reader annuncia «lista di 3 elementi» e permette di saltarla in blocco.

<ul>
  <li><a href="/it/">Home</a></li>
  <li><a href="/servizi/">Servizi</a></li>
  <li><a href="/it/contatti/">Contatti</a></li>
</ul>

I pallini e l'incolonnamento verticale si tolgono con il CSS: l'aspetto da barra orizzontale è una scelta grafica, la lista resta la struttura corretta.

Le liste organizzano dati in una dimensione. Quando le dimensioni diventano due, servono le tabelle.

Una tabella non è un rettangolo con delle linee. È un modo di organizzare informazioni che hanno senso solo incrociando una riga e una colonna: il prezzo di un piano, l'orario di un treno, il confronto tra due abbonamenti. Se togli quel numero dalla griglia e continua a stare in piedi da solo, probabilmente la tabella non serviva.

Il contenitore è <table>. Dentro ci sono le righe (<tr>). In ogni riga stanno le celle: <th> dà un nome a una colonna o a una riga, <td> tiene il dato. Il titolo della tabella è <caption>. <thead> e <tbody> separano la testa dai dati.

Chi guarda incrocia riga e colonna con gli occhi. Chi ascolta sente le celle una dopo l'altra. Per questo su ogni <th> si mette scope: lo screen reader può dire «Base, prezzo: 9,99 euro» invece di un elenco di numeri. Il widget sotto riprende questi quattro punti.

<table>
  <caption>Piani 2026</caption>
  <tr>
    <th>Piano</th>
    <th>Prezzo</th>
    <th>Spazio</th>
  </tr>
  <tr>
    <td>Base</td>
    <td>9,99 €</td>
    <td>10 GB</td>
  </tr>
</table>

<table>
  <caption>Piani 2026</caption>
  <thead>
    <tr>
      <th>Piano</th>
      <th>Prezzo</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>Base</th>
      <td>9,99 €</td>
    </tr>
  </tbody>
</table>

<table>
  <tr>
    <th scope="col">Piano</th>
    <th scope="col">Prezzo</th>
  </tr>
  <tr>
    <th scope="row">Base</th>
    <td>10 €</td>
  </tr>
</table>

<!-- una pagina, non dei dati -->
<table>
  <tr>
    <td>Logo</td>
    <td>Menu</td>
    <td>Articolo</td>
  </tr>
</table>

La struttura completa

Sulle celle vanno anche tre attributi. Non sono tag: sono coppie nome="valore" scritte nel tag di apertura.

L'attributo che rende accessibile una tabella

Come hai visto nel widget: scope="col" o scope="row" su ogni <th>. Due parole per cella, e l'elenco di numeri diventa una frase.

Unire più celle

colspan estende una cella su più colonne, rowspan su più righe:

<tr>
  <td colspan="2">Questa cella occupa due colonne</td>
  <td>Normale</td>
</tr>

Usali con parsimonia: le tabelle con troppe celle unite diventano difficili da leggere e da annunciare correttamente.

Hai imparato tutti i mattoni di contenuto. Adesso la domanda diventa: come li si raggruppa? Partiamo dai contenitori che non significano nulla, per capire perché servono quelli che invece significano qualcosa.

Tutti i tag visti finora dicono qualcosa: <p> è un paragrafo, <ul> è un elenco, <th> è un'intestazione. Ne esistono due che non dicono nulla, ed è esattamente il motivo per cui servono.

• <div> è un contenitore di blocco senza significato.
• <span> è un contenitore in linea senza significato.

Riconosci la distinzione: è quella del capitolo 5. Un <div> si comporta come un <p> (va a capo, prende tutta la larghezza), un <span> come uno <strong> (resta nella riga).

A cosa servono

A raggruppare elementi per potervi agganciare qualcosa — quasi sempre un class per il CSS, a volte un id per JavaScript — quando quel raggruppamento non ha un significato proprio da comunicare. Il widget sotto mostra i quattro punti.

<div>
  <h3>Tazza</h3>
  <p>Ceramica, 350 ml.</p>
</div>

<p>
  Prezzo: <span>12,90 €</span>
</p>

<div>
  <h3>Tazza</h3>
  <p>
    Prezzo: <span>12,90 €</span>
  </p>
</div>

<div>Come si scrive l'HTML</div>
<h1>Come si scrive l'HTML</h1>

Togli il CSS e la pagina resta identica: sono contenitori a significato zero.

L'errore da non fare: la "divite"

Poiché <div> funziona sempre e non dà mai errore, la tentazione è costruirci l'intera pagina:

<div class="header">
  <div class="nav">...</div>
</div>
<div class="main">
  <div class="articolo">
    <div class="titolo">Come si scrive l'HTML</div>
    <div class="testo">...</div>
  </div>
</div>

A schermo, con il CSS giusto, questa pagina può risultare identica a una scritta bene. Ma per tutto ciò che non ha occhi è una distesa di scatole anonime: il browser non sa qual è il contenuto principale, Google non capisce dove inizia l'articolo, e uno screen reader non può offrire nessuna scorciatoia perché non c'è niente da annunciare. Nota anche che <div class="titolo"> non è un titolo: non compare in nessun indice del documento, mentre un <h1> sì.

Il capitolo che segue ti dà i tag da cercare prima di ripiegare sul <div>.

HTML5 mette a disposizione una serie di tag che funzionano esattamente come un <div> — sono contenitori di blocco — con una differenza decisiva: dichiarano il ruolo della porzione di pagina che racchiudono.

I tag di struttura

Una pagina completa

Ecco come si incastrano. Confronta questa struttura con la distesa di <div> del capitolo precedente: il risultato a schermo può essere lo stesso, l'informazione trasmessa no. Clicca una zona della pagina o una riga del codice.

<article>, <section> o <div>?

È il dubbio ricorrente. Rispondi in ordine a queste tre domande:

1. Questo blocco avrebbe senso pubblicato da solo, staccato dal resto della pagina (in un feed RSS, condiviso su un social)? Se sì → <article>.
2. Altrimenti: è una parte tematica con un suo titolo? Se sì → <section>.
3. Altrimenti: serve solo per la grafica → <div>.

Il vantaggio concreto: le scorciatoie di navigazione

<header>, <nav>, <main>, <aside> e <footer> sono landmark: punti di riferimento che gli screen reader elencano su richiesta. Chi non vede può saltare direttamente al contenuto principale invece di riascoltare il menu su ogni pagina del sito. Con i <div> questa possibilità semplicemente non esiste.

Lo stesso principio vale per chi naviga da tastiera. Mettendo come primo elemento del <body> un link che punta al <main>, offri la stessa scorciatoia:

<a href="#contenuto" class="salta-al-contenuto">Vai al contenuto</a>
...
<main id="contenuto"> ... </main>

La pagina è strutturata e leggibile. Resta un'ultima cosa che non sa fare: ricevere qualcosa dall'utente.

Finora la pagina parla e l'utente ascolta. Con i moduli — form — il flusso si inverte: ricerche, login, iscrizioni, ordini, commenti passano tutti da qui.

Il contenitore <form>

<form action="/iscrizione" method="post"> ... </form>

• action: l'indirizzo a cui vengono spediti i dati.
• method: come vengono spediti. get li accoda all'URL, restando visibili nella barra degli indirizzi: va bene per una ricerca, che così è condivisibile e memorizzabile. post li invia nel corpo della richiesta, fuori dall'URL: obbligatorio per password, dati personali e qualsiasi cosa che modifichi qualcosa sul server.

Tre cose da capire prima di tutti i tipi di campo: type cambia il campo, la <label> gli dà un nome cliccabile, name è ciò che parte verso il server. Il widget sotto le mostra.

<input type="text">
<input type="email">
<input type="password">

<label for="email">Email</label>
<input type="email" id="email">

<label for="con-name">Con name</label>
<input id="con-name" name="email">

<label for="senza-name">Senza name</label>
<input id="senza-name">

<button>Invia</button>

<input placeholder="Email">
<label for="ok">Email</label>
<input id="ok">

I campi: <input> e il suo type

<input> è un tag vuoto che cambia completamente aspetto e comportamento in base all'attributo type:

Scegliere il type corretto non è pignoleria: da solo ti dà la tastiera giusta su mobile, un controllo di validità e, per le date, un calendario che non devi programmare.

Ogni campo ha bisogno di una <label>

Un campo senza etichetta è una casella vuota di cui nessuno conosce lo scopo. L'etichetta si collega al campo facendo combaciare il suo for con l'id del campo:

<label for="email">Indirizzo email</label>
<input type="email" id="email" name="email">

Il collegamento produce due effetti: lo screen reader annuncia «indirizzo email, campo di testo» quando l'utente ci arriva, e un clic sull'etichetta porta il cursore dentro il campo, allargando l'area cliccabile — un vantaggio concreto su schermo touch.

L'attributo name: il più importante di tutti

Quando il modulo viene inviato, ogni campo spedisce una coppia nome = valore. Il nome è quello dell'attributo name: è la chiave con cui il server ritrova il dato.

Gli altri campi

• <textarea>: testo su più righe. Non è un input, ha un tag di chiusura e il valore iniziale si scrive tra i due tag.
• <select> con <option>: menu a tendina. Ogni opzione ha un attributo value che è ciò che viene realmente inviato.
• <button>: il pulsante. Dentro un form il tipo predefinito è submit: se ti serve un pulsante che non invia nulla, scrivi esplicitamente type="button".
• <fieldset> con <legend>: raggruppa campi collegati e dà un nome al gruppo. Indispensabile con i radio, altrimenti non si capisce a quale domanda rispondono.

La validazione che non richiede codice

Il browser sa già rifiutare un modulo incompleto o malformato, senza una riga di JavaScript:

Questi controlli migliorano l'esperienza dell'utente, ma vanno sempre ripetuti sul server: chiunque può aggirare la validazione del browser.

Un modulo completo

<form action="/contatti" method="post">

  <label for="nome">Nome e cognome</label>
  <input type="text" id="nome" name="nome" required autocomplete="name">

  <label for="email">Email</label>
  <input type="email" id="email" name="email" required
         placeholder="[email protected]" autocomplete="email">

  <label for="motivo">Motivo del contatto</label>
  <select id="motivo" name="motivo">
    <option value="info">Richiesta di informazioni</option>
    <option value="preventivo">Preventivo</option>
    <option value="assistenza">Assistenza</option>
  </select>

  <fieldset>
    <legend>Come preferisci essere ricontattato?</legend>

    <input type="radio" id="via-email" name="contatto" value="email" checked>
    <label for="via-email">Via email</label>

    <input type="radio" id="via-telefono" name="contatto" value="telefono">
    <label for="via-telefono">Al telefono</label>
  </fieldset>

  <label for="messaggio">Messaggio</label>
  <textarea id="messaggio" name="messaggio" rows="5" required></textarea>

  <input type="checkbox" id="privacy" name="privacy" required>
  <label for="privacy">Ho letto l'informativa sulla privacy</label>

  <button type="submit">Invia richiesta</button>

</form>

Osserva i due radio: hanno id diversi (devono essere unici) ma lo stesso name. È proprio il name condiviso a renderli alternativi tra loro: se glielo cambi, diventano due scelte indipendenti e l'utente potrà selezionarle entrambe.

Il <body> ora sa fare tutto. Torniamo all'inizio del file, dove si decide come la pagina si presenta al mondo.

Nel capitolo 3 abbiamo definito il <head> come la parte invisibile del documento. Non contiene ciò che si legge nella pagina, ma tutto ciò che serve per leggerla: come interpretare i caratteri, come comportarsi sui telefoni, quali fogli di stile caricare, cosa mostrare su Google e nelle chat.

Le tre righe che non possono mancare

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Corso di HTML per principianti | Codedge</title>

• charset: dichiara la codifica dei caratteri. Senza, accenti ed emoji diventano simboli incomprensibili. Va scritto tra le primissime righe dell'head.
• viewport: dice al telefono di usare la larghezza reale dello schermo. Senza questa riga, il cellulare finge di essere un desktop e mostra la pagina rimpicciolita e illeggibile.
• title: il titolo della scheda del browser, il nome del segnalibro e il titolo blu nei risultati di ricerca. È diverso dall'<h1>, che sta nel body: tienilo entro i 60 caratteri.

Queste righe non si vedono nel body. Clicca una riga dell'head: si accende il posto dove finisce.

Farsi trovare: i metadati per i motori di ricerca

<meta name="description" content="Guida pratica all'HTML: struttura, tag semantici, link, immagini e form spiegati passo passo.">
<link rel="canonical" href="https://codedge.it/it/tutorial/html-fondamentali/">

• description: il riassunto di circa 150 caratteri che compare sotto il titolo nei risultati di ricerca. Non influenza direttamente il posizionamento, ma decide se qualcuno cliccherà.
• canonical: indica l'indirizzo ufficiale della pagina. Se lo stesso contenuto è raggiungibile da più URL, evita che venga considerato duplicato.

L'anteprima quando si condivide un link

Quando incolli un indirizzo su WhatsApp, LinkedIn o Slack e compare un riquadro con titolo, descrizione e immagine, quei dati arrivano dai metadati Open Graph. Se non li scrivi, l'anteprima sarà un link nudo o un ritaglio casuale della pagina.

<meta property="og:title" content="Corso di HTML per principianti">
<meta property="og:description" content="Struttura, semantica, link, immagini e form spiegati passo passo.">
<meta property="og:image" content="https://codedge.it/immagini/anteprima.jpg">
<meta property="og:url" content="https://codedge.it/it/tutorial/html-fondamentali/">
<meta property="og:type" content="article">

Collegare CSS e JavaScript

Nell'head si dichiarano anche i file esterni che la pagina deve usare:

<link rel="stylesheet" href="/css/stile.css">
<script src="/js/app.js" defer></script>

Il foglio di stile va nell'head perché serve prima che la pagina venga disegnata. Per gli script, l'attributo defer dice al browser di scaricarli in parallelo e di eseguirli solo a pagina pronta: eviti di bloccare la visualizzazione e ti assicuri che gli elementi da manipolare esistano già.

Completa l'head anche l'icona della scheda: <link rel="icon" href="/favicon.ico">.

L'head pronto da copiare

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>Titolo della pagina | Nome del sito</title>
  <meta name="description" content="Riassunto della pagina in circa 150 caratteri.">
  <link rel="canonical" href="https://esempio.it/pagina/">

  <meta property="og:title" content="Titolo della pagina">
  <meta property="og:description" content="Riassunto della pagina.">
  <meta property="og:image" content="https://esempio.it/anteprima.jpg">
  <meta property="og:url" content="https://esempio.it/pagina/">

  <link rel="icon" href="/favicon.ico">
  <link rel="stylesheet" href="/css/stile.css">
</head>

Hai visto l'intero percorso: dallo scheletro del file ai tag di contenuto, dalla struttura semantica ai moduli, fino ai metadati. Prima di passare alla pratica, vediamo gli errori che vale la pena evitare fin dall'inizio.

Per concludere in modo pratico, ecco una rassegna degli errori più comuni commessi dai principianti e i consigli di sviluppo per correggerli subito.

Ecco i tag semantici essenziali da ricordare per strutturare correttamente i contenuti:

Non c'è modo migliore di imparare che sporcarsi le mani. Prova a completare questa piccola sfida nel playground o nel tuo editor prima di passare al quiz:

Hai gettato le fondamenta della tua casa nel web. Ora che padroneggi la struttura, puoi iniziare a decorarla e renderla intelligente. Ecco le tappe naturali del tuo percorso di apprendimento:

• CSS Fondamentali: il passo successivo logico per dare colore, stile e definire il layout spaziale dei tuoi tag HTML.
• VS Code Essenziale: impara a scrivere codice velocemente sfruttando le scorciatoie di Emmet, i suggerimenti automatici e l'ambiente di lavoro ideale.
• DevTools del Browser: scopri come ispezionare il DOM, esplorare gli elementi delle pagine web in tempo reale e diagnosticare i bug.
• Indice Tutorial: torna all'elenco completo per scegliere il tuo prossimo argomento.