La struttura di una pagina e i tag di base

Ogni pagina web che apri è un file di testo scritto in HTML (HyperText Markup Language). L'HTML non è un linguaggio di programmazione: non fa calcoli e non prende decisioni. È un linguaggio di marcatura, cioè serve a dire al browser che cosa è ogni pezzo della pagina: questo è un titolo, questo è un paragrafo, questo è un elenco.

In questo corso costruiremo passo passo il sito di cucina Starry Food. In questa lezione scriviamo la sua prima pagina.

Che cosa serve

• Un editor di testo per scrivere il codice: va benissimo Visual Studio Code (gratuito), oppure Notepad++. Word e i programmi di videoscrittura invece non vanno bene, perché aggiungono formattazione invisibile.
• Un browser (Chrome, Firefox, Edge) per vedere il risultato.

Il procedimento è sempre lo stesso:

1. crea una cartella per il sito, per esempio starry-food;
2. dentro crea un file e salvalo con l'estensione .html, per esempio index.html;
3. scrivi il codice e salva;
4. apri il file con il browser (doppio clic, oppure trascinalo nella finestra del browser);
5. ogni volta che modifichi e salvi, ricarica la pagina con F5.

In Visual Studio Code l'estensione Live Server ricarica la pagina da sola a ogni salvataggio: comodissima.

Tag, elementi e attributi

L'HTML è fatto di tag: parole chiave racchiuse tra parentesi angolari. Quasi tutti vanno in coppia: un tag di apertura e uno di chiusura, che ha in più la barra /.

<p>Benvenuti su Starry Food!</p>

• <p> è il tag di apertura, </p> quello di chiusura;
• il testo in mezzo è il contenuto;
• tutto insieme (apertura, contenuto e chiusura) si chiama elemento.

Un tag può avere degli attributi, che danno informazioni in più. Si scrivono nel tag di apertura, nella forma nome="valore":

<p lang="en">Welcome to Starry Food!</p>

Alcuni elementi non hanno contenuto, e quindi neanche il tag di chiusura: sono gli elementi vuoti, come <br> (vai a capo) o <img> (immagine, la vedremo nella prossima lezione).

Gli elementi si possono mettere uno dentro l'altro (si dice annidare), ma vanno chiusi nell'ordine inverso a quello in cui sono stati aperti: <p><strong>ciao</strong></p> va bene, <p><strong>ciao</p></strong> è sbagliato.

La struttura base di una pagina

Ogni pagina HTML ha sempre lo stesso scheletro. Conviene impararlo a memoria:

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Starry Food</title>
</head>
<body>
    <h1>Starry Food</h1>
    <p>Le ricette più buone dell'universo.</p>
</body>
</html>

Riga per riga:

Questa struttura si può immaginare come un albero, in cui ogni elemento sta dentro un altro:

html
├── head
│   ├── meta (charset)
│   ├── meta (viewport)
│   └── title
└── body
    ├── h1
    └── p

In Visual Studio Code basta scrivere ! in un file .html vuoto e premere Invio: lo scheletro si scrive da solo.

Titoli e paragrafi

I titoli vanno da <h1> (il più importante) a <h6> (il meno importante). Nella pagina c'è di solito un solo <h1>, il titolo principale; poi <h2> per le sezioni, <h3> per le sottosezioni e così via.

<h1>Starry Food</h1>
<h2>Primi piatti</h2>
<h3>Spaghetti alla carbonara</h3>
<p>La carbonara è uno dei piatti più famosi della cucina romana.</p>
<p>Servono pochi ingredienti, ma di qualità.</p>

Il paragrafo <p> contiene un blocco di testo. Attenzione: nell'HTML gli a capo e gli spazi in più che scrivi nel codice vengono ignorati. Per andare a capo dentro un paragrafo si usa <br>, per una linea di separazione <hr>:

<p>Starry Food<br>
Via delle Stelle 7<br>
Torino</p>
<hr>

I titoli servono a dare una struttura alla pagina, non a fare il testo grande. Per cambiare dimensione e colore si usa il CSS, che vedremo tra due lezioni.

Testo in evidenza

Dentro un paragrafo puoi mettere in evidenza alcune parole:

<p>La carbonara si fa con il <strong>guanciale</strong>, non con la pancetta.</p>
<p>Il tuorlo va aggiunto <em>fuori dal fuoco</em>.</p>
<p>Tempo di preparazione: <mark>20 minuti</mark>.</p>
<p>H<sub>2</sub>O e 10<sup>3</sup> grammi di pasta... scherzo!</p>
<p><small>Ricetta tratta dal ricettario di Starry Food.</small></p>

Ecco come le mostra il browser:

Gli elenchi

Ci sono due tipi di elenco:

• elenco puntato <ul> (unordered list), quando l'ordine non conta: per esempio gli ingredienti;
• elenco numerato <ol> (ordered list), quando l'ordine conta: per esempio i passaggi di una ricetta.

Ogni voce, in tutti e due i casi, è un <li> (list item):

<h3>Ingredienti</h3>
<ul>
    <li>320 g di spaghetti</li>
    <li>150 g di guanciale</li>
    <li>4 tuorli</li>
    <li>Pecorino romano</li>
</ul>

<h3>Preparazione</h3>
<ol>
    <li>Metti a bollire l'acqua.</li>
    <li>Rosola il guanciale in padella.</li>
    <li>Sbatti i tuorli con il pecorino.</li>
    <li>Scola la pasta e unisci tutto fuori dal fuoco.</li>
</ol>

Un elenco può contenere un altro elenco: basta metterlo dentro un <li>.

<ul>
    <li>Primi piatti
        <ul>
            <li>Carbonara</li>
            <li>Amatriciana</li>
        </ul>
    </li>
    <li>Dolci</li>
</ul>

Le tabelle

Una tabella si costruisce riga per riga: <table> contiene le righe <tr> (table row); ogni riga contiene le celle, <th> per le intestazioni e <td> per i dati.

<table>
    <tr>
        <th>Ricetta</th>
        <th>Tempo</th>
        <th>Difficoltà</th>
    </tr>
    <tr>
        <td>Carbonara</td>
        <td>20 minuti</td>
        <td>Media</td>
    </tr>
    <tr>
        <td>Tiramisù</td>
        <td>30 minuti</td>
        <td>Facile</td>
    </tr>
</table>

Senza CSS la tabella non ha bordi: le daremo un aspetto migliore più avanti. Usa le tabelle solo per dati in righe e colonne, non per impaginare il sito.

Commenti e caratteri speciali

I commenti sono note per chi legge il codice: il browser non li mostra.

<!-- Questo è un commento: nella pagina non si vede -->
<p>Questo invece si vede.</p>

Alcuni caratteri hanno un significato speciale nell'HTML (per esempio < apre un tag). Per scriverli nel testo si usano le entità:

<p>Nella formula 3 &lt; 5 il simbolo &lt; significa "minore di".</p>
<p>&copy; 2026 Starry Food</p>

Dare un ordine alla pagina: i tag semantici

Una pagina vera ha delle zone: un'intestazione con il logo, un menu, il contenuto principale e un piè di pagina. L'HTML ha un tag per ciascuna. Si chiamano semantici perché dicono che cosa contengono:

body
├── header   (logo e nome del sito)
├── nav      (menu)
├── main
│   ├── section   (Ricette del giorno)
│   │   ├── article   (Carbonara)
│   │   └── article   (Tiramisù)
│   └── section   (Chi siamo)
└── footer   (contatti e copyright)

Ci sono poi due contenitori generici, che non dicono niente sul contenuto e servono soprattutto per il CSS:

• <div> è un contenitore a blocco: occupa tutta la larghezza e va a capo, come <p> e i titoli;
• <span> è un contenitore in linea: sta dentro il testo senza andare a capo, come <strong>.

Prima di usare un <div>, chiediti se esiste un tag più adatto (<section>, <article>, <nav>…). Il codice diventa più chiaro, e la pagina è più facile da leggere per Google e per i lettori di schermo usati dalle persone non vedenti.

Mettiamo tutto insieme: la homepage di Starry Food

Ecco la prima versione del file index.html del nostro sito. Usa tutto quello che hai visto in questa lezione:

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Starry Food – Le ricette più buone dell'universo</title>
</head>
<body>
    <header>
        <h1>⭐ Starry Food</h1>
        <p>Le ricette più buone dell'universo</p>
    </header>

    <nav>
        <ul>
            <li>Home</li>
            <li>Ricette</li>
            <li>Ingredienti</li>
            <li>Contatti</li>
        </ul>
    </nav>

    <main>
        <section>
            <h2>Ricette del giorno</h2>

            <article>
                <h3>Spaghetti alla carbonara</h3>
                <p>Un classico della cucina romana: <strong>pochi ingredienti</strong>, tanto gusto.</p>
                <ul>
                    <li>Tempo: 20 minuti</li>
                    <li>Difficoltà: media</li>
                </ul>
            </article>

            <article>
                <h3>Tiramisù</h3>
                <p>Il dolce al cucchiaio più amato, <em>senza cottura</em>.</p>
                <ul>
                    <li>Tempo: 30 minuti</li>
                    <li>Difficoltà: facile</li>
                </ul>
            </article>
        </section>

        <section>
            <h2>Chi siamo</h2>
            <p>Starry Food è un ricettario online creato dalla classe 3ª.<br>
            Ogni settimana pubblichiamo una ricetta nuova.</p>
        </section>
    </main>

    <footer>
        <p>&copy; 2026 Starry Food – Via delle Stelle 7, Torino</p>
    </footer>
</body>
</html>

Le voci del menu per ora sono solo testo: nella prossima lezione le trasformeremo in link verso le altre pagine del sito e aggiungeremo le immagini dei piatti.

Errori da evitare

• Dimenticare un tag di chiusura: il browser prova a indovinare, ma il risultato è imprevedibile. Indenta il codice (rientri con il tasto Tab) per vedere subito cosa sta dentro cosa.
• Chiudere i tag nell'ordine sbagliato: l'ultimo aperto è il primo da chiudere.
• Mettere contenuti visibili nel <head>: quello che deve vedersi va nel <body>.
• Scegliere i titoli per la grandezza: <h3> dopo <h1> saltando <h2> confonde la struttura. Per la grandezza si usa il CSS.
• Salvare il file come .txt: controlla che l'estensione sia proprio .html.

Esercizi

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mario Rossi</title>
</head>
<body>
    <h1>Mario Rossi</h1>
    <p>Frequento la classe 3ª all'<strong>I.I.S. Primo Levi</strong> di Torino.</p>
    <p>Nel tempo libero gioco a calcio e mi piace <em>moltissimo</em> programmare.</p>
</body>
</html>

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tiramisù – Starry Food</title>
</head>
<body>
    <h1>Tiramisù</h1>
    <p>Il dolce al cucchiaio più amato, <em>senza cottura</em>.</p>

    <h2>Ingredienti</h2>
    <ul>
        <li>300 g di savoiardi</li>
        <li>500 g di mascarpone</li>
        <li>4 uova</li>
        <li>100 g di zucchero</li>
        <li>Caffè e cacao amaro</li>
    </ul>

    <h2>Preparazione</h2>
    <ol>
        <li>Prepara il caffè e lascialo raffreddare.</li>
        <li>Monta i tuorli con lo zucchero e aggiungi il mascarpone.</li>
        <li>Monta gli albumi a neve e uniscili alla crema.</li>
        <li>Inzuppa i savoiardi nel caffè e alterna strati di biscotti e crema.</li>
        <li>Spolvera di cacao e lascia in frigo per almeno 4 ore.</li>
    </ol>
</body>
</html>

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <title>Menu della settimana</title>
    <h1>Menu della settimana</h1>
</head>
<body>
    <p>Ecco i piatti di <strong>questa settimana</p></strong>
    <ul>
        <li>Lunedì: lasagne
        <li>Martedì: risotto</li>
    </ul>
    <h3>Prenota il tuo tavolo</h3>
</body>
</html>

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <title>Menu della settimana</title>
</head>
<body>
    <h1>Menu della settimana</h1>
    <p>Ecco i piatti di <strong>questa settimana</strong></p>
    <ul>
        <li>Lunedì: lasagne</li>
        <li>Martedì: risotto</li>
    </ul>
    <h2>Prenota il tuo tavolo</h2>
</body>
</html>

<article>
    <h3>Pizza margherita</h3>
    <p>La regina della cucina italiana, con <strong>pomodoro, mozzarella e basilico</strong>.</p>
    <ul>
        <li>Tempo: 2 ore (con la lievitazione)</li>
        <li>Difficoltà: media</li>
    </ul>
</article>

<section>
    <h2>Orari della cucina</h2>
    <table>
        <tr>
            <th>Giorno</th>
            <th>Orario</th>
        </tr>
        <tr>
            <td>Lunedì – Venerdì</td>
            <td>12:00 – 15:00</td>
        </tr>
        <tr>
            <td>Sabato e domenica</td>
            <td>12:00 – 23:00</td>
        </tr>
    </table>
</section>