Tutti i tutorial

Struttura HTML per chi inizia

Nota iniziale

Questa guida non copre tutto l'HTML. Non potrebbe farlo — e sarebbe inutile provarci in un singolo tutorial. HTML è un linguaggio vasto, con centinaia di tag, attributi e sfumature che si imparano nel tempo, con la pratica e con il bisogno.

Quello che trovi qui è una panoramica ragionata: i concetti e i tag che compaiono in ogni progetto reale, quelli che è essenziale conoscere prima di toccare CSS o JavaScript, e soprattutto quelli che fanno la differenza tra una pagina scritta bene e una scritta a caso.

L'obiettivo non è finire questo tutorial e sapere HTML. L'obiettivo è avere fondamenta abbastanza solide da capire cosa stai guardando, da dove iniziare a cercare quando qualcosa non funziona, e perché certe scelte strutturali esistono. Il resto lo costruisci col tempo.

Illustrazione di apertura della guida HTML fondamentali

1. Come funziona HTML

HTML sta per HyperText Markup Language. Non è un linguaggio di programmazione: non esegue logica, non calcola nulla. È un linguaggio di marcatura — descrive la struttura e il significato del contenuto di una pagina.

Il browser legge il file HTML, lo interpreta e costruisce una rappresentazione interna chiamata DOM (Document Object Model). È su questa struttura che CSS applica gli stili e JavaScript agisce dinamicamente. HTML è quindi la radice di tutto: viene prima degli altri due.

Tag, elementi e attributi

HTML funziona tramite tag: parole chiave racchiuse tra parentesi angolari. La maggior parte dei tag sono a coppia: uno di apertura e uno di chiusura. Insieme formano un elemento.

<p>Questo è un paragrafo.</p>

I tag possono avere attributi: informazioni aggiuntive scritte nell'apertura del tag, nella forma nome="valore". Gli attributi modificano o arricchiscono il comportamento dell'elemento.

<a href="https://esempio.com" target="_blank">Visita il sito</a>

Alcuni tag non hanno contenuto e non hanno bisogno di chiusura: si chiamano elementi vuoti. L'immagine (<img>) e l'interruzione di riga (<br>) sono esempi classici.

<img src="foto.jpg" alt="Descrizione dell'immagine">

2. La struttura di una pagina

Ogni file HTML segue una struttura di base che il browser si aspetta di trovare. Non è obbligatorio scriverla tutta a mano ogni volta — gli editor come VS Code la generano con una singola abbreviazione — ma è fondamentale capire cosa significa ogni parte.

<!DOCTYPE html>
<html lang="it">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Il titolo della pagina</title>
  </head>
  <body>
    <!-- Qui va il contenuto visibile -->
    <h1>Ciao, mondo</h1>
  </body>
</html>

Cosa significa ogni parte

  • <!DOCTYPE html>: non è un tag HTML vero e proprio. Dice al browser che il documento usa la versione moderna di HTML (HTML5). Va sempre messa come prima riga.
  • <html lang="it">: il contenitore radice dell'intera pagina. L'attributo lang indica la lingua principale del contenuto — è importante per screen reader e per i motori di ricerca.
  • <head>: contiene informazioni sulla pagina che il browser usa ma che non mostra direttamente all'utente: titolo, charset, viewport, CSS, metadati SEO e molto altro.
  • <meta charset="UTF-8">: specifica la codifica dei caratteri. UTF-8 include lettere accentate, emoji e praticamente qualsiasi simbolo. Senza questo, molti caratteri potrebbero apparire storti.
  • <meta name="viewport">: fondamentale per i dispositivi mobili. Dice al browser di non rimpicciolire la pagina per adattarla allo schermo, ma di rispettare le dimensioni naturali definite dal CSS.
  • <title>: il testo che appare nella tab del browser e nei risultati dei motori di ricerca. Ogni pagina dovrebbe averne uno descrittivo e unico.
  • <body>: tutto ciò che l'utente vede e con cui interagisce: testi, immagini, form, link, menu. Questo è il cuore della pagina.

3. Testi, titoli e paragrafi

Il contenuto testuale è ciò che HTML gestisce da sempre. Ci sono due famiglie principali: i titoli (da <h1> a <h6>) e il testo narrativo (<p>).

I titoli: da h1 a h6

I titoli definiscono la gerarchia del contenuto. Non si scelgono in base alla dimensione visiva — quella la gestisce il CSS — ma in base all'importanza semantica. Una pagina ben strutturata ha un solo <h1> (il titolo principale), seguito da <h2> per le sezioni, <h3> per le sottosezioni e così via.

<h1>Guida a HTML</h1>
<h2>I testi</h2>
<h3>Come usare i titoli</h3>

Saltare livelli (passare da <h1> a <h4> senza passare per h2 e h3) non è un errore tecnico, ma è una cattiva pratica: rompe la gerarchia logica del documento e crea problemi per screen reader e indicizzazione.

Paragrafi e interruzioni

Il testo narrativo va in paragrafi <p>. Il browser aggiunge automaticamente spazio sopra e sotto ogni paragrafo — è il comportamento predefinito, modificabile via CSS.

<p>Questo è il primo paragrafo. Parla di qualcosa.</p>
<p>Questo è il secondo paragrafo. È separato dal primo.</p>

Enfasi e formattazione inline

Dentro un testo si possono usare tag inline per enfatizzare parole o frasi senza interrompere il flusso. I più usati:

  • <strong>: importanza forte, solitamente resa in grassetto. Ha valore semantico — indica importanza, non solo stile visivo.
  • <em>: enfasi, solitamente resa in corsivo. Anche questo ha valore semantico.
  • <code>: testo in formato codice, solitamente con font monospace. Utile per variabili, comandi, snippet.
  • <small>: testo di importanza ridotta (note, avvertenze, disclaimer).
  • <mark>: evidenzia un testo come rilevante in un contesto specifico (come i risultati di una ricerca).
  • <abbr title="...">: abbreviazione con spiegazione nel tooltip.

Evita di usare <b> e <i> al posto di <strong> e <em>: i primi sono puramente visivi, i secondi portano significato. In un documento HTML moderno, il significato conta sempre.

4. Link e navigazione

Il tag <a> (anchor) è la pietra angolare del web. Ogni link nasce da un tag <a> con un attributo href che indica la destinazione.

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

<!-- Link interno allo stesso sito -->
<a href="/tutorial/">Tutti i tutorial</a>

<!-- Link a una sezione nella stessa pagina -->
<a href="#chapter-02">Come funziona HTML</a>

Attributi importanti del tag a

  • href: la destinazione. Può essere un URL assoluto (con https://), un percorso relativo (/pagina/) o un'ancora interna (#id).
  • target="_blank": apre il link in una nuova tab. Da usare con cautela — non sempre è l'esperienza migliore per l'utente. Quando si usa, aggiungere anche rel="noopener noreferrer" per motivi di sicurezza.
  • rel: definisce il tipo di relazione tra la pagina attuale e la destinazione. Valori comuni: noopener, noreferrer, nofollow.
  • download: indica al browser di scaricare la risorsa invece di aprirla.
<!-- Link esterno sicuro -->
<a href="https://github.com" target="_blank" rel="noopener noreferrer">
  Apri GitHub
</a>

<!-- Link per scaricare un file -->
<a href="/files/guida.pdf" download>Scarica la guida</a>

Un link deve sempre avere un testo descrittivo e significativo. Evita testi generici come "clicca qui" o "leggi di più": non dicono nulla a chi naviga con screen reader e penalizzano la SEO.

5. Immagini

Le immagini si inseriscono con il tag vuoto <img>. Due attributi sono sempre obbligatori: src (il percorso dell'immagine) e alt (la descrizione alternativa).

<img src="/images/foto.jpg" alt="Descrizione chiara dell'immagine" width="800" height="600">

L'attributo alt non è facoltativo

L'alt serve agli screen reader per descrivere l'immagine agli utenti non vedenti, ai motori di ricerca per capire il contenuto visivo, e al browser per mostrare qualcosa se l'immagine non si carica. Scrivilo sempre, in modo utile e descrittivo.

Se un'immagine è puramente decorativa e non aggiunge informazioni al contenuto, usa un alt vuoto (alt="") — così lo screen reader la salterà. Non ometterlo del tutto: la sua assenza è considerata un errore.

Width e height: perché vanno messi

Specificare le dimensioni con width e height evita il layout shift: il fastidioso salto dei contenuti mentre la pagina carica. Il browser può riservare lo spazio giusto prima ancora che l'immagine arrivi.

Caricamento lazy

Per le immagini che non sono visibili subito (fuori dalla viewport), è buona pratica usare loading="lazy": dice al browser di caricarle solo quando l'utente si avvicina a quella zona della pagina, migliorando le performance iniziali.

<img
  src="/images/foto-articolo.webp"
  alt="Sviluppatore che scrive codice su uno schermo"
  width="1200"
  height="675"
  loading="lazy"
  decoding="async"
>

Il tag figure

Quando un'immagine ha una didascalia, il modo semanticamente corretto di includerla è usare <figure> e <figcaption>.

<figure>
  <img src="/images/schema.png" alt="Schema architettura web" width="960" height="540">
  <figcaption>Schema semplificato dell'architettura client-server.</figcaption>
</figure>

6. Liste

Le liste sono uno degli elementi più usati in HTML. Esistono tre tipi principali, ognuno con un significato preciso.

Lista non ordinata (ul)

Usata quando l'ordine degli elementi non conta. Il browser la mostra con pallini o simboli, ma lo stile si personalizza via CSS.

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

Lista ordinata (ol)

Usata quando la sequenza è rilevante — passaggi di un procedimento, classifiche, istruzioni. Il browser numera automaticamente gli elementi, ma anche qui lo stile è gestibile via CSS.

<ol>
  <li>Scrivi il codice HTML</li>
  <li>Aggiungi lo stile con CSS</li>
  <li>Aggiungi l'interattività con JavaScript</li>
</ol>

Lista di definizioni (dl)

Meno comune ma utile per glossari, FAQ, o coppie termine-descrizione. Si compone di <dt> (termine) e <dd> (descrizione).

<dl>
  <dt>HTML</dt>
  <dd>Linguaggio di marcatura per la struttura delle pagine web.</dd>

  <dt>CSS</dt>
  <dd>Linguaggio di stile per la presentazione visiva delle pagine.</dd>
</dl>

Le liste possono anche essere annidate: un <li> può contenere un'altra <ul> o <ol> al suo interno per creare gerarchie di voci. Il browser le indenta automaticamente.

7. Semantica: i tag che danno senso

HTML semantico significa usare il tag giusto per il contenuto giusto. Non si tratta solo di stile visivo — si tratta di comunicare la struttura e il ruolo del contenuto al browser, ai motori di ricerca e agli strumenti di accessibilità.

Prima di HTML5, quasi tutto veniva racchiuso in <div>. HTML5 ha introdotto tag con significato specifico che descrivono esattamente cosa contengono.

I tag semantici principali

  • <header>: intestazione di una pagina o di una sezione. Di solito contiene il logo, la navigazione principale, il titolo della pagina.
  • <nav>: blocco di navigazione. Raccoglie i link principali del sito — menu, breadcrumb, paginazione.
  • <main>: il contenuto principale della pagina. Ce ne deve essere uno solo per pagina. Aiuta gli screen reader a saltare direttamente al contenuto rilevante.
  • <article>: contenuto autonomo e ridistribuibile: un post, una notizia, un tutorial, un commento. Ha senso anche fuori dal suo contesto originale.
  • <section>: una sezione tematica del contenuto, con un titolo proprio. Diverso da <article>: una sezione non è autonoma, fa parte di qualcosa di più grande.
  • <aside>: contenuto correlato ma secondario rispetto al contenuto principale. Barre laterali, note, approfondimenti, pubblicità.
  • <footer>: piè di pagina. Contiene informazioni come copyright, link secondari, contatti.
<body>
  <header>
    <nav>...</nav>
  </header>

  <main>
    <article>
      <h1>Titolo dell'articolo</h1>
      <section>
        <h2>Prima sezione</h2>
        <p>Contenuto...</p>
      </section>
    </article>

    <aside>
      <p>Contenuto correlato...</p>
    </aside>
  </main>

  <footer>...</footer>
</body>

Usare HTML semantico non è una formalità: migliora l'accessibilità, aiuta la SEO e rende il codice molto più leggibile per chi lo mantiene nel tempo.

8. Div e span: i contenitori neutri

<div> e <span> non hanno significato semantico. Sono contenitori trasparenti, usati quando nessun altro tag descrive meglio il contenuto e si ha bisogno di un aggancio per il CSS o per JavaScript.

div: contenitore a blocco

Il <div> è un elemento block: occupa tutta la larghezza disponibile e va a capo prima e dopo. Si usa per raggruppare elementi che devono condividere stili, layout o comportamenti.

<div class="card">
  <h3>Titolo della card</h3>
  <p>Testo della card.</p>
</div>

span: contenitore inline

Lo <span> è un elemento inline: non interrompe il flusso del testo. Si usa per applicare stili o riferimenti a una porzione di testo all'interno di un paragrafo o di un altro elemento.

<p>Il prezzo è <span class="prezzo-evidenziato">€29,90</span> IVA inclusa.</p>

La regola pratica

Prima di usare un <div>, chiediti se esiste un tag semantico più appropriato. Spesso la risposta è sì: <section>, <article>, <nav>, <header> o <footer> descrivono meglio cosa contengono. Il <div> è uno strumento utile, ma non è mai la prima scelta.

9. Attributi fondamentali

Alcuni attributi non sono specifici di un solo tag: si chiamano attributi globali e possono essere usati su qualsiasi elemento HTML. Sono pochi, ma comprendono buona parte di ciò che serve davvero.

  • id: identificatore unico. Deve essere usato una sola volta per pagina. Serve per ancore interne (href="#id"), riferimenti JavaScript e selettori CSS specifici.
  • class: una o più classi CSS separate da spazio. È il modo principale per applicare stili e comportamenti a elementi. Può essere condivisa tra più elementi.
  • style: CSS inline direttamente nell'elemento. Da usare con parsimonia — il CSS separato è più manutenibile — ma utile per stili dinamici generati da JavaScript.
  • lang: indica la lingua di un elemento specifico, utile quando il testo cambia lingua all'interno della stessa pagina.
  • title: testo del tooltip che appare al passaggio del mouse. Non usarlo come unico modo per fornire informazioni importanti — non è accessibile su touch screen.
  • hidden: nasconde un elemento dalla pagina. Equivale a display: none ma con un significato semantico: l'elemento non è attualmente rilevante.
  • tabindex: controlla se e in che ordine un elemento è raggiungibile con il tasto Tab. Fondamentale per l'accessibilità da tastiera.
  • aria-*: attributi ARIA (Accessible Rich Internet Applications). Aggiungono informazioni semantiche per screen reader su elementi interattivi personalizzati.
  • data-*: attributi personalizzati per memorizzare dati extra nell'HTML, leggibili via JavaScript. Utili per collegare dati al DOM senza sporcare il codice.
<!-- Uso pratico di id, class e data-* -->
<button
  id="btn-acquista"
  class="button button--primary"
  data-product-id="42"
  aria-label="Acquista il prodotto"
>
  Acquista ora
</button>

10. Form e input essenziali

I form sono il meccanismo con cui HTML raccoglie dati dall'utente: campi di testo, selezioni, checkbox, bottoni di invio. È un capitolo vasto, ma ci sono alcune basi senza le quali non si va da nessuna parte.

La struttura di un form

<form action="/invia" method="POST">
  <label for="nome">Il tuo nome</label>
  <input type="text" id="nome" name="nome" placeholder="Es. Mario Rossi" required>

  <label for="email">Email</label>
  <input type="email" id="email" name="email" placeholder="mario@esempio.com" required>

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

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

Elementi essenziali dei form

  • <form>: il contenitore. L'attributo action indica dove inviare i dati, method specifica il metodo HTTP (GET o POST).
  • <label>: l'etichetta di un campo. L'attributo for deve corrispondere all'id del campo associato — questo è fondamentale per l'accessibilità. Cliccando sull'etichetta si attiva il campo.
  • <input>: campo di input. Il suo comportamento dipende dall'attributo type: text, email, password, number, checkbox, radio, file, date e molti altri.
  • <textarea>: campo di testo multiriga. Utile per messaggi, descrizioni, commenti.
  • <select> e <option>: menu a tendina. Il <select> è il contenitore, ogni <option> è una scelta.
  • <button>: pulsante. Il type="submit" invia il form, type="button" non fa nulla di default (gestito via JavaScript), type="reset" svuota i campi.

Attributi degli input che fanno la differenza

  • required: rende il campo obbligatorio — il browser blocca l'invio se vuoto.
  • placeholder: testo suggerimento che scompare quando l'utente inizia a scrivere. Non sostituisce la <label>.
  • name: il nome con cui il dato viene inviato al server. Senza name, il campo viene ignorato nell'invio del form.
  • value: il valore predefinito del campo o, per checkbox e radio, il valore inviato se selezionato.
  • disabled: disabilita il campo — non è modificabile né inviabile.
  • autocomplete: suggerisce al browser se e come autocompletare il campo.

11. Head: quello che non si vede

Il tag <head> è la parte della pagina che l'utente non vede direttamente, ma che determina gran parte di come la pagina viene interpretata, indicizzata e visualizzata. Capirlo è indispensabile.

I meta tag più importanti

  • <meta name="description">: la descrizione della pagina mostrata dai motori di ricerca nei risultati. Dovrebbe essere chiara, concisa e unica per ogni pagina (max 160 caratteri).
  • <meta name="robots">: istruzioni per i crawler. index, follow (default) permette l'indicizzazione; noindex la impedisce.
  • <meta property="og:*">: tag Open Graph. Controllano come la pagina appare quando condivisa su social come Facebook o LinkedIn: titolo, descrizione, immagine.
  • <link rel="canonical">: indica ai motori di ricerca l'URL preferito della pagina, evitando problemi di contenuto duplicato.

Caricare CSS e JavaScript

<!-- CSS: va nel head, prima del body -->
<link rel="stylesheet" href="/styles/main.css">

<!-- JS: meglio a fine body o con defer/async nel head -->
<script src="/scripts/main.js" defer></script>

L'attributo defer dice al browser di scaricare lo script in parallelo ma di eseguirlo solo dopo che il DOM è completamente caricato. È la scelta migliore nella maggior parte dei casi per script che interagiscono con la pagina.

Favicon e icone

La favicon è l'icona nella tab del browser. Il modo moderno per definirla usa un file SVG come principale, con fallback PNG per i browser più vecchi:

<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="icon" href="/favicon-32.png" sizes="32x32" type="image/png">

12. Dove continuare dopo

HTML da solo non fa molto — diventa potente quando lavora con CSS per lo stile e JavaScript per l'interattività. Ma prima di addentrarsi in queste direzioni, ha senso avere il resto dell'ambiente di lavoro sotto controllo. Alcuni passi naturali dopo questa guida:

  • VS Code essenziale: per scrivere HTML in un editor potente, con autocompletamento, emmet e preview in tempo reale.
  • DevTools del browser: per ispezionare il DOM, vedere il CSS applicato a ogni elemento e capire cosa succede davvero nella pagina.
  • Accessibilità web di base: HTML semantico e accessibilità vanno di pari passo. Questo tutorial approfondisce i punti toccati nella sezione semantica di questa guida.
  • SEO tecnico base: per capire come usare al meglio i tag del <head> e strutturare le pagine in modo che i motori di ricerca le apprezzino.
  • Tutti i tutorial: per continuare a costruire, una guida alla volta.