LezIA|HUB
← Informatica →EsercizioQuiz: Linguaggio HTML
HTML Manuale Web

Manuale completo di HTML

Dalla prima pagina web alla semantica avanzata: guida pratica con esempi, anteprime, tabelle dei tag ed esercizi per imparare a strutturare il contenuto del web.

✓ 60+ tag spiegati ✓ Anteprime visive ✓ Form e input ✓ Accessibilità ✓ 15 esercizi

0Cos'è l'HTML

HTML (HyperText Markup Language) è il linguaggio di marcatura standard per la creazione di pagine web. Non è un linguaggio di programmazione: non contiene istruzioni, cicli o condizioni. Serve a descrivere la struttura e il significato del contenuto di una pagina.

i
Metafora utile

HTML è come lo scheletro di un corpo umano: definisce la struttura. Il CSS è il vestito (aspetto), il JavaScript è il sistema nervoso (comportamento). Senza HTML, non esisterebbe nulla da vestire o animare.

Storia e versioni

VersioneAnnoNovità principali
HTML 1.01991Prima versione, solo testo e link
HTML 2.01995Form, tabelle, immagini
HTML 4.011999CSS, separazione struttura/presentazione
XHTML 1.02000Sintassi XML rigorosa
HTML52014Tag semantici, audio/video, canvas, form avanzati
HTML Living Standard2019→Standard vivo, aggiornato continuamente dal WHATWG

Anatomia di un tag

Un elemento HTML è composto da un tag di apertura, del contenuto e un tag di chiusura. I tag si scrivono tra parentesi angolari e spesso hanno attributi:

anatomia.html
<p class="testo" id="intro">Ciao mondo</p>
 │     │                  │               │             │
 │     │                  │               │             └─ tag di chiusura
 │     │                  │               └─ contenuto
 │     │                  └─ valore attributo
 │     └─ nome attributo
 └─ tag di apertura
✓
Tag vuoti (self-closing)

Alcuni elementi non hanno contenuto né tag di chiusura: <img>, <br>, <hr>, <input>, <meta>. Si chiamano void elements.

1Struttura di un documento HTML

Ogni pagina HTML segue uno scheletro fisso. Vediamolo nel dettaglio:

index.html
<!DOCTYPE html>
<html lang="it">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>La mia prima pagina</title>
</head>
<body>
  <h1>Ciao mondo!</h1>
  <p>Questa è la mia prima pagina web.</p>
</body>
</html>

Le sezioni principali

01

<!DOCTYPE html>

Dichiara al browser che il documento è HTML5. Va sempre in prima riga. Non è un tag ma un'istruzione.

02

<head>

Contiene metadati: titolo, charset, viewport, link a CSS, script. Non è visibile nella pagina.

03

<body>

Contiene il contenuto visibile: testo, immagini, link, form, tabelle, tutto ciò che l'utente vede.

Tag del <head>

TagFunzioneEsempio
<title>Titolo della pagina (scheda del browser, SEO)<title>Home</title>
<meta charset>Codifica dei caratteri<meta charset="UTF-8">
<meta name="viewport">Adatta la pagina ai dispositivi mobiliwidth=device-width
<meta name="description">Descrizione per i motori di ricercacontent="..."
<link rel="stylesheet">Collega un foglio di stile CSS esternohref="/assets/css/style.css"
<script>Include o collega JavaScriptsrc="/assets/js/app.js"
<style>CSS inline nel documento—
⚠
Attenzione al charset

Senza <meta charset="UTF-8"> le lettere accentate (à, è, ì, ò, ù) e i simboli (€, ✓) potrebbero apparire come caratteri strani. È la prima cosa da scrivere nel <head>.

2Tag per il testo

HTML offre molti tag per strutturare il testo. La regola d'oro è: scegli il tag in base al significato, non all'aspetto.

Titoli (heading)

Esistono sei livelli di titoli, da <h1> (più importante) a <h6> (meno importante).

titoli.html
<h1>Titolo principale</h1>
<h2>Sottotitolo</h2>
<h3>Sezione</h3>
<h4>Sottosezione</h4>
<h5>Paragrafo</h5>
<h6>Dettaglio</h6>
Anteprima

Titolo principale

Sottotitolo

Sezione

Sottosezione

Paragrafo
Dettaglio
✓
Buona pratica

Usa un solo <h1> per pagina (di solito il titolo principale). Non saltare livelli (es. da <h2> a <h4>): mantieni una gerarchia logica. Non usare i titoli per ingrandire il testo: per quello c'è il CSS.

Paragrafi e interruzioni

paragrafi.html
<p>Questo è un paragrafo.</p>
<p>Questo è un altro paragrafo.</p>
<p>Prima riga<br>Seconda riga</p>
<hr>
<p>Paragrafo dopo la linea orizzontale.</p>

Enfasi e importanza

TagSignificatoRendering tipico
<strong>Importanza fortegrassetto
<em>Enfasicorsivo
<b>Grassetto (solo visivo)grassetto
<i>Corsivo (solo visivo)corsivo
<mark>Evidenziatogiallo
<small>Nota piccolapiccolo
<del>Testo cancellatobarrato
<ins>Testo inseritosottolineato
<sub>PediceH2O
<sup>Apicex2
<code>Codice inlineconsole.log()
<pre>Testo preformattatospazi e a capo conservati
<kbd>Tasto tastieraCtrl+C
<abbr>AbbreviazioneHTML
<blockquote>Citazione in bloccoblocco indentato
<q>Citazione inlinecitazione
<cite>Titolo di un'operaDivina Commedia
i
strong/em vs b/i: qual è la differenza?

<strong> e <em> hanno un significato semantico: dicono al browser (e ai lettori di schermo) che quel testo è importante o enfatizzato. <b> e <i> sono solo presentazionali. Preferisci sempre i primi due.

Entità HTML (caratteri speciali)

Alcuni caratteri hanno un significato speciale in HTML (<, >, &). Per scriverli nel contenuto si usano le entità:

CarattereEntitàNote
&&amp;amperstand
<&lt;less than
>&gt;greater than
"&quot;doppio apice
©&copy;copyright
®&reg;marchio registrato
€&euro;euro
 &nbsp;spazio non separabile

4Liste

HTML offre tre tipi di liste. La scelta dipende dal significato della lista, non dall'aspetto.

Lista non ordinata <ul>

Usata quando l'ordine degli elementi non conta. Ogni voce è un <li>.

ul.html
<ul>
  <li>Mele</li>
  <li>Banane</li>
  <li>Arance</li>
</ul>
Anteprima
  • Mele
  • Banane
  • Arance

Lista ordinata <ol>

Usata quando l'ordine conta (ricette, classifiche, istruzioni).

ol.html
<ol>
  <li>Preriscaldare il forno a 180°</li>
  <li>Mescolare gli ingredienti</li>
  <li>Infornare per 30 minuti</li>
</ol>

<!-- Con tipo e inizio personalizzati -->
<ol type="A" start="3">
  <li>Voce C</li>
  <li>Voce D</li>
</ol>
Anteprima
  1. Preriscaldare il forno a 180°
  2. Mescolare gli ingredienti
  3. Infornare per 30 minuti
  1. Voce C
  2. Voce D

Lista di definizioni <dl>

Usata per termini e loro definizioni. <dt> è il termine, <dd> la definizione.

dl.html
<dl>
  <dt>HTML</dt>
  <dd>Linguaggio di marcatura per il web</dd>
  <dt>CSS</dt>
  <dd>Linguaggio per lo stile delle pagine</dd>
</dl>
Anteprima
HTML
Linguaggio di marcatura per il web
CSS
Linguaggio per lo stile delle pagine
✓
Liste annidate

Puoi annidare una lista dentro un <li> di un'altra lista per creare sottoliste. Attenzione: la sotto-lista va dentro il <li>, non dopo.

5Tabelle

Le tabelle servono a presentare dati tabellari: righe e colonne con una relazione logica. NON vanno usate per impaginare layout (per quello c'è CSS Flexbox/Grid).

tabella.html
<table>
  <caption>Voti di informatica</caption>
  <thead>
    <tr>
      <th>Studente</th>
      <th>Voto</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Mario Rossi</td>
      <td>9</td>
    </tr>
    <tr>
      <td>Luigi Verdi</td>
      <td>7</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Media</td>
      <td>8</td>
    </tr>
  </tfoot>
</table>
Anteprima
Voti di informatica
StudenteVoto
Mario Rossi9
Luigi Verdi7
Media8

Tag delle tabelle

TagFunzione
<table>Contenitore della tabella
<caption>Titolo della tabella
<thead>Intestazione
<tbody>Corpo principale
<tfoot>Piè di tabella (es. totali)
<tr>Riga (table row)
<th>Cella di intestazione (bold, centrata)
<td>Cella di dato

Celle unite: colspan e rowspan

span.html
<table>
  <tr>
    <th colspan="2">Titolo su due colonne</th>
  </tr>
  <tr>
    <td rowspan="2">Unisce due righe</td>
    <td>Cella B</td>
  </tr>
  <tr>
    <td>Cella C</td>
  </tr>
</table>
⚠
Le tabelle NON servono per il layout

Negli anni '90 si usavano tabelle per impaginare le pagine. Oggi è considerato un errore grave: penalizza l'accessibilità e la manutenibilità. Usa CSS Grid o Flexbox per il layout.

6Form e input

I form permettono all'utente di inviare dati al server. Sono alla base di login, ricerca, contatti, ordini online.

Struttura di base

form.html
<form action="/invia" method="post">
  <label for="nome">Nome:</label>
  <input type="text" id="nome" name="nome" required>

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

  <button type="submit">Invia</button>
</form>
i
GET vs POST

method="get": i dati vanno nell'URL (visibili, adatti a ricerche). method="post": i dati vanno nel corpo della richiesta (adatti a login, form con dati sensibili).

Tipi di <input>

typeDescrizioneEsempio
textTesto singola rigaNome
passwordPassword mascherata••••••
emailEmail con validazionenome@dominio.it
numberSolo numeri42
telNumero di telefono+39 333...
urlURL con validazionehttps://...
dateData (calendario)25/12/2026
timeOra14:30
datetime-localData + ora—
colorSelettore colore🎨
rangeSlider0—100
checkboxCasella di controllo (multipla)☑
radioPulsante radio (singola scelta)◉
fileCaricamento file📎
hiddenCampo nascosto—
submitPulsante di invio[Invia]
resetPulsante di reset[Annulla]
searchCampo di ricerca🔍

Altri controlli form

controlli.html
<!-- Textarea -->
<textarea rows="4" cols="40">Testo...</textarea>

<!-- Select (menu a tendina) -->
<select name="colore">
  <option value="r">Rosso</option>
  <option value="v">Verde</option>
</select>

<!-- Checkbox -->
<input type="checkbox" id="news" name="news">
<label for="news">Iscrivimi alla newsletter</label>

<!-- Radio buttons (stesso name = scelta mutua) -->
<input type="radio" id="m" name="sesso" value="M">
<label for="m">Maschio</label>
<input type="radio" id="f" name="sesso" value="F">
<label for="f">Femmina</label>

<!-- Fieldset: raggruppa controlli correlati -->
<fieldset>
  <legend>Indirizzo di spedizione</legend>
  <input type="text" placeholder="Via...">
</fieldset>
✓
Label e accessibilità

Ogni input dovrebbe avere un <label> collegato tramite for="idInput". Così l'utente può cliccare sull'etichetta per attivare il campo, e i lettori di schermo leggono correttamente il form.

7HTML semantico

HTML5 ha introdotto tag semantici che descrivono il ruolo di ciascuna parte della pagina, non solo l'aspetto.

i
Perché è importante

Usare tag semantici aiuta i motori di ricerca (SEO), i lettori di schermo (accessibilità) e gli altri sviluppatori a capire la struttura del documento. Prima di HTML5 si usava solo <div> per tutto, rendendo il codice opaco.

I tag semantici principali

TagSignificatoUso tipico
<header>IntestazioneLogo, titolo, navigazione principale
<nav>NavigazioneMenu di link
<main>Contenuto principaleIl cuore della pagina (uno solo per pagina)
<section>Sezione tematicaRaggruppa contenuti correlati
<article>Contenuto autonomoPost di blog, articolo, scheda prodotto
<aside>Contenuto lateraleSidebar, box correlati
<footer>Piè di paginaCopyright, contatti, link legali
<figure>Figura con didascaliaImmagini, grafici
<figcaption>Didascalia di figureTesto sotto l'immagine
<details>Dettagli espandibiliAccordion nativo
<summary>Titolo del detailsIl click per aprire
<time>Data/oraTimestamp di un articolo
<mark>Testo evidenziatoRicerca, parole chiave
<address>Informazioni di contattoEmail, telefono, indirizzo

Esempio di pagina semantica

layout-semantico.html
<body>
  <header>
    <h1>Il mio blog</h1>
    <nav>
      <a href="/">Home</a>
      <a href="/chi-sono">Chi sono</a>
    </nav>
  </header>

  <main>
    <article>
      <h2>Imparare HTML in 30 giorni</h2>
      <p>Pubblicato il <time datetime="2026-02-15">15 febbraio 2026</time></p>
      <p>Contenuto dell'articolo...</p>
    </article>
  </main>

  <aside>
    <h3>Articoli correlati</h3>
    <ul>
      <li><a href="#">CSS per principianti</a></li>
    </ul>
  </aside>

  <footer>
    <p>© 2026 Il mio blog</p>
  </footer>
</body>
✓
div e span: quando usarli

<div> e <span> sono contenitori generici senza significato. Usali solo quando nessun altro tag semantico è appropriato (es. per raggruppare elementi da stilizzare con CSS).

8Audio e video

HTML5 ha introdotto tag nativi per incorporare audio e video, senza plugin esterni.

Video

video.html
<video width="640" height="360" controls>
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  Il tuo browser non supporta i video HTML5.
</video>

Audio

audio.html
<audio controls>
  <source src="musica.mp3" type="audio/mpeg">
  <source src="musica.ogg" type="audio/ogg">
</audio>

Attributi comuni

AttributoEffetto
controlsMostra i controlli (play, pausa, volume)
autoplayAvvia automaticamente
loopRipete in ciclo
mutedParte senza audio
posterImmagine di copertina (solo video)
preloadPrecarica il file (none, metadata, auto)
⚠
Autoplay e audio

Per evitare di disturbare l'utente, i browser moderni consentono l'autoplay solo se il video è muto. Aggiungi sempre muted se usi autoplay.

9Attributi globali

Alcuni attributi funzionano su qualsiasi tag HTML.

AttributoFunzioneEsempio
idIdentificatore univoco nella paginaid="header"
classClasse riutilizzabile (per CSS/JS)class="btn btn-primary"
styleStili inline (sconsigliato)style="color:red"
titleTooltip al passaggio del mousetitle="Info"
langLingua del contenutolang="it"
dirDirezione testo (ltr/rtl)dir="rtl"
hiddenNasconde l'elementohidden
tabindexOrdine di tabulazionetabindex="0"
data-*Dati personalizzati (letti da JS)data-user-id="42"
contenteditableRende l'elemento modificabilecontenteditable="true"
draggableRende l'elemento trascinabiledraggable="true"
spellcheckControllo ortograficospellcheck="false"

id vs class: qual è la differenza?

id

Identificatore univoco

Deve essere unico nella pagina. Si usa per identificare un singolo elemento (es. per un link interno #sezione o per JavaScript).

class

Classe riutilizzabile

Può essere applicata a più elementi. Si usa per stilizzare gruppi di elementi simili (es. tutti i pulsanti, tutte le card).

Attributi data-*

Gli attributi data-* permettono di memorizzare dati personalizzati direttamente nell'HTML, senza usare attributi non standard. Sono letti da JavaScript tramite dataset.

data-attrs.html
<button data-user-id="42" data-role="admin">Elimina utente</button>

<!-- In JavaScript: -->
// const btn = document.querySelector('button');
// console.log(btn.dataset.userId); // "42"
// console.log(btn.dataset.role);   // "admin"

10Accessibilità

Un sito accessibile è utilizzabile da tutti, comprese le persone con disabilità visive, motorie, cognitive. Non è un optional: in molti Paesi è un obbligo di legge (in Italia, Legge Stanca 4/2004).

i
Le linee guida WCAG

Il riferimento mondiale è il WCAG (Web Content Accessibility Guidelines), con tre livelli: A, AA, AAA. La maggior parte dei siti mira al livello AA.

Regole fondamentali

Alt sulle immagini

Ogni <img> deve avere alt descrittivo (o vuoto se decorativa).

Label sui form

Ogni input deve avere un <label> associato tramite for.

Contrasto colori

Testo e sfondo devono avere contrasto sufficiente (rapporto 4.5:1 minimo).

Navigazione da tastiera

Tutti gli elementi interattivi devono essere raggiungibili con Tab.

Tag semantici

Usa <nav>, <main>, <header>: aiutano i lettori di schermo.

ARIA quando serve

Attributi aria-* per ruoli e stati (es. aria-label, aria-hidden).

Esempio: form accessibile

form-accessibile.html
<form>
  <label for="email">Indirizzo email</label>
  <input type="email" id="email"
         aria-describedby="email-help"
         required>
  <small id="email-help">Non condivideremo la tua email.</small>

  <button type="submit" aria-label="Invia il modulo">
    Invia
  </button>
</form>
✓
Test manuale

Prova a navigare il tuo sito solo con la tastiera (Tab, Shift+Tab, Invio, Spazio). Se non riesci a usare un form o un menu, c'è un problema di accessibilità.

11Best practice

Scrivere HTML di qualità significa seguire convenzioni consolidate. Ecco le più importanti.

Indentazione coerente

Usa 2 o 4 spazi per livello. Il codice indentato è più leggibile e facile da mantenere.

Tag sempre chiusi

Anche se alcuni browser tollerano tag non chiusi, chiudili sempre (eccetto i void elements).

Attributi tra virgolette

Scrivi class="foo" e non class=foo. È più sicuro e leggibile.

Nomi minuscoli

Tag e attributi vanno scritti in minuscolo: <div>, non <DIV>.

Separazione responsabilità

HTML = struttura, CSS = presentazione, JS = comportamento. Non mischiarli.

Commenti utili

Usa <!-- commento --> per spiegare blocchi complessi, non per ovvietà.

Esempio: codice pulito

pulito.html
<!-- ❌ Male: indentazione assente, tag non chiusi, attributi senza virgolette -->
<DIV class=box>
<P>Testo</p>
<img src=foto.jpg>
</DIV>

<!-- ✅ Bene -->
<div class="box">
  <p>Testo</p>
  <img src="foto.jpg" alt="Descrizione">
</div>

Validazione

Il W3C offre un servizio gratuito per validare il tuo HTML: validator.w3.org. Incolla l'URL o il codice e ottieni un report su errori e warning.

i
Errori comuni da evitare
  • Più di un <h1> per pagina
  • <div> al posto di tag semantici
  • Immagini senza alt
  • Link con testo generico ("clicca qui")
  • Form senza <label>
  • Tabelle usate per il layout

12Esercizi finali

Metti alla prova quanto hai imparato. Ogni esercizio ha la soluzione nascosta: prova prima da solo!

Esercizio 1 · Struttura base

La tua prima pagina

Scrivi un documento HTML completo con: doctype, lang italiano, charset UTF-8, viewport, titolo "Il mio sito", un <h1> con "Benvenuto" e un paragrafo di presentazione.

Mostra soluzione
index.html
<!DOCTYPE html>
<html lang="it">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Il mio sito</title>
</head>
<body>
  <h1>Benvenuto</h1>
  <p>Questa è la mia prima pagina web, creata per imparare l'HTML.</p>
</body>
</html>
Esercizio 2 · Liste annidate

Ricetta con ingredienti e procedimento

Crea una pagina con: un <h1> "Pasta al pomodoro", una <ul> con gli ingredienti e una <ol> con i passi.

Mostra soluzione
ricetta.html
<h1>Pasta al pomodoro</h1>
<h2>Ingredienti</h2>
<ul>
  <li>400g di pasta</li>
  <li>500g di pomodori</li>
  <li>Basilico</li>
</ul>
<h2>Preparazione</h2>
<ol>
  <li>Far bollire l'acqua</li>
  <li>Cuocere la pasta</li>
  <li>Condire con il pomodoro</li>
</ol>
Esercizio 3 · Link e immagini

Card di un libro

Crea una scheda con: immagine di copertina (con alt), titolo, autore e link "Acquista" che si apre in una nuova scheda.

Mostra soluzione
libro.html
<article>
  <img src="copertina.jpg" alt="Copertina del libro">
  <h2>Il nome della rosa</h2>
  <p>di Umberto Eco</p>
  <a href="https://amazon.it"
     target="_blank"
     rel="noopener">Acquista</a>
</article>
Esercizio 4 · Tabella

Orario scolastico

Crea una tabella con: colonna "Ora" e colonne Lun-Ven. Riempi con 3 ore di lezione a piacere.

Mostra soluzione
orario.html
<table>
  <caption>Orario settimanale</caption>
  <thead>
    <tr>
      <th>Ora</th>
      <th>Lunedì</th>
      <th>Martedì</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>8:00</td>
      <td>Italiano</td>
      <td>Matematica</td>
    </tr>
    <tr>
      <td>9:00</td>
      <td>Storia</td>
      <td>Informatica</td>
    </tr>
  </tbody>
</table>
Esercizio 5 · Form

Modulo di contatto

Crea un form con: campo nome (text), campo email (email), textarea per messaggio, checkbox "accetto i termini", pulsante submit.

Mostra soluzione
contatti.html
<form action="/invia" method="post">
  <label for="nome">Nome</label>
  <input type="text" id="nome" name="nome" required>

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

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

  <input type="checkbox" id="termini" required>
  <label for="termini">Accetto i termini</label>

  <button type="submit">Invia</button>
</form>
Esercizio 6 · Semantica

Layout semantico

Struttura una pagina blog con: header (logo + nav), main con un article, aside con link correlati, footer con copyright.

Mostra soluzione
blog.html
<header>
  <h1>Il mio blog</h1>
  <nav><a href="/">Home</a></nav>
</header>
<main>
  <article>
    <h2>Titolo articolo</h2>
    <p>Contenuto...</p>
  </article>
</main>
<aside>
  <h3>Correlati</h3>
  <ul><li><a href="#">Altro articolo</a></li></ul>
</aside>
<footer><p>© 2026</p></footer>
Esercizio 7 · Details/Summary

FAQ espandibile

Crea una FAQ con due domande usando <details> e <summary>.

Mostra soluzione
faq.html
<details>
  <summary>Cos'è l'HTML?</summary>
  <p>È un linguaggio di marcatura per il web.</p>
</details>

<details>
  <summary>Serve saper programmare?</summary>
  <p>No, HTML non è un linguaggio di programmazione.</p>
</details>
Esercizio 8 · Entità HTML

Simboli speciali

Scrivi il codice HTML che produce questo testo: Il tag <p> si usa per i paragrafi. Costo: 10€. Copyright © 2026.

Mostra soluzione
entita.html
<p>Il tag &lt;p&gt; si usa per i paragrafi.
Costo: 10&euro;. Copyright &copy; 2026.</p>
Esercizio 9 · Accessibilità

Migliora questo codice

Rendi accessibile questo frammento: <img src="gatto.jpg"><input type="text"><a href="/">clicca qui</a>

Mostra soluzione
accessibile.html
<img src="gatto.jpg" alt="Un gatto bianco e nero">

<label for="nome">Nome</label>
<input type="text" id="nome">

<a href="/">Torna alla home</a>
Esercizio 10 · Video

Video con poster

Incorpora un video MP4 con controlli, larghezza 640, altezza 360 e immagine di copertina "cover.jpg".

Mostra soluzione
video.html
<video width="640" height="360"
       controls poster="cover.jpg">
  <source src="film.mp4" type="video/mp4">
</video>
Esercizio 11 · Dati strutturati

Lista definizioni

Crea una <dl> con 3 termini informatici e le loro definizioni.

Mostra soluzione
glossario.html
<dl>
  <dt>HTTP</dt>
  <dd>Protocollo per trasferire pagine web.</dd>

  <dt>CSS</dt>
  <dd>Linguaggio per lo stile delle pagine.</dd>

  <dt>DOM</dt>
  <dd>Rappresentazione ad albero del documento HTML.</dd>
</dl>
Esercizio 12 · Blockquote

Citazione con fonte

Crea una citazione in blocco con autore. Usa <blockquote>, <p> e <cite>.

Mostra soluzione
citazione.html
<blockquote cite="https://it.wikipedia.org/wiki/HTML">
  <p>HTML è il linguaggio di marcatura standard per la creazione di pagine web.</p>
  <footer>— <cite>Wikipedia</cite></footer>
</blockquote>
Esercizio 13 · Tabella complessa

Tabella con celle unite

Crea una tabella 3x3 dove la prima riga è un titolo che occupa tutte e tre le colonne (usando colspan).

Mostra soluzione
tabella-span.html
<table>
  <tr>
    <th colspan="3">Titolo tabella</th>
  </tr>
  <tr>
    <td>A1</td><td>A2</td><td>A3</td>
  </tr>
  <tr>
    <td>B1</td><td>B2</td><td>B3</td>
  </tr>
</table>
Esercizio 14 · Select e option

Menu a tendina

Crea una <select> per scegliere la classe frequentata (1A, 2A, 3A, 4A, 5A).

Mostra soluzione
select.html
<label for="classe">Classe</label>
<select id="classe" name="classe">
  <option value="1A">1A</option>
  <option value="2A">2A</option>
  <option value="3A">3A</option>
  <option value="4A">4A</option>
  <option value="5A" selected>5A</option>
</select>
Esercizio 15 · Progetto finale

Pagina personale completa

Crea una pagina personale con: header con nome e foto, sezione "Chi sono", sezione "Competenze" (lista), sezione "Contatti" (form), footer. Usa tag semantici.

Mostra soluzione
personale.html
<!DOCTYPE html>
<html lang="it">
<head>
  <meta charset="UTF-8">
  <title>Mario Rossi</title>
</head>
<body>
  <header>
    <img src="foto.jpg" alt="Foto profilo" width="120">
    <h1>Mario Rossi</h1>
  </header>

  <main>
    <section>
      <h2>Chi sono</h2>
      <p>Studente di informatica appassionato di web.</p>
    </section>

    <section>
      <h2>Competenze</h2>
      <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
      </ul>
    </section>

    <section>
      <h2>Contatti</h2>
      <form>
        <label for="email">Email</label>
        <input type="email" id="email" required>
        <button>Scrivimi</button>
      </form>
    </section>
  </main>

  <footer>
    <p>© 2026 Mario Rossi</p>
  </footer>
</body>
</html>