HTML per Gatti

Un'introduzione gentile al markup per programmatori alle prime armi cat

Così facile che potrebbe farcela anche il tuo umano di compagnia!

HTML sta per HyperText Markup Language, un modo elegante per dire "la roba che dice a un browser cosa c'è effettivamente su una pagina". Ogni sito web davanti a cui ti sei mai appisolato — siti di notizie, negozi online, quella pagina che il tuo umano tiene sempre aperta con le foto di altri gatti — è costruito con HTML. È lo scheletro. Senza di esso non ci sarebbe alcuna scatola dentro cui piegare il cartone, e i gatti lo sanno meglio di chiunque altro: senza una buona scatola non succede niente di importante.

HTML non fa le cose come fa JavaScript. Non calcola, non reagisce, non insegue un puntatore laser. Dice solo "qui c'è un titolo, qui c'è un paragrafo, qui c'è la foto di un raggio di sole". Descrive una pagina. Qualcos'altro (il CSS) la rende bella da vedere, e qualcos'altro ancora (JavaScript) la fa muovere. Questa pagina ti insegnerà solo la parte della descrizione, e non ci vorrà molto*.

* Tempo reale: più di zero. Probabilmente venti minuti. Forse di più se ti distrai per colpa di una falena.

HTML per Gatti è distribuito con licenza CC0 — fanne quello che vuoi.

Questo è un tutorial originale non ufficiale, scritto nello stile di JavaScript for Cats di @maxogden. Non è una traduzione né un seguito ufficiale — solo un omaggio, per i gatti che hanno già padroneggiato console.log e sono pronti per il tag che crea la scatola.

Indice

# Non fare il gatto pauroso

Atterrerai sempre in piedi — anche mentre scrivi il markup! L'HTML è tra i linguaggi più indulgenti che esistano. Ti dimentichi di chiudere un tag? Il browser di solito scrolla le spalle e lo sistema da solo, in silenzio. Sbagli a scrivere un attributo? Non esplode nulla. A differenza di una zampa su un bicchiere d'acqua, niente di quello che fai qui può rompere il tuo computer, cancellare i tuoi file o evocare l'aspirapolvere.

Quindi non fare il gatto pauroso. Apri tutto, curiosa, rompi le cose apposta solo per vedere cosa succede. È tutto il metodo che serve.

# Tag ed elementi

L'HTML è fatto di tag. Un tag è una parola racchiusa tra parentesi angolari, come <p>. La maggior parte dei tag va in coppia: un tag di apertura e uno di chiusura (identico ma con uno / davanti alla parola), con del contenuto incastrato in mezzo, come un premietto tra due fette di pane che nessun gatto ha chiesto ma che ispezionerà comunque.

<p>Vorrei un premietto, grazie.</p>

Il tag di apertura, quello di chiusura e tutto ciò che sta in mezzo insieme si chiamano elemento. Quindi <p>Vorrei un premietto, grazie.</p> è un elemento paragrafo. Esistono decine di tag diversi, ognuno con un significato diverso per il browser: <p> significa "questo è un paragrafo", <h1> significa "questo è un titolo grande e importante", e così via. Non serve memorizzarli tutti oggi — li imparerai un po' come impari il suono del sacchetto dei premietti che si apre tre stanze più in là.

Alcuni tag non racchiudono nulla e non hanno bisogno di un tag di chiusura, perché non hanno nessun contenuto da incastrare — sono e basta qualcosa, come <img> (un'immagine) o <br> (un'interruzione di riga). A volte si chiamano elementi vuoti o tag autochiudenti.

<img src="gatto-al-sole.jpg">
<br>

# Lo scheletro di una pagina

Ogni pagina HTML ha uno scheletro di base che i browser si aspettano di vedere. Pensalo come l'intelaiatura della tua scatola di cartone preferita — la scatola può essere di qualsiasi dimensione e contenere qualsiasi cosa, ma ha comunque bisogno di quattro lati e un fondo per contare davvero come scatola.

<!doctype html>
<html>
  <head>
    <title>Una Pagina Sui Pisolini</title>
  </head>
  <body>
    <h1>Pisolini Che Ho Fatto</h1>
    <p>Ce ne sono stati tanti. Questa è una lista parziale.</p>
  </body>
</html>

Analizziamola:

  • <!doctype html> va sulla primissima riga e dice al browser "questa è una pagina HTML moderna, comportati di conseguenza". Questo lo copi/incolli sempre, per sempre, senza pensarci più.
  • <html> racchiude l'intera pagina. Tutto il resto vive al suo interno.
  • <head> è per le informazioni sulla pagina che non vengono mostrate direttamente sulla pagina stessa — cose come il <title> (quello che compare nella scheda del browser), i link ai fogli di stile e altra amministrazione. Pensalo come la medaglietta al collare: metadati sul gatto, non il gatto.
  • <body> è dove vive il contenuto vero e visibile della pagina — ogni titolo, paragrafo, immagine e pulsante che un visitatore vedrà davvero. Questo è il gatto stesso.

Nota come <head> e <body> siano entrambi dentro <html>, e come i tag si annidino ordinatamente uno dentro l'altro come un gatto che si rannicchia dentro una ciotola leggermente troppo piccola. Questo annidamento è importante: una pagina ben formata chiude i suoi tag nell'ordine inverso rispetto a come li ha aperti.

# Attributi

I tag possono portare informazioni extra chiamate attributi. Gli attributi vanno dentro il tag di apertura, come coppie nome="valore", e cambiano come si comporta quel particolare elemento o a cosa fa riferimento. Ne hai già visto uno sopra: src="gatto-al-sole.jpg" è un attributo su <img> che dice al browser quale immagine mostrare.

<a href="https://it.wikipedia.org/wiki/Nepeta_cataria">leggi dell'erba gatta</a>

Qui, <a> è un tag di link, e href (abbreviazione di "hypertext reference") è un attributo che dice dove deve portare il link. Un elemento può avere più attributi, separati da spazi:

<img src="pane.jpg" alt="un gatto seduto in posizione a pagnotta" width="300">

alt descrive l'immagine a parole (utile per gli screen reader, per i motori di ricerca, e per quel raro umano che ha disattivato le immagini), e width imposta quanto larga deve essere mostrata. I valori degli attributi vanno quasi sempre tra virgolette, singole ' o doppie ", basta sceglierne una e restare coerenti all'interno dello stesso tag.

# Titoli e paragrafi

Il testo su una pagina è organizzato in titoli e paragrafi, un po' come un buon pisolino è organizzato in "sistemarsi" e "il pisolino vero e proprio". Ci sono sei livelli di titolo, da <h1> a <h6>, dal più importante al meno importante:

<h1>Perché Ho Fatto Cadere La Tazza Dal Tavolo</h1>
<h2>Un'Indagine In Tre Parti</h2>
<h3>Parte Uno: La Gravità, E Se Funziona Ancora</h3>

Usa <h1> per il titolo più importante della pagina (di solito uno solo per pagina), e scendi da lì per le sottosezioni. Il testo normale va nei tag <p>, uno per paragrafo:

<p>È iniziato, come spesso accade in questi casi, con la semplice curiosità.</p>
<p>È finito, come spesso accade in questi casi, con un umano che urlava il mio nome in quel tono lì.</p>

Ecco una trappola in cui ogni principiante cade almeno una volta: gli spazi bianchi in HTML per lo più non contano. Puoi mettere cento spazi o cinque interruzioni di riga tra due parole nel tuo codice sorgente, e il browser li ridurrà tutti a un singolo spazio quando mostra la pagina. Se vuoi un'interruzione di riga visibile, ti serve un vero tag <br>, oppure (meglio, e capirai perché più avanti) il CSS.

# Link

La "Hyper" di HyperText riguarda tutta i link — le cose che ti permettono di saltare da una pagina all'altra, l'equivalente sul web di un gatto che salta da una libreria all'altra senza mai sembrare che stia pianificando il percorso. Il tag è <a> (per "anchor", ancora), e la destinazione va nell'attributo href:

<a href="https://www.youtube.com/results?search_query=video+di+gatti">ancora di questo, grazie</a>

Tutto ciò che sta tra <a href="..."> e </a> diventa il testo cliccabile (o un'immagine, o qualsiasi altra cosa tu ci metta dentro — i link possono avvolgere più che semplice testo). Puoi collegarti ad altre pagine dello stesso sito con un percorso relativo, come <a href="chi-siamo.html">, oppure altrove con un indirizzo completo, come nell'esempio sopra.

# Immagini

Hai già incontrato <img> un paio di sezioni fa, ma merita un momento tutto suo, perché una pagina senza nemmeno una foto di un gatto è, francamente, sospetta.

<img src="pattuglia-raggio-di-sole.jpg" alt="un gatto che monitora un raggio di sole per eventuali irregolarità">

<img> è un elemento vuoto — niente tag di chiusura, perché un'immagine non avvolge altro contenuto come fa un paragrafo. L'attributo src è obbligatorio (è tutto il punto: quale immagine?), e alt dovrebbe praticamente sempre esserci, per descrivere cosa c'è nell'immagine a chi non può vederla.

# Liste

I gatti sono, in segreto, degli amanti delle liste. Ogni lista ha un tipo: non ordinata (una lista puntata, quando l'ordine davvero non conta) oppure ordinata (una lista numerata, quando invece conta). In entrambi i casi, ogni singolo elemento va dentro <li> (list item), e l'intera lista è racchiusa in <ul> oppure <ol>:

<h3>Posti Dove Mi Siederò Oggi, Senza Un Ordine Particolare</h3>
<ul>
  <li>Il bucato pulito</li>
  <li>Direttamente sulla tastiera</li>
  <li>Dentro una scatola da scarpe due taglie troppo piccola</li>
</ul>

<h3>Passi Per Svegliare Il Mio Umano Alle 5 Del Mattino, In Ordine</h3>
<ol>
  <li>Salire sul petto</li>
  <li>Far cadere un (1) oggetto dal comodino</li>
  <li>Urlare</li>
</ol>

Nota di nuovo l'annidamento: gli elementi <li> vivono dentro <ul> o <ol>, mai fluttuando per conto loro.

# Div e span

A volte hai bisogno di raggruppare un pezzo di pagina — non perché sia un paragrafo o un titolo o qualcosa con un vero significato, ma solo per poterlo trattare come un'unica unità (per poi darle uno stile, per esempio). A questo serve <div>: un contenitore generico di livello blocco, senza alcun significato proprio. È, in altre parole, una scatola di cartone. Non importa cosa ci sia dentro — la scatola è felice di contenere qualsiasi cosa, e un gatto è felice di sedercisi dentro a prescindere.

<div>
  <h2>Su Di Me</h2>
  <p>Sono un gatto. Contengo moltitudini, e anche boli di pelo.</p>
</div>

<span> è la stessa idea, ma per un piccolo pezzo di contenuto inline — qualche parola in mezzo a una frase che vuoi mettere in risalto, invece di un intero blocco:

<p>Storicamente <span>non</span> sono un gatto mattiniero.</p>

Né <div> né <span> cambiano di default l'aspetto di qualcosa. Da soli sono impalcature invisibili. Diventano interessanti solo quando arriva il CSS a dargli personalità — ne parliamo in CSS per Gatti.

# Elementi semantici

<div> e <span> sono onesti nel non avere significato, ma l'HTML moderno ha anche tag che descrivono cosa sia davvero una sezione della pagina, non solo che si tratta di "un pezzo". Si chiamano elementi semantici, e usare quello giusto aiuta browser, motori di ricerca e tecnologie assistive (come gli screen reader) a capire la tua pagina — non solo a renderizzarla.

<header>
  <h1>Il Quotidiano dei Baffi</h1>
  <nav>
    <a href="#">Home</a>
    <a href="#">Pisolini</a>
    <a href="#">Premietti</a>
  </nav>
</header>

<main>
  <article>
    <h2>Gatto Locale Scopre Un Raggio Di Sole, Si Rifiuta Di Muoversi</h2>
    <p>I testimoni riferiscono che il raggio era "oggettivamente eccellente".</p>
  </article>
</main>

<footer>
  <p>&copy; 2026, tutti i diritti riservati, non disturbare</p>
</footer>
  • <header> è contenuto introduttivo, di solito in cima a una pagina o a una sezione.
  • <nav> racchiude i link di navigazione.
  • <main> è il contenuto principale della pagina — dovrebbe essercene solo uno per pagina.
  • <article> è un pezzo di contenuto autonomo che avrebbe senso anche da solo (un post di un blog, una notizia).
  • <footer> è contenuto di chiusura, di solito in fondo.

Potresti tecnicamente costruire esattamente lo stesso layout usando solo <div>. Non si romperebbe niente. Ma usare i tag semantici è come etichettare le scatole quando trasleghi: non è obbligatorio, ma tutti (te compreso, in futuro) ti ringrazieranno.

# Form

I form sono il modo in cui una pagina raccoglie informazioni da un visitatore — testo che digita, caselle che spunta, pulsanti che clicca. Tutto vive dentro un tag <form>, e i singoli campi sono di solito elementi <input>, distinti dal loro attributo type:

<form>
  <label for="premietto">Gusto di premietto preferito:</label>
  <input type="text" id="premietto" name="premietto">

  <label for="zoomies">
    <input type="checkbox" id="zoomies" name="zoomies">
    Vorrei attivare le corse improvvise delle 3 di notte
  </label>

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

<label> collega un pezzo di testo descrittivo a un campo specifico tramite l'attributo for (che dovrebbe corrispondere all'id del campo) — cliccando sull'etichetta si mette a fuoco il campo, il che è comodo e, non a caso, è esattamente come dovrebbe funzionare una leva per erogare premietti. Cosa succede davvero quando il form viene inviato (dove vanno i dati, cosa viene eseguito) è compito di JavaScript e di un server, non dell'HTML — l'HTML costruisce solo l'arredamento.

# Commenti

A volte vuoi lasciare a te stesso (o a un altro gatto) un appunto nel codice sorgente che il browser ignorerà completamente. Questo è un commento, e si scrive così:

<!-- TODO: sostituire questa scatola di cartone con una scatola di cartone più grande -->
<div class="posto-preferito"></div>

I commenti sono utili per lasciare promemoria, "rimuovere" temporaneamente un pezzo di markup senza cancellarlo, o spiegare perché c'è qualcosa di strano da qualche parte (c'è sempre qualcosa di strano da qualche parte; sii gentile con chi lo troverà, forse tu stesso, tra sei mesi, senza alcun ricordo di tutto questo).

# L'Ispettore

Proprio come la Console ti permetteva di curiosare dal vivo in JavaScript, su qualsiasi pagina web il tuo browser ha uno strumento simile per l'HTML chiamato Ispettore (a volte etichettato "Elementi"). Fai clic destro in un punto qualsiasi della pagina e scegli Ispeziona, e vedrai l'HTML vero che ha costruito la pagina che stai guardando, tag per tag, annidato esattamente come ti aspetteresti.

Puoi cliccare su qualsiasi elemento lì dentro per evidenziarlo sulla pagina, fare doppio clic sul testo per modificarlo dal vivo, e in generale curiosare in modo spericolato quanto vuoi — niente di ciò che cambi nell'Ispettore viene salvato, quindi ricaricare la pagina annulla tutto all'istante. Provaci subito: trova un paragrafo di testo da qualche parte su internet, ispezionalo, e cambia le parole con qualcosa su di te. Non durerà, ma per un momento, è tuo.

La fine!

Questo è lo scheletro. L'HTML da solo produce una pagina piuttosto spoglia — niente colori, nessun vero layout, font predefiniti un po' come un modulo compilato dal veterinario. Ed è voluto: l'HTML descrive cosa sono le cose, non come appaiono. Per la parte del come appaiono, ti servirà CSS per Gatti, il prossimo passo.

Hai un altro argomento che vorresti veder trattato? Apri una issue su GitHub.

# Letture consigliate

HTML per Gatti salta molti dettagli che non sono importanti per iniziare (i gatti non sono famosi per la loro capacità di concentrazione), ma se senti il bisogno di approfondire:

HTML per Gatti è un progetto indipendente di fan, scritto per l'universo di JavaScript for Cats di @maxogden, con affetto e senza alcuna affiliazione ufficiale. Contributi e correzioni sono benvenuti su GitHub.

Nota di manutenzione (14/08/2026): aggiornate le dipendenze di build (marked, mustache) per correggere vulnerabilità di sicurezza note (ReDoS in marked, XSS in mustache); adeguato render.js alla nuova API di marked. Deploy automatico: una GitHub Action renderizza il sito ad ogni push su main e lo pubblica tramite il meccanismo ufficiale di GitHub Pages (nessun branch gh-pages, nessuna credenziale git di mezzo). Nessuna modifica al contenuto del tutorial.