Tutti gli argomenti, dal primo tag alle API avanzate. Ogni esempio ha il codice colorato e il pulsante “Provalo tu” per scriverlo e vedere subito il risultato.
HTML (HyperText Markup Language) è il linguaggio con cui sono costruite tutte le pagine web. Non è un linguaggio di programmazione: è un linguaggio di marcatura, cioè serve a “etichettare” le parti di un documento dicendo al browser cosa è un titolo, cosa un paragrafo, cosa un'immagine.
Per scrivere HTML basta un editor di testo. I più usati sono Visual Studio Code (gratuito), Notepad++ o Sublime Text. Puoi anche usare l'editor “Provalo tu” qui sul sito senza installare nulla.
Un file HTML si salva con estensione .html e si apre con un qualsiasi browser (Chrome, Firefox, Edge).
Ogni pagina segue sempre lo stesso schema: dichiarazione del tipo di documento, elemento <html>, una parte <head> (informazioni nascoste) e una parte <body> (il contenuto visibile).
Un elemento è composto da un tag di apertura, un contenuto e un tag di chiusura: <p> contenuto </p>. Alcuni elementi sono “vuoti” e si chiudono da soli, come <br> e <hr>.
Gli attributi aggiungono informazioni a un elemento e si scrivono nel tag di apertura, nella forma nome="valore".
I titoli vanno da <h1> (il più importante) a <h6>. Usa <h1> una sola volta per pagina.
Il testo normale va dentro <p>. Il browser ignora spazi e a capo extra: per andare a capo serve <br>.
L'attributo style permette di dare un aspetto a un elemento: colore, sfondo, dimensione del testo, allineamento.
Tag utili per dare significato al testo:
<strong> importante (grassetto), <b> solo grassetto<em> enfasi (corsivo), <i> solo corsivo<mark> evidenziato, <small> piccolo, <del> cancellato, <ins> inserito<sub> pedice, <sup> apice<blockquote> per citazioni lunghe, <q> per citazioni brevi in linea, <abbr> per le abbreviazioni.
I commenti sono note che il browser ignora. Si scrivono tra <!-- e -->.
I colori si indicano per nome (red), in esadecimale (#ff0000), in RGB (rgb(255,0,0)) o RGBA (con trasparenza).
Il CSS definisce l'aspetto. Si può scrivere in tre modi: inline (attributo style), interno (dentro <style> nell'head) o esterno (file .css collegato).
I link si fanno con <a> e l'attributo href. Con target="_blank" il link si apre in una nuova scheda.
Si inseriscono con <img>: l'attributo src indica l'indirizzo e alt il testo alternativo.
alt viene letto dai software per non vedenti e mostrato se l'immagine non carica. Mettilo sempre!La favicon è la piccola icona che appare nella scheda del browser. Si aggiunge nell'<head>.
L'elemento <title> nell'head definisce il titolo mostrato nella scheda del browser e nei risultati di Google. È importante per la SEO.
Si costruiscono con <table>. Ogni riga è <tr>, le intestazioni <th> e le celle <td>.
Liste non ordinate con <ul> (puntini), ordinate con <ol> (numeri). Ogni voce è <li>. Esistono anche le liste di definizione con <dl>.
Gli elementi block (come <div>, <p>, <h1>) occupano tutta la larghezza e vanno a capo. Gli elementi inline (come <span>, <a>, <strong>) occupano solo lo spazio necessario e restano nella riga.
Il <div> è un contenitore generico per raggruppare elementi, soprattutto per dargli uno stile. Lo <span> fa lo stesso ma in linea.
L'attributo class assegna un nome a uno o più elementi, per applicargli lo stesso stile con il CSS. Più elementi possono avere la stessa classe.
L'id dà un nome unico a un elemento (uno solo per pagina). Si usa per il CSS, per i link interni e per JavaScript. Nel CSS si seleziona con il cancelletto #.
Un <iframe> incorpora un'altra pagina dentro la tua (es. una mappa o un video).
JavaScript rende la pagina interattiva. Il codice va dentro l'elemento <script>. Qui un pulsante che cambia un testo quando lo clicchi.
Il percorso indica dove si trova un file. Può essere relativo (rispetto alla pagina) o assoluto (indirizzo completo).
img/foto.jpg → cartella img nella stessa posizione../foto.jpg → cartella superiorehttps://sito.it/foto.jpg → percorso assolutoL'<head> contiene informazioni sulla pagina non visibili: titolo, charset, descrizione (meta), collegamenti a CSS e icone.
Una pagina si organizza con elementi semantici: <header> (testata), <nav> (menu), <main> (contenuto), <aside> (barra laterale), <footer> (piè di pagina).
Una pagina responsive si adatta a schermi di ogni dimensione. La regola base è inserire il meta viewport nell'head.
max-width) invece di larghezze fisse in pixel.Per mostrare codice nel testo: <code> (codice in linea), <pre> (testo preformattato, mantiene spazi e a capo), <kbd> (tasti), <samp> (output).
Gli elementi semantici descrivono il significato del contenuto, non solo l'aspetto. Aiutano accessibilità e SEO: <article>, <section>, <figure>, <figcaption>, <time>.
Alcuni caratteri sono riservati (come < e >) e si scrivono con le entità: < = <, > = >, & = &, = spazio unito, © = ©.
Con le entità puoi mostrare simboli matematici, valute, frecce: € = €, ° = °, → = →, ♥ = ♥.
Le emoji sono caratteri Unicode: basta che la pagina usi charset="UTF-8" e puoi scriverle direttamente nel testo.
Il charset dice al browser come interpretare i caratteri. Lo standard è UTF-8, che supporta tutte le lingue, le lettere accentate e le emoji. Va sempre messo all'inizio dell'head.
Gli URL non possono contenere spazi o caratteri speciali: vengono codificati. Lo spazio diventa %20 (o +), la lettera à diventa %C3%A0.
?subject=Richiesta%20info: %20 è lo spazio codificato.I form raccolgono dati dall'utente. L'elemento <form> contiene i campi; action indica dove inviare i dati e method come (GET o POST).
Principali attributi: action (URL di destinazione), method (get/post), target (dove aprire la risposta), autocomplete (on/off).
Oltre a <input> ci sono: <textarea> (testo lungo), <select> con <option> (menu a tendina), <label> (etichetta), <fieldset> (gruppo).
L'attributo type cambia il tipo di campo: text, email, password, number, date, checkbox, radio, color, range.
Utili per guidare e validare l'inserimento: placeholder (testo guida), required (obbligatorio), value (valore iniziale), readonly, disabled, maxlength.
L'elemento <canvas> è un'area dove disegnare con JavaScript: linee, forme, colori.
L'<svg> disegna forme vettoriali direttamente in HTML, senza JavaScript. Restano nitide a ogni dimensione.
HTML può mostrare audio e video senza programmi esterni, grazie agli elementi <video> e <audio>. I formati più usati sono MP4 (video) e MP3 (audio).
L'elemento <video> con l'attributo controls mostra i comandi di riproduzione.
L'elemento <audio> funziona come il video: con controls appaiono i comandi.
Per inserire un video di YouTube si usa un <iframe> con l'indirizzo “embed” del video.
L'API di geolocalizzazione (JavaScript) permette di chiedere la posizione dell'utente — sempre con il suo permesso.
Con localStorage il browser può salvare dati (come testo) anche dopo aver chiuso la pagina. Utile per ricordare preferenze.
L'API Drag and Drop permette di trascinare elementi nella pagina. Si attiva con l'attributo draggable="true" e alcuni eventi JavaScript.
Un Web Worker è uno script JavaScript che viene eseguito in background, su un thread separato rispetto a quello della pagina. Significa che puoi fare calcoli pesanti senza “congelare” l'interfaccia: l'utente continua a cliccare, scorrere e digitare mentre il worker lavora.
Il worker comunica con la pagina tramite messaggi: si invia con postMessage() e si riceve con l'evento onmessage.
Gli Server-Sent Events (SSE) permettono a una pagina web di ricevere aggiornamenti automatici da un server in tempo reale, su un solo canale unidirezionale (dal server al browser). Sono perfetti per notifiche live, quotazioni di borsa, punteggi sportivi, feed di news.
| SSE | WebSocket |
|---|---|
| Una direzione (server → browser) | Due direzioni (bidirezionale) |
| Solo testo, su HTTP normale | Testo e binario, protocollo dedicato |
| Riconnessione automatica | Riconnessione manuale |
<script>
const sorgente = new EventSource("/aggiornamenti");
sorgente.onmessage = function(evento) {
document.getElementById("notizie").innerHTML += evento.data + "<br>";
};
</script>EventSource apre la connessione una sola volta e resta in ascolto: ogni volta che il server invia un dato, scatta onmessage.Il modo più rapido per imparare l'HTML è partire da esempi già funzionanti, copiarli e modificarli. Qui sotto trovi alcuni esempi tipici che ricorrono in qualsiasi sito web: puoi cliccare “Provalo tu” per aprirli nell'editor e vederli in azione.
Non hai bisogno di installare nulla per scrivere HTML: su questo corso hai un editor HTML online gratuito integrato. Ogni esempio ha il pulsante “Provalo tu ▶” che apre l'editor a schermo intero, con il codice da una parte e l'anteprima live dall'altra.
.html e aprilo con il browser. Per progetti veri consiglio Visual Studio Code.Un breve quiz di HTML per autovalutarti. Leggi ogni domanda, pensa alla risposta e poi apri la soluzione per verificare.
✅ Il tag <h1>. I titoli vanno da <h1> (il più importante) a <h6>.
✅ Con il tag <a href="https://...">testo</a>. L'attributo href indica la destinazione.
✅ L'attributo alt, che fornisce un testo alternativo descrittivo.
<div> e <span>?✅ <div> è un contenitore a blocco (va a capo), <span> è in linea (resta nel flusso del testo).
✅ Il tag semantico <nav>.
Questi esercizi di HTML svolti sono pensati per chi parte da zero e vuole fare pratica con esempi reali. Per ognuno c'è la consegna e la soluzione commentata: prova prima da solo, poi confronta. Sono gli stessi esercizi di HTML che propongo ai miei studenti in classe.
Crea una pagina HTML completa con un titolo principale “Il mio diario” e un paragrafo di presentazione.
<!DOCTYPE html> <html lang="it"> <head><meta charset="UTF-8"><title>Diario</title></head> <body> <h1>Il mio diario</h1> <p>Ciao, qui scrivo i miei pensieri.</p> </body> </html>
Crea una lista non ordinata con almeno 4 prodotti della spesa.
<ul> <li>Pane</li> <li>Latte</li> <li>Uova</li> <li>Mele</li> </ul>
Inserisci un'immagine cliccabile che, se premuta, porti al sito di Wikipedia. Aggiungi sempre il testo alternativo.
<a href="https://it.wikipedia.org"> <img src="logo.png" alt="Vai a Wikipedia" width="120"> </a>
Crea una tabella con intestazione (Giorno, Materia) e due righe di dati.
<table border="1"> <tr><th>Giorno</th><th>Materia</th></tr> <tr><td>Lunedì</td><td>Informatica</td></tr> <tr><td>Martedì</td><td>Matematica</td></tr> </table>
Crea un form con i campi nome, email (obbligatoria) e un pulsante di invio. Usa le <label> per l'accessibilità.
<form> <label>Nome: <input type="text" name="nome"></label><br> <label>Email: <input type="email" name="email" required></label><br> <button type="submit">Iscriviti</button> </form>
Le sfide HTML sono esercizi più impegnativi, senza soluzione data: l'obiettivo è ragionare e costruire da soli. Perfette per consolidare quello che hai imparato.
Crea una pagina personale con foto, un titolo, tre paragrafi di presentazione e una lista dei tuoi hobby. Usa solo tag semantici (header, main, section, footer).
Costruisci il menù di un ristorante con tre portate, ciascuna in una tabella con piatto, descrizione e prezzo.
Realizza un form di contatto con nome, email, oggetto (menu a tendina) e messaggio, con tutti i campi obbligatori marcati correttamente.
Il progetto finale di ogni corso di HTML è costruire un sito web completo. Ecco la struttura minima di un sito multi-pagina che puoi realizzare con quello che hai imparato finora.
<nav> e link tra le pagine, ripetuto su ogni pagina.Questo è il programma completo del corso di HTML, l'elenco ordinato degli argomenti che affrontiamo dal principiante all'avanzato. È lo stesso syllabus che seguo in classe.
Quanto ci vuole per imparare l'HTML? Le basi si acquisiscono in pochi giorni. Ecco un piano di studio realistico per chi parte da zero studiando circa un'ora al giorno.
| Giorno | Cosa studiare |
|---|---|
| 1–2 | Struttura base, tag, titoli, paragrafi, formattazione del testo |
| 3–4 | Link, immagini, liste, tabelle |
| 5 | Div, classi, id, semantica HTML5 |
| 6 | Form e tipi di input |
| 7 | Esercizi, sfide e primo sito completo |
Le domande di HTML più frequenti ai colloqui per ruoli web (front-end, web developer junior). Utili anche per le interrogazioni a scuola.
È l'uso di tag che descrivono il significato del contenuto (header, nav, article, footer). Migliora accessibilità e SEO.
Gli elementi block (es. div, p) occupano tutta la larghezza e vanno a capo; gli inline (es. span, a) restano nel flusso del testo.
Dichiara al browser la versione di HTML usata. <!DOCTYPE html> attiva la modalità standard di HTML5.
L'attributo alt con una descrizione testuale significativa.
Un bootcamp HTML è un percorso intensivo che condensa la teoria nella pratica continua. Se vuoi imparare velocemente, alterna ogni argomento con un esercizio immediato seguendo questo schema:
Un riepilogo veloce di HTML da ripassare prima di una verifica o un colloquio:
<!DOCTYPE html>, <html>, <head> e <body>.href, src, alt).L'accessibilità web (a11y) significa rendere le pagine usabili da tutti, incluse le persone con disabilità che usano screen reader o navigano con la tastiera. Un buon HTML è già metà del lavoro.
alt nelle immagini.<label>.h1, poi h2…), senza saltarli.<html lang="it">.div generici.Una lista di riferimento dei tag HTML più importanti, con il loro significato. Tienila come promemoria veloce.
| Tag | A cosa serve |
|---|---|
<h1>–<h6> | Titoli, dal più importante al meno |
<p> | Paragrafo di testo |
<a> | Link / collegamento |
<img> | Immagine |
<ul> <ol> <li> | Liste puntate e numerate |
<table> | Tabella |
<form> <input> | Moduli e campi |
<div> <span> | Contenitori (blocco e in linea) |
<header> <nav> <main> <footer> | Tag semantici di struttura |
Gli attributi HTML più comuni che incontrerai praticamente su ogni elemento.
| Attributo | Uso |
|---|---|
href | Destinazione di un link |
src | Sorgente di immagini, video, iframe |
alt | Testo alternativo di un'immagine |
width / height | Larghezza e altezza |
type | Tipo di campo input o pulsante |
value | Valore di un campo |
Gli attributi globali si possono usare su qualsiasi elemento HTML.
| Attributo | Uso |
|---|---|
id | Identificatore unico dell'elemento |
class | Una o più classi per stile/script |
style | Stile CSS in linea |
title | Suggerimento al passaggio del mouse |
lang | Lingua del contenuto |
data-* | Dati personalizzati |
hidden | Nasconde l'elemento |
Praticamente tutti i tag HTML5 sono supportati dai browser moderni (Chrome, Firefox, Edge, Safari, Opera). Quando usi funzioni recenti è buona pratica verificare la compatibilità su risorse come Can I Use.
Gli attributi evento permettono di eseguire JavaScript quando l'utente interagisce con la pagina.
| Evento | Quando scatta |
|---|---|
onclick | Al clic su un elemento |
onmouseover | Al passaggio del mouse sopra |
onchange | Quando cambia il valore di un campo |
onsubmit | All'invio di un form |
onkeyup | Al rilascio di un tasto |
I colori in HTML/CSS si indicano in tre modi: per nome, in esadecimale o in RGB.
| Modo | Esempio (rosso) |
|---|---|
| Nome | red |
| Esadecimale | #FF0000 |
| RGB | rgb(255, 0, 0) |
| RGBA (con trasparenza) | rgba(255, 0, 0, 0.5) |
Il tag <canvas> è un'area di disegno controllata da JavaScript: si usa per grafica, grafici e piccoli giochi. Vedi anche la sezione Canvas più sopra.
| Metodo | Disegna |
|---|---|
fillRect(x,y,w,h) | Un rettangolo pieno |
arc() | Un cerchio / arco |
lineTo() | Una linea |
fillText() | Del testo |
I tag <audio> e <video> incorporano file multimediali con i controlli nativi del browser. Vedi le sezioni Video e Audio.
| Attributo | Effetto |
|---|---|
controls | Mostra i comandi play/pausa/volume |
autoplay | Avvia automaticamente |
loop | Riproduce in continuo |
muted | Parte senza audio |
poster | Immagine di anteprima del video |
Il DOCTYPE è la prima riga di ogni pagina e dice al browser quale versione di HTML usare. In HTML5 è semplicissimo:
<!DOCTYPE html>Il set di caratteri definisce come vengono codificate le lettere. Lo standard moderno è UTF-8, che supporta tutte le lingue ed emoji. Si dichiara nel <head>:
<meta charset="UTF-8"><meta charset="UTF-8">.La codifica URL sostituisce i caratteri non ammessi negli indirizzi web con sequenze sicure. Lo spazio diventa %20, ad esempio.
| Carattere | Codifica |
|---|---|
| spazio | %20 |
& | %26 |
? | %3F |
= | %3D |
| à | %C3%A0 |
L'attributo lang usa codici standard (ISO 639) per indicare la lingua di una pagina.
| Lingua | Codice |
|---|---|
| Italiano | it |
| Inglese | en |
| Francese | fr |
| Spagnolo | es |
| Tedesco | de |
Quando apri una pagina, il browser e il server si scambiano messaggi HTTP: una richiesta e una risposta. La risposta contiene un codice di stato che dice com'è andata.
| Codice | Significato |
|---|---|
200 | OK — tutto a posto |
301 | Spostato in modo permanente |
404 | Pagina non trovata |
403 | Accesso negato |
500 | Errore interno del server |
I metodi HTTP indicano che tipo di operazione vuole fare il browser. I form HTML usano soprattutto GET e POST.
| Metodo | Uso |
|---|---|
GET | Chiede dati (i parametri vanno nell'URL) |
POST | Invia dati (es. un form di registrazione) |
PUT | Aggiorna una risorsa |
DELETE | Elimina una risorsa |
In HTML/CSS le dimensioni si esprimono in px (pixel, fissi) o in em/rem (relativi). La regola base, con dimensione di riferimento 16px:
| Pixel | EM (base 16px) |
|---|---|
| 8px | 0.5em |
| 16px | 1em |
| 24px | 1.5em |
| 32px | 2em |
em = px ÷ 16. Le unità relative (em/rem) rendono il sito più accessibile perché si adattano alle preferenze dell'utente.Alcune scorciatoie da tastiera che velocizzano la scrittura di HTML negli editor come Visual Studio Code.
| Scorciatoia | Azione |
|---|---|
! + Invio | Genera la struttura base di una pagina (Emmet) |
Ctrl + / | Commenta / scommenta una riga |
Ctrl + D | Seleziona l'occorrenza successiva |
Alt + ↑ / ↓ | Sposta la riga su / giù |
Ctrl + S | Salva il file |
Vuoi una certificazione di HTML da mostrare nel CV? Al termine di questo corso hai le competenze per affrontare i test di certificazione online più diffusi e, soprattutto, per costruire pagine web reali.
Complimenti! 🎉 Hai completato il corso di HTML completo e gratuito in italiano: dalla struttura di base ai tag semantici, dai form ai media, dalle API HTML5 (Web Storage, Web Workers, SSE) fino a esercizi, sfide, riferimenti e accessibilità. Ora conosci i mattoni con cui è costruita ogni pagina web.
Il modo migliore per imparare l'HTML è fare pratica ogni giorno: apri gli esempi, modificali, sbaglia e riprova. Rifai gli esercizi HTML, affronta le sfide e prova a costruire il tuo primo sito web.
Il prossimo passo è dare stile alle tue pagine con il CSS e renderle interattive con JavaScript.
Ricrea la struttura di una pagina che conosci (un social, un giornale online) usando solo HTML semantico: header, nav, main, article e footer. Niente CSS per ora — concentrati sulla struttura.